Cards
Front'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. Front 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>
Highlighted
Use .card-frame-highlighted class to enable highlighted style.
<div class="card card-frame card-frame-highlighted">
<div class="card-body">
This is some text within a highlighted card body.
</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
Front'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 gap
Front's card-gap includes five sizing predefined classes for separating layouts. These classes are ideal for customizing card column gutters across breakpoints.
For card-gap use the .card-{sm|md|lg|xl}-{1|2|3|4|5}-gap across all viewports.
Here's an example of .card-lg-3-gap size in use:
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 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 (15px) 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>
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-3 d-block d-sm-flex">
...
</div>
Card group break
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
To break card group (equal height) groups, use .card-group-{-sm|-md|-lg}-break classes to line them vertically.
Example
This example break card group on md (medium) device resolution.
Card title
This is a wider 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 a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-sm-columns card-sm-2-count card-lg-3-count">
</div>