Cards

Flexible content containers with headers, bodies, footers, and image support for displaying grouped information.

Card Components

Content containers with consistent styling and shadow effects

Basic Card

This is a simple card with shadow.

Card with Header

Card with header and footer sections.

Card

Card with Image

Card with image at the top.

<!-- Basic Card -->
<div class="antsand-card antsand-card-shadow">
    <h3 class="antsand-card-title">Basic Card</h3>
    <p class="antsand-card-text">This is a simple card with shadow.</p>
    <button class="antsand-btn antsand-btn-primary">Action</button>
</div>

<!-- Card with Header/Footer -->
<div class="antsand-card antsand-card-shadow">
    <div class="antsand-card-header">
        <h4>Card with Header</h4>
    </div>
    <div class="antsand-card-body">
        <p class="antsand-card-text">Card content here.</p>
    </div>
    <div class="antsand-card-footer">
        <button class="antsand-btn antsand-btn-secondary">Action</button>
    </div>
</div>

<!-- Card with Image -->
<div class="antsand-card antsand-card-shadow">
    <img src="image.jpg" class="antsand-card-img" alt="Card">
    <div class="antsand-card-body">
        <h3 class="antsand-card-title">Card with Image</h3>
        <p class="antsand-card-text">Card description.</p>
    </div>
</div>

Card Grid Layout

Cards work great in grid layouts

<div class="antsand-grid antsand-grid-3 antsand-gap-4">
    <div class="antsand-card antsand-card-shadow">...</div>
    <div class="antsand-card antsand-card-shadow">...</div>
    <div class="antsand-card antsand-card-shadow">...</div>
</div>

Available Classes