Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Basic example

Cards are built with as little markup and styles as possible, but still manage to deliver control and customization.

Cards consist of the following blocks, which can be moved around interchangeably within a card:

  1. .card-header
  2. .card-media
  3. .card-block
  4. .card-footer

Below is an example of a basic card with some text content.

This Is MAGA Country

Make America Great Again

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

<div class="card">
    <div class="card-block">
        <h4 class="card-title">This Is MAGA Country</h4>
        <span class="card-subtitle">Make America Great Again</span>
        <p>...</p>
    </div>
</div>

Media

To render media inside a card, wrap an image in a .card-media block. Media can be placed at the at the top, bottom or center of a card:

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

The Don
Make America Great Again
The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

<div class="flex-row col-gaps-xs">
    <div class="card col col-lg-4">
        <div class="card-media">
            <img ... />
        </div>    
        <div class="card-block">
            ...
        </div>
        <div class="card-footer">
            ...
        </div>
    </div>
    <div class="card col col-lg-4">
        <div class="card-header">
            ...
        </div>
        <div class="card-media">
            <img ... />
        </div>
        <div class="card-block">
            ...
        </div>
    </div>
    <div class="card col col-lg-4">
        <div class="card-header">
            ...
        </div>
        <div class="card-block">
            ...
        </div>
        <div class="card-media">
            <img ... />
        </div> 
    </div>
</div>

Background images

You can also make use of Frontbx's .bg-image inside a .card-media block if you need a fixed height image at a specific aspect ratio:

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

<div class="card">
    <div class="card-header">
        ...
    </div>
    <div class="card-media">
        <div class="bg-image" style="background-image: url(...)"></div>
    </div>
    <div class="card-block">
        ...
    </div>
</div>

Landscape

Landscape cards have their media to left or right of their content. You'll need to add .card-landscape modifier to the card.

If using card-header or .card-footer, you'll need to your card content in a <div>:

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

<div class="card card-landscape">
    <div class="card-block">
        <h4 class="card-title">...</h4>
        <span class="card-subtitle">...</span>
        <p>...</p>
    </div>
    <div class="card-media">
        <img class="img-responsive" src="..." />
    </div>
</div>

<div class="card card-landscape">
    <div class="card-media">
        <img class="img-responsive" src="..." />
    </div>
    <div>
        <div class="card-header">
            ...
        </div>
        <div class="card-block">
            ...
        </div>
    </div>
</div>

Add the .responsive modifier class to .card.card-landscape to make it stack like a regular card on screens below md breakpoint.

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

Add an optional header within a card by using .card-header, remember to wrap any content in .card-header-content

Proident minim veniam in adipisicing in adipisicing sint quis in commodo labore labore ea velit officia dolor incididunt nisi consequat ut in tempor id.

<div class="card">
    <div class="card-header">
        <div class="card-header-content">
            ...
        </div>
    </div>
    <div class="card-block">
        <p>...</p>
    </div>
</div>

.card-header has two additional child elements for aligning items inside it .card-header-left and .card-header-right:

The Don
Make America Great Again

Proident minim veniam in adipisicing in adipisicing sint quis in commodo labore labore ea velit officia dolor incididunt nisi consequat ut in tempor id.

<div class="card">
    <div class="card-header">
        <div class="card-header-left">
            ...
        </div>
        <div class="card-header-content">
            ...
        </div>
        <div class="card-header-right">
            ...
        </div>
    </div>
    <div class="card-block">
        ...
    </div>
</div>

Add an optional footer within a card by using .card-footer, remember to wrap any content in .card-footer-content:

Proident minim veniam in adipisicing in adipisicing sint quis in commodo labore labore ea velit officia dolor incididunt nisi consequat ut in tempor id.

<div class="card">
    <div class="card-media">
        <img class="img-responsive" src="..." />
    </div>
    <div class="card-block">
        <p>...</p>
    </div>
    <div class="card-footer">
        <div class="card-footer-content">
            <button class="btn btn-pure btn-primary">Action 1</button>
            <button class="btn btn-pure btn-primary">Action 2</button>
        </div>
    </div>
</div>

.card-footer has two additional child elements for aligning items inside it .card-footer-left and .card-footer-right:

The Don
Make America Great Again

Proident minim veniam in adipisicing in adipisicing sint quis in commodo labore labore ea velit officia dolor incididunt nisi consequat ut in tempor id.

<div class="card">
    <div class="card-header">
        ...
    </div>
    <div class="card-block">
        ...
    </div>
     <div class="card-footer">
        <div class="card-footer-left">...</div>
        <div class="card-footer-content">...</div>
        <div class="card-footer-right">...</div>
    </div>
</div>

Divider

Dividers can be used to separate regions in cards or to indicate areas of a card that can expand. Dividers wrapped in .card-block should be used to separate content.

The Don
Make America Great Again

Voluptate nisi in dolor occaecat dolor esse dolore est aliquip nulla et labore nostrud occaecat.

Duis officia magna est culpa sint culpa enim sunt ex dolore est aliquip sunt velit exercitation fugiat.

<div class="card">
    <div class="card-header">
        <div class="card-header-content">
            <h5 class="card-title">...</h5>
            <div class="card-subtitle">...</div>
        </div>
    </div>
    <div class="card-block">
        <p>...</p>
        <div class="card-divider"></div>
        <p>...</p>
    </div>
