Cards

Extended card components for displaying content within your application
Basic Card
Basic Card Example
This is an example of a basic card.
.card
    .card-header Basic Card Example
    .card-body This is an example of a basic card.
The example above is a basic card with a card header and a card body. You can extend the card using any of the features included with Bootstrap. You can use utility classes to extend the look and feel of cards as well.

Note: The card styling in SB Admin Pro looks best with a light background color due to the background color of the card header, card body, and box shadow.

Advanced Cards
Card with Dropdown in Header:
Header Dropdown
Action Another action Something else here

This is an example of a custom card with a dropdown action inside of the card header. The card's overflow is set to hidden, so your card body height should exceed the height of your dropdown menu.

.card.card-header-actions
    .card-header
        | Header Dropdown
        .dropdown.no-caret
            button#dropdownMenuButton.btn.btn-transparent-dark.btn-icon.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                i.text-primary(data-feather='more-vertical')
            .dropdown-menu.dropdown-menu-right.animated--fade-in-up(aria-labelledby='dropdownMenuButton')
                a.dropdown-item(href='javascript:void(0);') Action
                a.dropdown-item(href='javascript:void(0);') Another action
                a.dropdown-item(href='javascript:void(0);') Something else here

    .card-body
        | ...
Append the .card-header-actions class to your .card when using two elements within the card header. This class will apply flex styling to the card header, allowing for even spacing between the text and another element.
Card with Icons in Header:
Header Icons

This is an example of a custom card with a group of icons inside of the card header.

.card.card-header-actions
    .card-header
        | Header Icons
        div
            button.btn.btn-pink.btn-icon.mr-2
                i(data-feather='heart')
            button.btn.btn-teal.btn-icon.mr-2
                i(data-feather='bookmark')
            button.btn.btn-blue.btn-icon
                i(data-feather='share')

    .card-body
        ...
Use of Feather icons or Font Awesome icons are supported when using the above component. This CSS component also uses the .card-header-actions class.
Card with a Button in Header:
Header Button

This is an example of a custom card with a button inside of the card header.

.card.card-header-actions
    .card-header
        | Header Button
        button.btn.btn-primary.btn-sm Action

    .card-body
        | ...
The button inside of the card header in the above component example uses the .btn-sm styling. The .btn-xs styling is also supported, but larger buttons may change the internal height of the card header.
Card with an Input in Header:
Header Input

This is an example of a custom card with a form input inside of the card header.

.card.card-header-actions
    .card-header
        | Header Input
        form
            input.form-control(placeholder='Search')

    .card-body
        ...
The input header option uses a customized form input. This option also requires the .card-header-actions class in order to position the card header elements correctly.
Extending Advanced Cards

The .card-header-actions class allows you to extend the content of the hard header significantly. The above examples are just a few of many ways you can add more actionable items to your card headers.

Collapsable Card
Collapsable Card Example

This is a collapsable card example using Bootstrap's built in collapse functionality with some added custom styling. Click on the card header to see the card body collapse and expand! 

.card.card-collapsable
    a.card-header(href='#collapseCardExample', data-toggle='collapse', role='button', aria-expanded='true', aria-controls='collapseCardExample')
        | Collapsable Card Example
        .card-collapsable-arrow
            i.fas.fa-chevron-down
    #collapseCardExample.collapse.show
        .card-body
            | ...
The collapsable card component uses Bootstrap's built-in collapse functionality. To learn more about using collapse, visit the collapse section of the Bootstrap Docs .
Scrollable Card
Scrollable Card Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Place cursor over card body and scroll!
.card.card-scrollable
    .card-header Scrollable Card Example
    .card-body
        p.card-text
            ...
    .card-footer.small.text-muted Card Footer
The custom scrollable card allows you to set a maximum height to the .card-body element, and scroll the contents of the card body when the height is fixed. You can set the max height of the card body by changing the $card-scrollable-max-height SCSS variable, which is set to 15rem by default. You can also set the max height of the card body using inline CSS, or CSS overrides for different cards.
Image Cards
Card Image Caps:
...
Card Image Cap (Top)

This is am example of a default Bootstrap image card with an image above the card body content.

Card Image Cap (Bottom)

This is am example of a default Bootstrap image card with an image below the card body content.

... 
//- Card Image Cap (Top) Example
.card
    img.card-img-top(src='path/to/image', alt='...')
    .card-body
        h5.card-title Card Image Cap (Top)
        p.card-text
            | ...

//- Card Image Cap (Bottom) Example
.card
    .card-body
        h5.card-title Card Image Cap (Bottom)
        p.card-text
            | ...
    img.card-img-bottom(src='path/to/image', alt='...')
Card image caps are included with Bootstrap by default. When adding your image, make sure to correctly point to the path of the image being used.
Card Image Overlay:
...
Card Image (Overlay)

This card variant uses a background image as the card image with a text overlay. You can use text utility classes to style the text color.

//- Card Image Overlay Example
.card
    img.card-img(src='path/to/image', alt='...')
    .card-img-overlay
        h5.card-title Card Image (Overlay)
        p.card-text
            | ...
