The workhorse layout component. Holds any children; semantic tag driven by props.type (section, header, footer, nav, main, aside, form, details, summary, etc.).
The workhorse layout component. Holds any children; semantic tag driven by props.type (section, header, footer, nav, main, aside, form, details, summary, etc.).
Container is the default for any layout block. The moment you need to repeat children from data, switch the resolved type to Data (same DOM, adds dataSource).
| Prop | Notes |
|---|---|
type | container (default), section, page, header, footer, nav, aside, main, form, component, imageContainer, details, summary. Drives the HTML tag. page = top-level page Container (must be a child of ROOT, exactly one with isHomePage: true per multi-page tree). |
isHomePage / is404Page | bool. On a type: "page" Container only. |
anchor | string. HTML id for in-page links (becomes id="..."). |
tabGroup | string. Tab group identifier — Buttons can target this via show-hide. |
action / method / target | when type: "form". |
id | Explicit DOM id (separate from craft node id; craft node IDs do NOT appear as DOM ids). |
role, aria-* | Accessibility. |
click | ClickControl partial — alternative to Button.action for clickable cards. |
seo | Per-page SEO when type: "page". |
background | BackgroundProps (image, position, size). |
attrs | Pass-through DOM attrs. |
handlers | Custom JS event handlers. |
className, root, overflow | Standard. |
Children: any.
dataSource.type.type: "form" works for plain action/method, but Form adds the SDK submission pipeline.attrs.id writes a DOM id attribute; craft node id does not. Use attrs: { id: "my-modal" } (or the dedicated id prop) for show-hide / anchor targets.w-full does not widen — for edge-bleed inside a padded card use w-[calc(100%+(var(--space-lg)*2))] -mx-space-lg max-w-none.dataSource on a Container does nothing — convert to Data.