Cards - Vanilla CSS Design System

Basic Card

A simple card with basic content using the .card class.

Card Title

This is a basic card with some sample content.

<div class="card">
    <h3>Card Title</h3>
    <p>This is a basic card with some sample content.</p>
</div>

Card with Image

A card that includes an image, title, text, and a button.

Card with Image

This card includes an image at the top, followed by content and a button.

<div class="card">
    <img src="image.jpg" alt="Sample image" class="card-image">
    <div class="p-3">
        <h3 class="card-title">Card with Image</h3>
        <p class="card-text">This card includes an image at the top...</p>
        <button class="btn btn-primary">Learn More</button>
    </div>
</div>

Card Grid Layout

Multiple cards arranged in a responsive grid layout.

Card 1

Content for card 1

Card 2

Content for card 2

Card 3

Content for card 3

<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-3">
    <div class="card">
        <h3 class="card-title">Card 1</h3>
        <p class="card-text">Content for card 1</p>
    </div>
    <div class="card">
        <h3 class="card-title">Card 2</h3>
        <p class="card-text">Content for card 2</p>
    </div>
    <div class="card">
        <h3 class="card-title">Card 3</h3>
        <p class="card-text">Content for card 3</p>
    </div>
</div>

Card with Footer

A card with a separated footer section.

Card with Footer

This is the main content of the card.

Posted by John Doe

<div class="card">
    <div class="p-3">
        <h3 class="card-title">Card with Footer</h3>
        <p class="card-text">This is the main content of the card.</p>
    </div>
    <div class="card-footer">
        <div class="d-flex justify-between items-center">
            <span>Posted by John Doe</span>
            <button class="btn btn-primary">Share</button>
        </div>
    </div>
</div>