Card

Versatile content container for information blocks, with hover shadow elevation and clickable state.

Basic Usage

Airo is an open-source Vue 3 UI component library focused on refining the "feel" — fluid spring animations, restrained color system, clean visual hierarchy.

<ACard>
  <p>Airo is an open-source Vue 3 UI component library...</p>
</ACard>

Sections

Title

Card content area, between header and footer.

Updated May 2026

<ACard>
  <template #header>
    <h4>Title</h4>
  </template>
  <p>Card content</p>
  <template #footer>
    <span>Updated May 2026</span>
  </template>
</ACard>

Clickable

Click the entire card to trigger interaction. Active state scales to 0.99 with spring bounce.

<ACard clickable @click="handleClick">
  <p>Click the entire card to trigger interaction...</p>
</ACard>

API

Props

Name	Type	Default	Description
clickable	boolean	false	Clickable (scale spring on active)
hoverable	boolean	true	Shadow elevation on hover

Slots

Name	Description
default	Card body content
header	Card header
footer	Card footer

Interaction

• Hover: --shadow-sm → --shadow-md smooth transition
• clickable active: scale(0.99) spring bounce