HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
CardView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorGroups related content and actions into a single surface.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/card'import'@fusion.dev/helix-headless/card'Preview
API ReferenceRoothelix-cardGroups related content and actions into a single surface.
PropTypeDescriptionlabelstringDefault""The card's accessible name, which makes it a named group.material"frosted"|"glass"|"transparent"What the card is made of.mediaPlacement"end"Places the media after the content. By default it comes before.orientation"vertical"|"horizontal"Whether media sits above the content stack or beside it.separation"elevated"|"filled"|"outlined"|"plain"How the card separates itself from the page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The card's main content.footerActions that conclude the card.footer-actionsControls at the end of the footer's line, with the footer at its start.headerTitle and any actions for the whole card.header-actionsControls for the whole card at the end of the header's line, such as a menu.mediaImage, video, or chart that runs edge to edge, outside the inset.
PartDescriptionbodyThe slot the main content arrives through. A slot draws no box, so it passes inherited properties, such as color and font, to the content; display: block gives it one.footerThe slot the footer arrives through, drawing no box, as body does.footer-actionsThe slot the footer's controls arrive through, drawing no box, as body does.footer-rowThe line holding footer and footer-actions, drawn only while footer-actions holds something.headerThe slot the header arrives through, drawing no box, as body does.header-actionsThe slot the header's controls arrive through, drawing no box, as body does.header-rowThe line holding header and header-actions, drawn only while header-actions holds something.mediaThe slot the media arrives through, drawing no box, as body does.
CSS PropertyDescription--card-alignHow the regions pack when the card is stretched taller than its content. start by default, so the slack is at the bottom; space-between puts a footer on the floor.--card-backdropFilter applied behind a frosted or glass card. Follows the theme's material policy; set it to override the strength on one card.--card-background-colorSurface behind the card.--card-border-colorBorder color of the surface.--card-border-widthWidth of the surface's edge. Follows --helix-border-surface, which is a hairline unless your theme sets another width. The edge is what sets the surface apart.--card-colorColor of the card's text. Muted by default, so the header reads as the card's own voice.--card-gapSpace between the regions, and between a header or footer and its actions.--card-heading-colorColor of the header, and of a Text heading anywhere in the card. The foreground by default.--card-line-heightLine height of the card's text. The normal leading by default.--card-media-block-sizeHeight of the media region. Defaults to auto, which follows an image's own proportions. A chart has no height of its own, so set one here for a chart.--card-media-fitHow a slotted picture fills the media region, as object-fit. cover by default; contain shows all of a logo or a screenshot.--card-media-sizeWidth of the media column when horizontal.--card-paddingInset applied to each region.--card-radiusCorner radius of the surface.--card-shadowShadow under the surface. elevated sets it, and a data-card link raises it on hover.
Custom stateDescriptionhas-footerSomething is slotted into footer or footer-actions.has-headerSomething is slotted into header or header-actions.has-mediaSomething is slotted into media.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-cardGroups related content and actions into a single surface.
PropTypeDescriptionlabelstringDefault""The card's accessible name, which makes it a named group.mediaPlacement"end"Places the media after the content. By default it comes before.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The card's main content.footerActions that conclude the card.footer-actionsControls at the end of the footer's line, with the footer at its start.headerTitle and any actions for the whole card.header-actionsControls for the whole card at the end of the header's line, such as a menu.mediaImage, video, or chart that runs edge to edge, outside the inset.
PartDescriptionbodyThe slot the main content arrives through. A slot draws no box, so it passes inherited properties, such as color and font, to the content; display: block gives it one.footerThe slot the footer arrives through, drawing no box, as body does.footer-actionsThe slot the footer's controls arrive through, drawing no box, as body does.footer-rowThe line holding footer and footer-actions, drawn only while footer-actions holds something.headerThe slot the header arrives through, drawing no box, as body does.header-actionsThe slot the header's controls arrive through, drawing no box, as body does.header-rowThe line holding header and header-actions, drawn only while header-actions holds something.mediaThe slot the media arrives through, drawing no box, as body does.
Custom stateDescriptionhas-footerSomething is slotted into footer or footer-actions.has-headerSomething is slotted into header or header-actions.has-mediaSomething is slotted into media.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionActionsA card with a control at the end of its header and its footer.ElevatedA card lifted off the page with a shadow.FilledA card set apart by its own fill color, with no border and no shadow.HorizontalA card with its media beside the text, with orientation set to horizontal.LinkedA card that navigates as a whole, with the link on its heading.MaterialThe three materials over one background, each a translucent fill paired with a backdrop filter.Media At The EndMedia against the bottom edge, for a chart that sums up the card.NamedA card named with label, which makes it a group a screen reader announces by that name.OutlinedA card with a hairline border.PlainA card with no border and no shadow, for use inside a container that already has both.PreviewA card with a heading, some text, and a footer, in its default appearance.PreviewA card with a heading, some text, and a footer, in its default appearance.