Cards

FOX_CSS card work in a similar way to Bootstrap cards. With multiple variant and options that act like puzzle pieces.

Example

Card with Media

You can also embed media at the top of the cards.

<div class="card" style="width: 300px;">
    <div class="card-media">
        <img src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_800/https://www.testingxperts.com/wp-content/uploads/2019/02/placeholder-img.jpg" alt="">
    </div>
    <div class="card-body">
        <h4 class="card-title">Card with Media</h4>
        <p class="card-text">
            You can also embed media at the top of the cards.
        </p>
    </div>
</div>

Content Types

Card Body

The quick brown fox jumps over the lazy dog.

<div class="card">
    <div class="card-body">
        <p class="card-text">
            The quick brown fox jumps over the lazy dog.
        </p>
    </div>
</div>

Titles

Card Title

The quick brown fox jumps over the lazy dog.

<div class="card" style="width: 300px;">
    <div class="card-body">
        <h4 class="card-title">...</h4>
        <p class="card-text">...</p>
    </div>
    <div class="card-footer">
        <!-- using this without 'card-footer-item' will cause the text to be left aligned. -->
        <div class="card-footer-item">...</div>
    </div>
</div>

Images

The quick brown fox jumps over the lazy dog.

<div class="card" style="width: 300px;">
    <div class="card-media">
        <img src="..." alt="">
    </div>
    <div class="card-body">
        <p class="card-text">
            The quick brown fox jumps over the lazy dog.
        </p>
    </div>
</div>

Headers and Footers

Header

The quick brown fox jumps over the lazy dog.

Some footer text.

<div class="card" style="width: 300px;">
    <div class="card-header">
        <p class="card-header-title">Header</p>
    </div>
    <div class="card-body">
        <p class="card-text">
            The quick brown fox jumps over the lazy dog.
        </p>
    </div>
    <div class="card-footer">
        Some footer text.
    </div>
</div>

List Groups

List Card

<div class="card" style="width: 300px;">
    <div class="card-header">
        <p class="card-header-title">List Card</p>
    </div>
    <ul class="list-group">
        <a href="index.html" class="list-group-item">
            Card
        </a>
        <ul class="list-group-item flexwrap-col">
            <a href="index.html" class="list-group-item">
                Dropdown
            </a>
            <a href="index.html" class="list-group-item">
                <span class="list-group-item-sub">drop item 1</span>
            </a>
            <a href="index.html" class="list-group-item">
                <span class="list-group-item-sub">drop item 2</span>
            </a>
        </ul>
        <a href="form.html" class="list-group-item">
            Form
        </a>
        <a href="nav.html" class="list-group-item">
            Navigation
        </a>
    </ul>
</div>