HPUCSS Framework

Default Card Style

Default styles of a card with pre-applied spacing, dimension, borders, and shadows.

The Very Plain Card

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi earum maiores adipisci repellat nulla voluptas esse fugit autem quod maxime dolore, accusantium modi, temporibus at recusandae est animi, voluptatum odit eius id eum aspernatur veniam.

Card with Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. A nobis perferendis optio. Eum totam earum laborum velit illum, in provident autem facere alias a facilis consequuntur amet rem, nesciunt aperiam.

Card with Header and Footer

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe magni sapiente neque placeat impedit necessitatibus possimus itaque ratione dolores. Aliquid.

The Card Footer

HTML


<div class="hpu-row">
    <div class="col-lg-4">
        <div class="hpu-card">
            <div class="card-body">
                <h3 class="hpu-mb-3">
                    The Very Plain Card
                </h3>

                <p>...</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card">
            <div class="card-header">
                <h3>
                    Card with Header
                </h3>
            </div>

            <div class="card-body">
                <p>...</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card">
            <div class="card-header">
                <h3>
                    Card with Header and Footer
                </h3>
            </div>

            <div class="card-body">
                <p>...</p>
            </div>

            <div class="card-footer">
                <p class="hpu-font-bold">
                    The Card Footer
                </p>
            </div>
        </div>
    </div>
</div>

Colored Cards

Colored cards with HPU primary and secondary colors are also available to use: .hpu-card .card-bg-{color}. Please refer to HPU Colors for usage.

Primary Colors:

Teal

Light Teal

Black

White (Default)

Secondary Colors:

Blue Gray

Ocean Blue

Dark Blue

Warm Sun

Leaf Green

Sunset

Dark Gray

Gray

Success

Warning

HTML


<!-- Primary Colors: -->
<div class="hpu-card card-bg-1st">...</div> <!-- Teal -->
<div class="hpu-card card-bg-1st">...</div> <!-- Light Teal -->
<div class="hpu-card card-bg-black">...</div> <!-- Black -->
<div class="hpu-card">...</div> <!-- White (Default) -->

<!-- Secondary Colors: -->
<div class="hpu-card card-bg-3rd">...</div> <!-- Blue Gray -->
<div class="hpu-card card-bg-4th">...</div> <!-- Ocean Blue -->
<div class="hpu-card card-bg-5th">...</div> <!-- Dark Blue -->
<div class="hpu-card card-bg-6th">...</div> <!-- Warm Sun -->
<div class="hpu-card card-bg-7th">...</div> <!-- Leaf Green -->
<div class="hpu-card card-bg-8th">...</div> <!-- Sunset -->
<div class="hpu-card card-bg-dark-gray">...</div> <!-- Dark Gray -->
<div class="hpu-card card-bg-gray">...</div> <!-- Gray -->
<div class="hpu-card card-bg-success">...</div> <!-- Success -->
<div class="hpu-card card-bg-warning">...</div> <!-- Warning -->

Cards with images

Card images can be positioned on top, middle, or bottom: .card-img.

Top Image Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis maiores consequatur optio consectetur amet at.

Middle Image Teal Card

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, quisquam?

Bottom Image Warm Sun Card

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam et quasi, unde numquam laboriosam omnis?

HTML


<div class="hpu-row">
    <div class="col-lg-4">
        <div class="hpu-card">
            <img src="..." class="card-img">

            <div class="card-body">
                <h3>Top Image Card</h3>

                <p>...</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card card-bg-1st">
            <div class="card-body">
                <h3>Top Image Card</h3>
            </div>

            <img src="..." class="card-img">

            <div class="card-body">
                <p>...</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card card-bg-6th">
            <div class="card-body">
                <h3>Bottom Image Warm Sun Card</h3>

                <p>...</p>
            </div>

            <img src="..." class="card-img">
        </div>
    </div>
</div>

Horizontal Cards

Cards arranged side by side along a single row. To achieve horizontal card orientation, use the grid system classes. Please refer to HPU Grid System for usage.

Card Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem adipisci dolor molestiae suscipit iste excepturi?

Horizontal Card with No Header and Footer and Right Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda temporibus corrupti, neque praesentium architecto alias.

HTML


