Required files
SCSS files required: _components.cards.scss
Default card
A card is defined using the class .card along with various modifying classes explained in the examples below
Some of the cards in the below examples are inside a grid system explained here
Default card
This is a default card which is left aligned
It can be used for information or anything else
Centre aligned cards
To make a card centre aligned apply the modifying class .card--centred
Note that the horizontal rule has a 20% margin on either side when inside a centre aligned card
To highlight a card apply the modifying class .card--highlight
To give a card more padding apply the class .card--padding-lg
Card centred
This is a card that is centred and has large padding
Card clickable
This is a card that is centred, has large padding and it is clickable
Card highlighted
This is a card that is centred, has large padding and highlighted!
It could be used as a selected state
Option cards
Note that the only difference with an option card is the top border, so all the content inside can be added to any card
To create an option card add the modifier class .card--options and for more padding add .card--padding-lg
For a recommended option card a modifier can be added to the options modifier, so the class is .card--options--recommended
To make all the cards fill the grid columns and be the same height, add the class .cards-same-height to the .grid element