ars-card — Demo

About

Flexible card component with slots for header, media, content, actions, and footer. Supports outlined, elevated, and interactive variants with hover states.

Variants

Default Card Clean and minimal with subtle shadow. Best for lists and grids.

Outlined Card Defined border, no shadow. Great for dense layouts and contrast.

Elevated Card Prominent shadow with larger radius. Draws attention to key content.

<ars-card variant="elevated">
  <span slot="header">Title</span>
  Content...
  <div slot="actions"><button>Action</button></div>
</ars-card>

Interactive (with media)

Golden Retriever — Lost Last seen near Parque Ibirapuera on April 24. Wearing a red collar with tag.

Posted 2 hours ago · São Paulo, SP

<ars-card interactive variant="elevated" href="/pets/123">
  <img slot="media" src="photo.jpg" />
  <span slot="header">Title</span>
  Content...
  <div slot="footer">Metadata</div>
</ars-card>

Padding Options

Small Padding Tight spacing for compact layouts.

Large Padding Roomy spacing for featured content.

<ars-card padding="sm">...</ars-card>
<ars-card padding="lg">...</ars-card>
<ars-card padding="none">...</ars-card>

Event Monitor

Click Me This card emits ars-card:click events.

[ready] Click the card above...

Theme Toggle

Usage

<ars-card
  variant="elevated"
  padding="md"
  interactive
  href="/pets/123"
>
  <img slot="media" src="photo.jpg" />
  <span slot="header">Lost Dog</span>
  Last seen near downtown...
  <div slot="footer">2 hours ago</div>
</ars-card>

<script>
  const card = document.querySelector('ars-card');
  card.addEventListener('ars-card:click', (e) => {
    console.log('Card clicked:', e.detail.variant);
  });
</script>