Card
A container for grouping related content.
Usage
Card Title
A brief description of this card's content.
Card body content goes here.
<div class="zui-card">
<div class="zui-card-header">
<div class="zui-card-title">Card Title</div>
<div class="zui-card-description">A brief description of this card's content.</div>
</div>
<div class="zui-card-body">
<p>Card body content goes here.</p>
</div>
</div><div class="zui-card">
<div class="zui-card-header">
<div class="zui-card-title">Card Title</div>
<div class="zui-card-description">Description text.</div>
</div>
<div class="zui-card-body">Content here.</div>
</div>import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/react'
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Description text.</CardDescription>
</CardHeader>
<CardBody>Content here.</CardBody>
</Card>---
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/astro'
---
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Description text.</CardDescription>
</CardHeader>
<CardBody>Content here.</CardBody>
</Card>With Footer
Confirm Action
Are you sure you want to proceed?
<div class="zui-card">
<div class="zui-card-header">
<div class="zui-card-title">Confirm Action</div>
<div class="zui-card-description">Are you sure you want to proceed?</div>
</div>
<div class="zui-card-footer">
<button class="zui-button zui-button-variant-outline">Cancel</button>
<button class="zui-button">Confirm</button>
</div>
</div>Elevated
Elevated Card
Uses a shadow instead of a border.
Shadow-based card style.
<div class="zui-card zui-card-elevated">
<div class="zui-card-header">
<div class="zui-card-title">Elevated Card</div>
<div class="zui-card-description">Uses a shadow instead of a border.</div>
</div>
<div class="zui-card-body">
<p>Shadow-based card style.</p>
</div>
</div>Interactive
<a href="#" class="zui-card zui-card-interactive">
<div class="zui-card-header">
<div class="zui-card-title">Clickable Card</div>
<div class="zui-card-description">This entire card is a link.</div>
</div>
</a><a href="/details" class="zui-card zui-card-interactive">
<div class="zui-card-title">Clickable Card</div>
</a>import { Card, CardTitle } from '@mrmartineau/zui/react'
<Card href="/details">
<CardTitle>Clickable Card</CardTitle>
</Card>---
import { Card, CardTitle } from '@mrmartineau/zui/astro'
---
<Card href="/details">
<CardTitle>Clickable Card</CardTitle>
</Card>