Card
Panel with optional title, content and image
Card
Go to top
Basic card
Card title
Wrap card text content in
.bf-card-content
Image banner
Card title
Wrap card text content in
.bf-card-content
Card button
You can place a <button> at the bottom of the card.
Card title
Wrap card text content in
.bf-card-content
Clickable card
Or you can make a card clickable by wrapping its content in a link or button.
Circular image or icon
Ola nordmann
Card title
Wrap card text content in
.bf-card-content
Responsive padding
The default inner padding for card content is 12px, other options are:
.bf-card-no-padding: no padding for any screen width.bf-card-padding-m: 12px for small screens, 16px for large (1280px+) screens.bf-card-padding-l: 16px for small screens, 24px for large (1280px+) screens
Default padding
12px padding for all screen widths
No padding
No padding with
.bf-card-no-padding
Medium padding
Resize window to get 12px for small screens, 16px for (1280px+) screens
Large padding
Resize window to get 16px for small screens, 24px for (1280px+) screens