Cards

Flexible card components for displaying content and actions.

Basic Card

Card Title

This is a basic card with some sample text content.

<div class="ethio-card">
    <div class="ethio-card-header">
      <h4>Card Title</h4>
    </div>
    <div class="ethio-card-body">
      <p>Card content goes here.</p>
    </div>
  </div>

Card Variants

Primary Card

Card with primary accent border.

Secondary Card

Card with secondary accent border.

Elevated Card

Card with enhanced shadow effect.

<div class="ethio-card ethio-card-primary">
    <!-- Primary variant -->
  </div>
  
  <div class="ethio-card ethio-card-secondary">
    <!-- Secondary variant -->
  </div>
  
  <div class="ethio-card ethio-card-elevated">
    <!-- Elevated variant -->
  </div>

Card with Footer

Product Card

Amazing product description goes here with all the features.

<div class="ethio-card">
    <div class="ethio-card-header">
      <h4>Product Card</h4>
    </div>
    <div class="ethio-card-body">
      <p>Product description.</p>
    </div>
    <div class="ethio-card-footer">
      <button class="ethio-btn ethio-btn-primary">Buy Now</button>
    </div>
  </div>