Skip to main content
A visual container card that groups related data elements together with an optional header, title, and subtitle. The card group provides a white background with shadow styling to visually separate and organize sections of a form.

​
Type

type: "cardGroup"

​
Properties

​
Required Properties

None

​
Optional Properties

PropertyTypeDescriptionDefault
showHeaderbooleanWhether to display the header sectiontrue
titlestringHeader title to display (only shown if showHeader is true)-
subtitlestringSubtitle to display below the title (only shown if showHeader is true)-

​
Layout

  • Default Width: 12 columns
  • Default Height: 4 rows
  • Supports Children: Yes

​
Configuration Example

- type: cardGroup
  id: customerInfo
  properties:
    showHeader: true
    title: "CUSTOMER DETAILS"
    subtitle: "Primary contact information"
  layout:
    x: 0
    y: 0
    w: 12
    h: 4
  children:
    - type: label
      id: nameLabel
      properties:
        label: "Name: John Doe"
      layout:
        x: 0
        y: 0
        w: 6
        h: 1
    - type: label
      id: emailLabel
      properties:
        label: "Email: john@example.com"
      layout:
        x: 6
        y: 0
        w: 6
        h: 1

​
Advanced Usage

​
Conditional Header Display

The showHeader property allows you to toggle the visibility of the title and subtitle. This is useful when you want the visual grouping of cards without the header text, or when you need to conditionally show/hide the header based on form state. 
- type: cardGroup
  id: simpleGroup
  properties:
    showHeader: false  # No header, just visual grouping
  children:
    # Cards here...

​
Visual Hierarchy

The card group provides visual hierarchy through:
  • White background with shadow for depth
  • Uppercase, tracked title text
  • Gray color scheme for subtle differentiation
  • Border separator between header and content

​
Organizing Complex Forms

Use card groups to break up complex forms into logical sections: 
- type: cardGroup
  id: personalInfo
  properties:
    title: "PERSONAL INFORMATION"
  layout:
    x: 0
    y: 0
    w: 6
    h: 8

- type: cardGroup
  id: companyInfo
  properties:
    title: "COMPANY INFORMATION"
  layout:
    x: 6
    y: 0
    w: 6
    h: 8

​
Notes

  • The title is displayed in uppercase with letter-spacing for visual emphasis
  • The subtitle uses a lighter gray color and smaller font for secondary information
  • The component uses padding and margins to create visual separation
  • Child cards are rendered within a row layout system that handles responsive positioning
  • The header section includes a border-bottom separator when displayed