</div>

Dividers outside of .card-block should indicate areas of a card that can expand:

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

<div class="card">
    <div class="card-header">
        ...
    </div>
    <div class="card-block">
        <p>...</p>
        <p>...</p>
    </div>
    <div class="card-divider"></div>
    <div class="card-footer">
        ...
    </div>
</div>

Tables

To add tables to simply add the table markup without a .card-block so it spans the full width of the card.

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

# First Name Last Name Username
1 John Foobar @fbar
2 Joe Thornton @fat
3 James the Bird @twitter 
<div class="card">
    <div class="card-header">
        ...
    </div>
    <div class="card-block">
        ...
    </div>
    <table class="table">
    ...
    </table>
    <div class="card-footer">
        ...
    </div>
</div>

Scrollable

There are two different ways to scroll content on a card. Use .card-scrollable to make the entire card scrollable, or .card-scrollable-content to to make the card's content scrollable while the footer and header are in fixed piositons:

The Don
Make America Great Again

This Is MAGA Country

Make America Great Again

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

The Don
Make America Great Again

This Is MAGA Country

Make America Great Again

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

Mollit aliquip adipisicing aliqua velit irure consequat proident sed culpa eiusmod culpa consectetur velit excepteur est amet pariatur in sunt esse ex anim exercitation mollit ea commodo.

<div class="card card-scrollable">
    <div class="card-block">
        <h4 class="card-title">This Is MAGA Country</h4>
        <span class="card-subtitle">Make America Great Again</span>
        <p>...</p>
    </div>
</div>

Primary Action

Add the .primary-action to any element inside a card or the card itself to make it clickable with a ripple effect:

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

The Don
Make America Great Again

This Is MAGA Country

Veniam laboris do sit sunt dolore incididunt fugiat id enim ut ullamco enim deserunt fugiat.

<div class="card primary-action">
    <div class="card-media">
        <img ... />
    </div>
    <div class="card-block">
        ...
    </div>
    <div class="card-footer">
        ...
    </div>
</div>
<div class="card">
    <div class="primary-action">
        <div class="card-media">
            <img ... />
        </div>
        <div class="card-block">
            ...
        </div>
    </div>
    <div class="card-footer">
        ...
    </div>
</div>

CSS Customization

Cards use a combination of both local CSS variables on .card and Sass variables for enhanced component customization and styling. The base values are used by the UI to create all the sizing. Values for the CSS variables are set via Sass, so pre-compilation customization is still supported too.

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss
$card-bg:                       var(--fbx-white) !default;
$card-bg-focus:                 var(--fbx-white) !default;
$card-color:                    var(--fbx-gray-900) !default;
$card-title-color:              var(--fbx-body-color) !default;
$card-line-height:              1.8 !default;
$card-border-radius:            var(--fbx-border-radius) !default;
$card-border-width:             0 !default;
$card-border-color:             var(--fbx-gray-300) !default;
$card-box-shadow:               var(--fbx-raised-level-two) !default;
$card-box-shadow-hover:         var(--fbx-raised-level-two) !default;
$card-spacer-y:                 1.2rem !default;
$card-spacer-x:                 1.6rem !default;
$card-divider-color:            var(--fbx-gray-300) !default;
$card-divider-size:             1px !default;
$card-divier-space:             1rem !default;
$card-actions-spacer-y:         2rem !default;
$card-actions-spacer-x:         0.5rem !default;
$card-media-padding:            0 !default;
$card-media-bg:                 var(--fbx-gray-100) !default;
$card-landscape-img-sm:         80px !default;
$card-landscape-img-md:         150px !default;
$card-landscape-img-lg:         300px !default;
scss/components/_card.scss
.card
{
    --fbx-card-bg:               #{$card-bg};
    --fbx-card-bg-focus:         #{$card-bg-focus};
    --fbx-card-color:            #{$card-color};
    --fbx-card-title-color:      #{$card-title-color};
    --fbx-card-line-height:      #{$card-line-height};
    --fbx-card-border-radius:    #{$card-border-radius};
    --fbx-card-border-width:     #{$card-border-width};
    --fbx-card-border-color:     #{$card-border-color};
    --fbx-card-box-shadow:       #{$card-box-shadow};
    --fbx-card-box-shadow-hover: #{$card-box-shadow-hover};
    --fbx-card-spacer-y:         #{$card-spacer-y};
    --fbx-card-spacer-x:         #{$card-spacer-x};
    --fbx-card-divider-color:    #{$card-divider-color};
    --fbx-card-divider-size:     #{$card-divider-size};
    --fbx-card-divier-space:     #{$card-divier-space};
    --fbx-card-actions-spacer-y: #{$card-actions-spacer-y};
    --fbx-card-actions-spacer-x: #{$card-actions-spacer-x};
    --fbx-card-media-padding:    #{$card-media-padding};
    --fbx-card-media-bg:         #{$card-media-bg};
    --fbx-card-landscape-sm:     #{$card-landscape-img-sm};
    --fbx-card-landscape-md:     #{$card-landscape-img-md};
    --fbx-card-landscape-lg:     #{$card-landscape-img-lg};
}