Atlas Forms
Card Container
The card-container layout control wraps a group of controls inside a styled card — a bordered and/or shadowed box with an optional title header. Use it to visually group related fields without the complexity of tabs or accordion. Supports a collapsible variant.
Minimal Example
{
"id": "contact-card",
"type": "card-container",
"order": 3,
"width": "full",
"settings": {
"title": "Contact Information",
"sectionId": "sec-contact"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
title | string | — | Card header title text |
subtitle | string | — | Secondary text below the title in the header |
sectionId | string | — | ID of the form section to display inside the card |
collapsible | boolean | false | Show a toggle button in the header to collapse/expand |
defaultCollapsed | boolean | false | Start in collapsed state when collapsible: true |
shadow | none | sm | md | lg | sm | Drop shadow depth |
border | boolean | true | Show card border |
borderRadius | string (CSS) | theme default | Corner rounding |
padding | none | sm | md | lg | md | Inner content padding |
headerIcon | string (FA class) | — | Icon displayed before the title |
headerActions | ActionRef[] | — | Action buttons rendered in the card header |
Basic Card with Title
{
"id": "billing-card",
"type": "card-container",
"settings": {
"title": "Billing Address",
"subtitle": "Where invoices will be sent",
"headerIcon": "fa-solid fa-building",
"sectionId": "sec-billing-address",
"shadow": "md",
"padding": "md"
}
}Collapsible Card
A collapsible card is useful for optional sections that most users do not need to fill in:
{
"id": "advanced-card",
"type": "card-container",
"settings": {
"title": "Advanced Configuration",
"subtitle": "Optional — leave expanded only if you need custom settings",
"collapsible": true,
"defaultCollapsed": true,
"sectionId": "sec-advanced"
}
}Cards Side by Side
Use width: "half" to place two cards side by side in the 12-column grid:
// Left card
{
"id": "shipping-card",
"type": "card-container",
"width": "half",
"order": 1,
"settings": {
"title": "Shipping Address",
"sectionId": "sec-shipping"
}
},
// Right card
{
"id": "billing-card-2",
"type": "card-container",
"width": "half",
"order": 2,
"settings": {
"title": "Billing Address",
"sectionId": "sec-billing"
}
}Card vs Section
| Use card-container when | Use form section when |
|---|---|
| Grouping fields inside an existing section | Top-level form organisation |
| Sub-grouping within tabs or accordion | Tab target (section referenced by tabs) |
| Decorative card border is needed | Plain content without visual card styling |
| Collapsible optional section | Always-visible section |