Cards
CardControl · CardGroupControlA bordered container with an optional header, image, body and footer, and a grid that lays several of them out.
Overview
CardControl stacks four regions: a header from Title and Subtitle (or your own
HeaderContent), an image from ImageUrl, the body from child content, and a right-aligned
FooterContent row. Elevation picks one of three shadow depths. CardGroupControl is a
grid of 280px-minimum columns that wraps as the page narrows and stretches every card in a row to the same height.
Examples
#Card with image, header and footer
Title and Subtitle fill the header; the image sits between header and body, and ImageAlt falls back to the title. Footer children line up on the right. Pick an elevation to compare the shadows; 0 leaves only the border.
EST-2042 Contoso kitchen
Draft · 14 lines
Quartz counters, cabinet install and tile backsplash. Last saved today 09:12 by Dana.
Open has not been clicked.
#Card group
Three cards from a list. HeaderContent replaces the title block, here with an icon. Narrow the window and the grid drops to two columns, then one.
Kitchen, 14 lines, $12,480.
Office fit-out, 22 lines, $48,900.
Storefront, 9 lines, $7,150.
Documentation
CardControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Title (base) | string? | null | Header heading. The base class documents it as a descriptive title; this control renders it as an <h5>. |
Subtitle | string? | null | Second line under the title. |
ImageUrl | string? | null | Image rendered full width between header and body. |
ImageAlt | string? | null | Alt text; falls back to Title, then "Card image". |
Elevation | int | 1 | Shadow depth 1 to 3; 0 or less draws only the border. |
HeaderContent | RenderFragment? | null | Replaces the title and subtitle inside the header. |
ChildContent | RenderFragment? | null | Body. |
FooterContent | RenderFragment? | null | Footer, a right-aligned flex row with a 0.5rem gap. |
CssClass / Style (base) | string? | null | On the fx-card root. The base Visible is not applied. |
(unmatched attributes) | Dictionary<string,object> | — | Forwarded to the root <div>. |
CardGroupControl parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | null | The cards. |
CssClass / Style (base) | string? | null | On the fx-card-group grid. |
(unmatched attributes) | Dictionary<string,object> | — | Forwarded to the grid <div>. |
CSS classes
| Class | Effect |
|---|---|
fx-card · fx-card-elevation-1 / -2 / -3 | White rounded box with a hairline border, overflow: hidden; the elevation classes add the shadows. |
fx-card-header · fx-card-title · fx-card-subtitle | Header block with a bottom hairline; bold 1rem title, 0.8rem grey subtitle. |
fx-card-image | Full-width image block; the image is display: block. |
fx-card-body | Padded body that grows to fill the card. |
fx-card-footer | Light grey footer, flex row aligned to the end. |
fx-card-group | Grid, repeat(auto-fit, minmax(280px, 1fr)), 1rem gap. |
Colours, padding and the three shadows are fixed in the stylesheet; it reads no --fx-* variables. Restyle by overriding these classes.
Keyboard and accessibility
- A card is a plain
<div>with no role.Titlerenders as an<h5>andSubtitleas an<h6>; useHeaderContentwhen the page needs a different heading level. - The image's
altisImageAlt, thenTitle, then "Card image". Give decorative images an emptyImageAlt. - Nothing in a card is focusable except what you put in it. The footer is a flex row, so buttons there keep their natural Tab order.
CardGroupControlis a CSS grid; it adds no list semantics.