Card
Content container with header, body, footer, and image slots.
<rhx-card>
Examples
Basic
Product Name
A short description of the product. Great for showcasing items in a grid layout.
<rhx-card>
<rhx-card-header><h3 style="margin:0;">Product Name</h3></rhx-card-header>
<p>A short description of the product. Great for showcasing items in a grid layout.</p>
<rhx-card-footer>
<rhx-button rhx-variant="brand" rhx-size="small">Buy Now</rhx-button>
<rhx-button rhx-variant="ghost" rhx-size="small">Details</rhx-button>
</rhx-card-footer>
</rhx-card>With Image
Featured Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.
<rhx-card>
<rhx-card-image rhx-src="https://picsum.photos/640/360" rhx-alt="Random photo" />
<rhx-card-header><h3 style="margin:0;">Featured Article</h3></rhx-card-header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<rhx-card-footer>
<rhx-button rhx-variant="ghost" rhx-size="small">Read More</rhx-button>
</rhx-card-footer>
</rhx-card>Minimal
A simple card with just body content. No header, footer, or image required.
<rhx-card>
<p>A simple card with just body content. No header, footer, or image required.</p>
</rhx-card>Card Grid
Card 1
Card 1 content goes here with some placeholder text.
Card 2
Card 2 content goes here with some placeholder text.
Card 3
Card 3 content goes here with some placeholder text.
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--rhx-space-lg);">
<rhx-card>
<rhx-card-header><h3 style="margin:0;">Card 1</h3></rhx-card-header>
<p>Card 1 content goes here with some placeholder text.</p>
<rhx-card-footer>
<rhx-button rhx-variant="ghost" rhx-size="small">Action</rhx-button>
</rhx-card-footer>
</rhx-card>
<rhx-card>
<rhx-card-header><h3 style="margin:0;">Card 2</h3></rhx-card-header>
<p>Card 2 content goes here with some placeholder text.</p>
<rhx-card-footer>
<rhx-button rhx-variant="ghost" rhx-size="small">Action</rhx-button>
</rhx-card-footer>
</rhx-card>
<rhx-card>
<rhx-card-header><h3 style="margin:0;">Card 3</h3></rhx-card-header>
<p>Card 3 content goes here with some placeholder text.</p>
<rhx-card-footer>
<rhx-button rhx-variant="ghost" rhx-size="small">Action</rhx-button>
</rhx-card-footer>
</rhx-card>
</div>Properties
| Property | Type | Default | Description |
|---|---|---|---|
(slot) |
rhx-card-header |
- |
Optional header section rendered at the top of the card |
(slot) |
rhx-card-footer |
- |
Optional footer section rendered at the bottom of the card |
(slot) |
rhx-card-image |
- |
Optional top image with rhx-src and rhx-alt attributes |
Accessibility
- Renders as an
<article>element, providing a semantic landmark for assistive technology. - A heading inside
<rhx-card-header>gives the card an accessible name via the document outline. - Focusable cards (e.g. clickable cards) should include
tabindex="0"and a keyboard handler. - Images in
<rhx-card-image>requirerhx-altfor meaningful alternative text.