Card Layout component

Card component

A card is a content container that helps you organize information on the screen. A card consists of a header, a card body and a footer. Headers and footers are only optional parts of a card component. Within the card body, you can place any text or even any JBStrap component. In the above example, we placed an image into the card header, a text into the card body and the automatically refreshed "Last updated..." information into the footer. The text in the card body also has a title.

Card groups

Groups of JBStrap cards are displayed as single, attached elements with the same height and width.

Card decks

A card deck only differs from a card group because individual cards are not attached to each other. On the other hand, headers and footers appear lined up, just with some spacing between cards.


An accordion contains collapsible group items and – as its name suggests – you can collapse or expand the items in the whole component.

Style customization

There plenty of options to customize a card component. You can set the background color, text color, border color. Also, there is an option to specify spacing between individual cards. Use the following Sass variables:

Name Type Default value Derived value Computed value Comment
$card-spacer-y number 0.75rem Vertical spacing between cards
$card-spacer-x number 1.25rem Horizontal spacing between cards
$card-border-width number $border-width $card-border-width-->$border-width-->1px 1px Border width
$card-border-radius number $border-radius $card-border-radius-->$border-radius-->0.25rem 0.25rem Border radius
$card-border-color color rgba($black, .125) $card-border-color-->rgba($black, .125)-->rgba(#000, .125) rgba(#000, .125) Border color
$card-inner-border-radius number subtract($card-border-radius, $card-border-width) Card inner border radius
$card-cap-bg color rgba($black, .03) $card-cap-bg-->rgba($black, .03)-->rgba(#000, .03) rgba(#000, .03) Header/footer background color
$card-cap-color color null Header/footer body color
$card-height number null Card height
$card-color color null Card body color
$card-bg color $white $card-bg-->$white-->#fff #fff Card background color
$card-img-overlay-padding number 1.25rem Text padding if the card itself is an image
$card-group-margin number $grid-gutter-width/2 $card-group-margin-->$grid-gutter-width/2-->30px/2-->15px 15px Margin size of card groups
$card-deck-margin number $card-group-margin $card-deck-margin-->$card-group-margin-->$grid-gutter-width/2-->30px/2-->15px 15px Margin size of card decks
$card-columns-count number 3 Number of card columns
$card-columns-gap number 1.25rem Gap size between card columns
$card-columns-margin number $card-spacer-y $card-columns-margin-->$card-spacer-y-->0.75rem 0.75rem Column margin

Related pages