HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet 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.
PropTypeDefaultDescriptionmaterial"frosted"|"glass"|"transparent"What the card is made of.mediaPlacement"end"Puts the media after the content instead of before it.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.headerTitle and any actions for the whole card.mediaImage, video, or chart that runs edge to edge, outside the inset.
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`, a hairline, so the surface is told apart by its edge unless a theme says otherwise.--card-media-block-sizeHeight of the media region. Defaults to `auto`, which is an image's own shape and is not a height a chart has.--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. What `elevated` sets, and what a `data-card` link raises on hover.
Roothelix-headless-cardGroups related content and actions into a single surface.
PropTypeDefaultDescriptionmediaPlacement"end"Puts the media after the content instead of before it.
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.headerTitle and any actions for the whole card.mediaImage, video, or chart that runs edge to edge, outside the inset.
ExamplesNameDescriptionElevatedLifted off the page with a shadow rather than an outline.FilledTold apart by its own color, with neither edge nor lift.HorizontalMedia beside the words rather than above them.LinkedA whole card that navigates, with the heading carrying the link.MaterialGlass, which is a pair: a ground that lets light through and a filter behind it.Media BesideThe picture down one side, for a row in a list rather than a tile in a grid.OutlinedA hairline around the surface.PlainNeither border nor shadow, for a card inside something that has both.PreviewA heading, some prose, and a footer, in the resting appearance.PreviewA heading, some prose, and a footer, in the resting appearance.