Use Front's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Bootstrap Buttons documentationAvatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs
, .avatar-sm
, .avatar
, .avatar-lg
, .avatar-xl
or .avatar-xxl
classes to change size.
Front's cards provide a flexible and extensible content container with multiple variants and options.
Bootstrap Card documentationThis 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
Use .card-frame
class to add transition to the border on hover.
Use .card-frame-highlighted
class to enable highlighted style.
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
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.
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.
This example shows 1 column
to small devices, 2 columns
from small to large devices, and 3 columns
from large to higher devices.
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.
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.
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.
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
Card column numbers can also be extended and customized by adding or removing numbers via scss/_theme-variables.scss
to the $card-count
.
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:
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.
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.
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.
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
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/front/cards/_cards.scss
.
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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
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.
This example break card group on md (medium)
device resolution.
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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