When using an image overlay card, you can use text utilities to style the content within the card, or custom CSS. In the above example, text color is set to dark to account for a lighter background image.
Card Image Sides:
...
Card Image (Left)

Use the Bootstrap grid with utility classes to create this card variant.

Card Image (Right)

Use the Bootstrap grid with utility classes to create this card variant.

...
//- Card Image (Left)
.card
    .row.no-gutters
        .col-md-4
            img.img-fluid(src='path/to/image', alt='...')
        .col-md-8
            .card-body
                h5.card-title Card Image (Left)
                p.card-text
                    | ...

//- Card Image (Right)
.card
    .row.no-gutters
        .col-md-8
            .card-body
                h5.card-title Card Image (Right)
                p.card-text
                    | ...
        .col-md-4
            img.img-fluid(src='path/to/image', alt='...')
The Bootstrap grid is utilized to create the above card variants. The above examples show card images on either side of the card body.
Styled Cards
Waves:
Waves Styled Card
This is an example of a card with the waves styling applied. Use .card-waves to set the background image to the waved styling. This works best with default white cards, and with cards that do not have a card footer. 
//- Waves Styled Card
.card.card-waves
    .card-header Waves Card Example
    .card-body ...
Styled cards are a unique feature to SB Admin Pro. Our first styled variation is our waves variation, which uses an SVG as as background image attached to the parent card component. This component is best used with cards with larger content
Icon Card
Custom Icon Card

The icon card is an extension of the Bootstrap card component that uses Bootstrap layout classes in unison with custom styling to create a new card layout that you can use to add emphasis to certain content.

//- Icon Card Example
.card.card-icon
    .row.no-gutters
        .col-auto.card-icon-aside.bg-primary
            i.mr-1.text-white-50(data-feather='layers')
        .col
            .card-body.py-5
                h5.card-title Custom Icon Card
                p.card-text
                    | ...
Feather Icons, Font Awesome icons, or a custom SVG can be used for the icon. Use background utility classes to set the background color of the icon aside container.
Card Colors
Default Card Colors:
Primary Card

Here is some example text within the card body.

Card Footer
Secondary Card

Here is some example text within the card body.

Card Footer
Success Card

Here is some example text within the card body.

Card Footer
Danger Card

Here is some example text within the card body.

Card Footer
Warning Card

Here is some example text within the card body.

Card Footer
Light Card

Here is some example text within the card body.

Card Footer
Dark Card

Here is some example text within the card body.

Card Footer
//- Primary Card
.card.bg-primary.text-white
    .card-header.text-white Primary Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Secondary Card
.card.bg-secondary.text-white
    .card-header.text-white Secondary Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Success Card
.card.bg-success.text-white
    .card-header.text-white Success Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Danger Card
.card.bg-danger.text-white
    .card-header.text-white Danger Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Warning Card
.card.bg-warning.text-white
    .card-header.text-white Warning Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Light Card
.card.bg-light
    .card-header.text-dark Light Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Dark Card
.card.bg-dark.text-white
    .card-header.text-white Dark Card
    .card-body
        p.card-text ...
    .card-footer Card Footer
The cards above use a .bg-* background utility class, along with a text color utility class when necessary. All of the above examples, except for the light background colored card, use the .text-white utility along with a background utility.
Extended Card Colors:
Red Card

Here is some example text within the card body.

Card Footer
Orange Card

Here is some example text within the card body.

Card Footer
Yellow Card

Here is some example text within the card body.

Card Footer
Green Card

Here is some example text within the card body.

Card Footer
Teal Card

Here is some example text within the card body.

Card Footer
Cyan Card

Here is some example text within the card body.

Card Footer
Blue Card

Here is some example text within the card body.

Card Footer
Indigo Card

Here is some example text within the card body.

Card Footer
Purple Card

Here is some example text within the card body.

Card Footer
Pink Card

Here is some example text within the card body.

Card Footer
//- Red Card
.card.bg-red.text-white
    .card-header.text-white Red Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Orange Card
.card.bg-orange.text-white
    .card-header.text-white Orange Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Yellow Card
.card.bg-yellow.text-white
    .card-header.text-white Yellow Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Green Card
.card.bg-green.text-white
    .card-header.text-white Green Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Teal Card
.card.bg-teal.text-white
    .card-header.text-white Teal Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Cyan Card
.card.bg-cyan.text-white
    .card-header.text-white Cyan Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Blue Card
.card.bg-blue.text-white
    .card-header.text-white Blue Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Indigo Card
.card.bg-indigo.text-white
    .card-header.text-white Indigo Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Purple Card
.card.bg-purple.text-white
    .card-header.text-white Purple Card
    .card-body
        p.card-text ...
    .card-footer Card Footer

//- Pink Card
.card.bg-pink.text-white
    .card-header.text-white Pink Card
    .card-body
        p.card-text ...
    .card-footer Card Footer
You can also use the non-contextual extended color system to add color to your cards. When a card should be a certain color, and does not need to have contextual coloring or state-specific styling, use the below utilities to style your cards.
Bootstrap Documentation Available

Cards are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of cards within your project, visit the official Bootstrap card documentation page.

Visit Bootstrap Card Docs