UI CookBook | Cards

Card

Cards are containers of a single subject. These are mainly seen in social media posts & shopping site items. They contain some content and actions related to a subject.

All these cards have shadow effect.

Card with text only

These cards come with a header & a subheading followed by the text you want to display on the card. You can also customize the card by including only the description without the header.

Lorem ipsum

by Aishwarya B

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    
<div class="card children-stacked text-only">
    <div class="d-flex card-top">
        <div class="card-header children-stacked">
            <div class="card-title">Lorem ipsum </div>
            <div class="card-author">by Aishwarya B</div>
        </div>

    </div>
    <div class="card-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
</div>

Basic card - vertical

This is a basic vertical variant of card which also includes image and action buttons along with text capabilities. These buttons provide interaction to users to perform different actions.

Lorem ipsum

by Aishwarya B

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    
<div class="card children-stacked">
    <img class="card-media" src="https://picsum.photos/id/152/367/267" alt="card-img">
    <div class="card-header">
        <div class="card-title">Lorem ipsum </div>
        <div class="card-author">by Aishwarya B</div>
    </div>
    <div class="card-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.

    </div>
    <div class="card-action children-center">
        <button class="btn btn-link">READ</button>
        <button class="btn btn-link">BOOKMARK</button>
        <button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
    </div>
</div>

Card - horizontal

This variant contains the same pieces but arranged horizontally.

Lorem ipsum

by Aishwarya B


    <div class="card card-hor">
        <div class="card-top d-flex">
            <img class="card-media" src="https://picsum.photos/id/152/367/267" alt="">
            <div class="card-header">
                <div class="card-title">Lorem ipsum </div>
                <div class="card-author">by Aishwarya B</div>
            </div>
        </div>

        <div class="card-action children-center">
            <button class="btn btn-link">READ</button>
            <button class="btn btn-link">BOOKMARK</button>
            <button class="fa fa-share-alt btn btn-icon" aria-hidden="true"></button>
        </div>
    </div>

Card with a badge

This variant has a badge on the vertical card to show new/out of stock type of items.

NEW

Lorem ipsum

by Aishwarya B

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    
<div class="card children-stacked">
    <div class="card-media">
        <img src="https://picsum.photos/id/152/367/267" alt="card-img">
        <div class="card-badge">NEW</div>
    </div>

    <div class="card-header">
        <div class="card-title">Lorem ipsum </div>
        <div class="card-author">by Aishwarya B</div>
    </div>
    <div class="card-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.

    </div>
    <div class="card-action children-center">
        <button class="btn btn-link">READ</button>
        <button class="btn btn-link">BOOKMARK</button>
        <button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
    </div>
</div>

Card with a dismiss

This is a avertical card with dismiss option.

Lorem ipsum

by Aishwarya B

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    
<div class="card children-stacked card-dismiss">
    <div class="d-flex card-top">
        <img class="card-media" src="https://picsum.photos/id/152/367/267" alt="">
        <div class="card-head d-flex">
            <div class="card-header children-stacked">
                <div class="card-title">Lorem ipsum </div>
                <div class="card-author">by Aishwarya B</div>
            </div>
            <i class="fas fa-times btn-icon"></i>
        </div>
    </div>

    <div class="card-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="card-action children-center">
        <button class="btn btn-link">READ</button>
        <button class="btn btn-link">BOOKMARK</button>
        <button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
    </div>
</div>

Card with a text overlay

This variant has text over media, where you can place the title & subtitle over the image.

Lorem ipsum

by Aishwarya B

Lorem ipsum dolor sit amet consectetur adipisicing elit.

                    
<div class="card children-stacked card-overlay">
    <div class="p-rel">
        <img class="card-media" src="https://picsum.photos/id/152/367/267" alt="card-img">
        <div class="card-header">
            <div class="card-title">Lorem ipsum </div>
            <div class="card-author">by Aishwarya B</div>
        </div>
    </div>
    <div class="card-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </div>
    <div class="card-action children-center">
        <button class="btn btn-link">READ</button>
        <button class="btn btn-link">BOOKMARK</button>
        <button class="fa fa-share-alt btn btn-link" aria-hidden="true"></button>
    </div>
</div>