Style guide

Cards

This is a title This is a subtitle

This is card body. A nice sentence.

<div style="background: #282c34;" class="p-3"> 
    <div class="card"> 
        <div class="card-header"> 
            <h3 class="card-title"> This is a title 
                <small class="card-subtitle"> This is a subtitle 
                </small> 
            </h3> 
        </div> 
        <div class="card-body"> 
            <p> This is card body. A nice sentence. 
            </p> 
        </div> 
    </div> 
</div>

Alignment

Center the whole card

This is a title This is a subtitle

This is card body. A nice sentence.

Center the whole .card-header

This is a title This is a subtitle

This is card body. A nice sentence.

Center the whole .card-body

This is a title This is a subtitle

This is card body. A nice sentence.

<div class="card card-center"> 
    <div class="card-header">...
    </div> 
    <div class="card-body">...
    </div> 
</div> 
<div class="card"> 
    <div class="card-header card-center">...
    </div> 
    <div class="card-body">...
    </div> 
</div> 
<div class="card"> 
    <div class="card-header">...
    </div> 
    <div class="card-body card-center">...
    </div> 
</div>

Attaching cards

Attach card to the top element

This is a title This is a subtitle

This is card body. A nice sentence.

Attach card to the bottom element

This is a title This is a subtitle

This is card body. A nice sentence.

Attach card to top and bottom element/ Disable border radius

This is a title This is a subtitle

This is card body. A nice sentence.

<div class="card card-attach-top"> 
    <div class="card-header">...
    </div> 
    <div class="card-body">...
    </div> 
</div> 
<div class="card card-attach-bottom"> 
    <div class="card-header">...
    </div> 
    <div class="card-body">...
    </div> 
</div> 
<div class="card card-attach"> 
    <div class="card-header">...
    </div> 
    <div class="card-body">...
    </div> 
</div>

Position

This is a title This is a subtitle

This is card body. A nice sentence.

<div class="card card-row"> 
    <div class="card-header">...
    </div> 
    <div class="card-body">...
    </div> 
</div>

Image

This is a nice title This is a subtitle

Browse current offers

<div style="background-image: url('/path/to/image')" class="card">
</div>

Colour

This is a title This is a subtitle

This is card body. A nice sentence.

<div class="card bg-ei-autumn">...
</div> 
<div class="card bg-black">...
</div> 
<div class="card bg-ei-brand">...
</div> 
<div class="card bg-ei-fog">...
</div> 
<div class="card bg-green">...
</div> 
<div class="card bg-ei-khaki">...
</div> 
<div class="card bg-ei-lemongrass">...
</div> 
<div class="card bg-ei-light-brand">...
</div> 
<div class="card bg-ei-light-grey">...
</div> 
<div class="card bg-ei-light-taupe">...
</div> 
<div class="card bg-ei-mauve">...
</div> 
<div class="card bg-pink">...
</div> 
<div class="card bg-ei-sand">...
</div> 
<div class="card bg-ei-taupe">...
</div> 
<div class="card bg-teal">...
</div> 
<div class="card bg-ei-terracotta">...
</div> 
<div class="card bg-yellow">...
</div> 
<div class="card bg-primary">...
</div> 
<div class="card bg-secondary">...
</div> 
<div class="card bg-danger">...
</div> 
<div class="card bg-warning">...
</div> 
<div class="card bg-success">...
</div> 
<div class="card bg-light">...
</div> 
<div class="card bg-blue">...
</div> 
<div class="card bg-indigo">...
</div> 
<div class="card bg-purple">...
</div> 
<div class="card bg-red">...
</div> 
<div class="card bg-orange">...
</div> 
<div class="card bg-cyan">...
</div> 
<div class="card bg-white">...
</div> 
<div class="card bg-gray-100">...
</div> 
<div class="card bg-gray-200">...
</div> 
<div class="card bg-gray-300">...
</div> 
<div class="card bg-gray-400">...
</div> 
<div class="card bg-gray-500">...
</div> 
<div class="card bg-gray-600">...
</div> 
<div class="card bg-gray-700">...
</div> 
<div class="card bg-gray-800">...
</div> 
<div class="card bg-gray-900">...
</div>

Card with no padding

This is a nice title This is a subtitle

Browse current offers

<div class="card card-p-0">
</div>

Card stretch

The parent class must be display flex or .row.
You should add .align-items-stretch to the parent class

This is a nice title This is a subtitle

This is a nice sentence.

This is a nice title This is a subtitle

This is a nice sentence.

This is another nice sentence.

<div class="d-flex align-items-stretch"> // Using .d-flex 
    <div class="card card-stretch">
    </div> 
    <div class="card card-stretch">
    </div> 
</div> 
<div class="row align-items-stretch"> // Or using .row and .col 
    <div class="col"> 
        <div class="card card-stretch">
        </div> 
    </div> 
    <div class="col"> 
        <div class="card card-stretch">
        </div> 
    </div> 
</div>

Card spacing

Normal .card padding: 6rem 4rem

This is a nice title This is a subtitle

This is a nice sentence.

Small .card-spacing-sm padding: 4rem

This is a nice title This is a subtitle

This is a nice sentence.

Large .card-spacing-lg padding: 10rem 4rem 6rem 4rem

This is a nice title This is a subtitle

This is a nice sentence.

<div class="card card-stretch">
</div> 
<div class="card card-spacing-sm card-stretch">
</div> 
<div class="card card-spacing-lg card-stretch">
</div>

Card with sticky header

Goes best with .card-row

This is a nice title This is a subtitle

This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.
This is a nice sentence.

<div class="card card-row card-sticky">
</div>