<div class="hpu-card hpu-mb-3">
    <div class="card-horizontal hpu-row">
        <div class="col-lg-6">
            <img src="..." class="card-img">
        </div>

        <div class="col-lg-6">
            <div class="card-header">
                <h3>
                    Card Header
                </h3>
            </div>

            <div class="card-body">
                <p>
                    ...
                </p>
            </div>

            <div class="card-footer">
                <button class="hpu-btn btn-sm btn-bg-1st">
                    Small Card Footer Button
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hpu-card">
    <div class="card-horizontal hpu-row">
        <div class="col-lg-6">
            <div class="card-body">
                <h3 class="hpu-mb-3">
                    Horizontal Card with No Header and Footer and Right Image
                </h3>

                <p>
                    ...
                </p>
            </div>
        </div>

        <div class="col-lg-6">
            <img src="..." class="card-img">
        </div>
    </div>
</div>

Same Height Cards

Ensures a visually appealing and consistent presentation, where all cards align neatly, creating a cohesive and polished look across the interface. To achieve same height cards, add the class .hpu-h100pc to all .hpu-cards. Please refer to Height Dimensions for usage.

Top Image Card

Here's a very little content

Middle Image Teal Card

Medium contents here. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum quis, eligendi quod, totam, mollitia explicabo rem consequatur vero ipsum voluptates deserunt tempora saepe voluptatum molestias?

Bottom Image Warm Sun Card

Card with a very long content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error facilis perferendis amet minus magnam porro. Earum suscipit sequi molestiae modi nobis, saepe maiores, excepturi corporis quas, corrupti architecto sit quam tempore facilis? Pariatur incidunt deserunt, quibusdam, suscipit magni cum, velit in praesentium excepturi doloremque ducimus delectus aut. Quaerat, repudiandae provident.

HTML


<div class="hpu-row">
    <div class="col-lg-4">
        <div class="hpu-card hpu-h100pc">
            <img src="..." class="card-img">

            <div class="card-body">
                <h3>Top Image Card</h3>

                <p>Here's a very little content</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card hpu-h100pc card-bg-1st">
            <div class="card-body">
                <h3>Middle Image Teal Card</h3>
            </div>

            <img src="..." class="card-img">

            <div class="card-body">
                <p>Medium contents here ...</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card hpu-h100pc card-bg-6th">
            <div class="card-body">
                <h3>Bottom Image Warm Sun Card</h3>

                <p>Card with a very long content...</p>
            </div>

            <img src="..." class="card-img">
        </div>
    </div>
</div>

Card Groups

Card Groups are a set of adjacent cards that appear seamlessly connected with no spacing in between each card. This is achieve through the help of the grid system. Please refer to HPUCSS Grid System for usage info.

NOTE: In the example below, .no-gap-lg is used to add padding on mobile devices and when the cards stack.

First Card

Here's a very little content

Second Card

Medium contents here. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum quis, eligendi quod, totam, mollitia explicabo rem consequatur vero ipsum voluptates deserunt tempora saepe voluptatum molestias?

The Last Card

Card with a very long content. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error facilis perferendis amet minus magnam porro. Earum suscipit sequi molestiae modi nobis, saepe maiores, excepturi corporis quas, corrupti architecto sit quam tempore facilis? Pariatur incidunt deserunt, quibusdam, suscipit magni cum, velit in praesentium excepturi doloremque ducimus delectus aut. Quaerat, repudiandae provident.

HTML


<div class="hpu-row no-gap-lg">
    <div class="col-lg-4">
        <div class="hpu-card hpu-h100pc">
            <img src="..." class="card-img">

            <div class="card-body">
                <h3>Top Image Card</h3>

                <p>Here's a very little content</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card hpu-h100pc card-bg-1st">
            <img src="..." class="card-img">

            <div class="card-body">
                <h3>Middle Image Teal Card</h3>
            </div>

            <div class="card-body">
                <p>Medium contents here ...</p>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="hpu-card hpu-h100pc card-bg-6th">
            <img src="..." class="card-img">

            <div class="card-body">
                <h3>Bottom Image Warm Sun Card</h3>

                <p>Card with a very long content...</p>
            </div>
        </div>
    </div>
</div>