Cards

Space's cards provide a flexible and extensible content container with multiple variants and options.

About

A card is a flexible and extensible Bootstrap content container. Space has taken the advantage of Bootstrap's Cards and created more classes to make easier to control them on various circumstances.

Card frame

Use .card-frame class to add transition to the border on hover.

            
              <div class="card card-frame">
                <div class="card-body">
                  This is some text within a card body.
                </div>
              </div>
            
          

Card frame styles

Cards include various color skins.

            
              <div class="card card-frame card-primary-frame">
                <div class="card-body">
                  This is primary card skin.
                </div>
              </div>

              <div class="card card-frame card-purple-frame mb-2">
                <div class="card-body">
                  This is purple card skin.
                </div>
              </div>

              <div class="card card-frame card-danger-frame mb-2">
                <div class="card-body">
                  This is danger card skin.
                </div>
              </div>

              <div class="card card-frame card-success-frame mb-2">
                <div class="card-body">
                  This is success card skin.
                </div>
              </div>

              <div class="card card-frame card-blue-frame mb-2">
                <div class="card-body">
                  This is blue card skin.
                </div>
              </div>

              <div class="card card-frame card-warning-frame mb-2">
                <div class="card-body">
                  This is warning card skin.
                </div>
              </div>

              <div class="card card-frame card-secondary-frame mb-2">
                <div class="card-body">
                  This is secondary card skin.
                </div>
              </div>

              <div class="card card-frame card-dark-frame mb-2">
                <div class="card-body">
                  This is dark card skin.
                </div>
              </div>
            
          

Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Control any column across all viewports with responsive .card{-sm|-md|-lg|-xl}-columns. classes.

Card count

Space's card-columns include five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

Cards can be organized from 2 to 4 columns.

For card-columns that are the same from the smallest of devices to the largest, use the .card{2|3|4}columns across all viewports.

Example

This example shows 1 column to small devices, 2 columns from small to large devices, and 3 columns from large to higher devices.

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

            
              <div class="card-sm-columns card-sm-2-count card-lg-3-count">
                ...
              </div>
            
          

Card column numbers can also be extended and customized by adding or removing numbers via scss/_theme-variables.scss to the $card-count.

Card gutters

card-gutters are perfect classes to build equal height blocks and break them in specific breakpoints.

Card gutters include .card-*-gutters-1 (4px), card-*-gutters-2 (8px), and card-*-gutters-3 (16px) gutter class options.

These classes are available for .card{-sm|-md|-lg|-xl}-gutters-* breakpoints. However, they can easily be extended via scss/base/cards/_cards.scss.

Examples

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

            
              <div class="card-deck card-sm-gutters-1 d-block d-sm-flex">
                ...
              </div>
            
          

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

            
              <div class="card-deck card-sm-gutters-2 d-block d-sm-flex">
                ...
              </div>