A card surface with a dedicated image area plus heading
and description slots. Ships light and dark image
sources that switch with the theme.
Image on top, text below. Provide image-src and
image-src-dark so the artwork tracks the active theme.
Drag and drop components with endless combinations.
The image fills the card and text sits above it — set a fixed
height for a consistent tile.
Semantic color and type styles.
feature cards, blog-post previews, and product showcases — any content pairing an image with text, often laid out in a bento grid. For a plain surface, use Card.
heading slot so the card joins the document outline.image-src and image-src-dark so artwork reads in either theme.fill variant with a fixed height in a grid.fill image without enough contrast.image-alt empty when the image carries meaning.heading slot should hold a real <h2>–<h4> at the right level for the page outline.image-alt sets the <img> alt — describe meaningful images, use "" for purely decorative ones.image-src-dark in dark mode; make sure both sources convey the same information.fill variant, text sits over the image — keep it WCAG AA legible across both image sources.