Cards

Cards are objects that can be used to contain information. less/components/Card.less provides a number of predefined card styles, which are documented below, for most use cases.

Card

This is the default style of a card. To use it, set the class property of a div node to Card.

Card content

Modifiers

Card--double-padding

Use this modifier to set a cards padding value from 16px to 32px. To use it, give a div node an additional class of Card--double-padding.

Card content

Card--empty

Use this modifier to describe a card that has no initial content but is expected to in the future. To use it, give a div node an additional class of Card--empty.

Card content

Card--no-border

Use this modifier when a card is displayed on a dark background. To use it, give a div node an additional class of Card--no-border.

Card content

Card--no-padding

Use this modifier to set a cards padding value to 0. To use it, give a div node an additional class of Card--no-padding.

Card content