Card

Example

<div class="omni-card">
  <h3>Default Card</h3>
  <p>Cards are flexible containers that work by default.</p>
</div>

Variants

Semantic Variants

Use data-variant to apply semantic color schemes:

<div class="omni-card" data-variant="primary">Primary Card</div>
<div class="omni-card" data-variant="success">Success Card</div>
<div class="omni-card" data-variant="warning">Warning Card</div>
<div class="omni-card" data-variant="danger">Danger Card</div>

Style Variants

Combine data-variant with data-variant-style for different visual treatments:

Sizes

Use data-size to adjust card padding:

<div class="omni-card" data-size="sm">Small Card</div>
<div class="omni-card">Medium Card (default)</div>
<div class="omni-card" data-size="lg">Large Card</div>

Elevation

Control shadow depth with data-elevation:

<div class="omni-card">Default Elevation</div>
<div class="omni-card" data-elevation="none">No Elevation</div>

Hover Effect

Add data-hover="true" for interactive lift effect:

<div class="omni-card" data-hover="true">
  <h4>Hoverable Card</h4>
  <p>Hover over this card to see the lift effect.</p>
</div>

Card Sections

Structure complex cards with header, body, and footer sections:

<div class="omni-card">
  <div class="omni-card-header">
    <h4>Card Header</h4>
  </div>
  <p>Main content goes here.</p>
  <div class="omni-card-footer">
    <div class="omni-card-actions">
      <button class="omni-button" data-variant="primary">Action</button>
      <button class="omni-button" data-variant="secondary">Cancel</button>
    </div>
  </div>
</div>

Card with Image

Images as the first child automatically span the full card width:

Image Card

First child images automatically span the full width with rounded top corners.

Learn More

<div class="omni-card">
  <img src="image.jpg" alt="Description">
  <h4>Image Card</h4>
  <p>Content below the image.</p>
</div>

Clickable Cards

Use <a> or <button> elements for interactive cards:

<a href="/destination" class="omni-card">
  <h4>Link Card</h4>
  <p>Click anywhere to navigate.</p>
</a>

<button class="omni-card">
  <h4>Button Card</h4>
  <p>Click anywhere to trigger action.</p>
</button>

Selectable Cards

Use data-selectable with hidden radio or checkbox inputs for selection UI:

<label class="omni-card" data-selectable>
  <input type="radio" name="plan" value="basic" hidden>
  <h4>Basic Plan</h4>
  <p>$9/month</p>
</label>

<label class="omni-card" data-selectable>
  <input type="radio" name="plan" value="pro" hidden>
  <h4>Pro Plan</h4>
  <p>$29/month</p>
</label>

Horizontal Layout

Use data-layout="horizontal" for side-by-side content (responsive):

Horizontal Card

Content flows horizontally on larger screens and stacks on mobile.

Action

<div class="omni-card" data-layout="horizontal">
  <img src="image.jpg" alt="Description">
  <div>
    <h4>Horizontal Card</h4>
    <p>Side-by-side content.</p>
  </div>
</div>

API Reference

Component Classes

Accessibility

• First and last child margins are automatically removed for consistent spacing
• Clickable cards (using <a> or <button>) include keyboard focus indicators
• Selectable cards support full keyboard navigation via native radio/checkbox inputs
• Selected cards have clear visual indication with border and shadow
• Disabled selectable cards reduce opacity and prevent interaction
• Focus rings use semantic colors that match the variant
• All animations respect prefers-reduced-motion preference
• Horizontal layout automatically stacks on mobile for better readability
• Image cards ensure proper aspect ratios with object-fit: cover

Best Practices

• Use semantic heading levels inside cards to maintain document outline
• For clickable cards, ensure the entire card area is clickable (use <a> or <button> as the card element)
• Add aria-label to button cards if the visible text isn't descriptive enough
• Use selectable cards for mutually exclusive options (radio) or multiple selections (checkbox)
• Always include hidden attribute on inputs inside selectable cards
• Use data-hover sparingly to indicate truly interactive cards
• Combine variants thoughtfully - not all combinations are visually harmonious
• Consider elevation when layering cards - use data-elevation="none" for nested cards

Components Used

Other OmniUI components demonstrated on this page:

Related