Card

Container component for grouping related content.

Default

Preview Code

<ac-card>
<h3 style="margin:0 0 0.5rem">Card title</h3>
<p style="margin:0;color:var(--ac-text-muted)">Card content goes here. Use cards to group related information.</p>
</ac-card>

Copy

Hover variants

Preview Code hover with blue · orange · green accent

<ac-card variant="hover" hover-color="blue">
<h3>Blue hover</h3>
</ac-card>
<ac-card variant="hover" hover-color="orange">
<h3>Orange hover</h3>
</ac-card>
<ac-card variant="hover" hover-color="green">
<h3>Green hover</h3>
</ac-card>

Copy

Style variants

Preview Code flat · outlined · raised

<ac-card variant="flat"><p>Flat</p></ac-card>
<ac-card variant="outlined"><p>Outlined</p></ac-card>
<ac-card variant="raised"><p>Raised</p></ac-card>

Copy

With IconBox (hover color change)

Preview Code

<ac-card variant="hover" hover-color="blue" style="max-width:280px">
<ac-iconbox variant="blue" style="margin-bottom:1rem">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
</ac-iconbox>
<h3 style="margin:0 0 0.25rem;font-size:1rem">Dashboard</h3>
<p style="margin:0;color:var(--ac-text-muted);font-size:0.875rem">Monitor your metrics.</p>
</ac-card>

Copy

Attributes

Attribute	Values	Default	Description
variant	default | hover | flat | outlined | raised | surface	default	Visual style
hover-color	blue | orange | green	blue	Border accent on hover
size	sm | lg	—	Padding size
selected	boolean	—	Selected state (blue ring)