Updated on 24 April 2018

Docs are work in progress, check open issues and see how you can help!

Card component is a container with a drop shadow and border radius. It can contain other elements such as Image, Button and many more. Default Card uses default shadow property from Shadow.


There’s style option for card component, which brings card “up” on z axis and uses lifted or elevated property from Shadow.


// Base
$card-fill                   : palette(cg9);
$card-radius                 : radius(default);

$card-default-shadow         : %shadow-default;
$card-lifted-shadow          : %shadow-lifted;
$card-elevated-shadow        : %shadow-elevated;


name type default
style default / lifted / elevated default