Grid card

The .bfg-card block can be added at different levels of the grid.

Using the markup .bfg.bfg-card tells that the .bfg block contains cards elements (content, header and action) that are not direct children of the .bfg-card block.

This allows you to define a default look and feel for all cards and lets you customize some of them, using the different .bfg-card--* modifiers.

Compare with class syntax ▸