Card
Create layout boxes with different styles.
Table of contents
Usage
The Card component consists of the card itself, the card body and an optional card title. Typically, cards are arranged in grid columns.
| Class | Description |
|---|---|
.uk-card | Add this class to a <div> element to define the Card component. |
.uk-card-body | Add this class to the card to create padding between the card and its content. |
.uk-card-title | Add this class to a heading to define a card title. |
Style modifiers
UIkit includes a number of modifiers that can be used to add a specific style to cards.
| Class | Description |
|---|---|
.uk-card-primary | Add this class to modify the card and emphasize it with a primary color. |
.uk-card-secondary | Add this class to modify the card and give it a secondary background color. |
.uk-card-destructive | Add this class to modify the card and give it a destructive background color. |
Header and footer
You can also divide a card into header and footer — around the default body. Just add the .uk-card-header or .uk-card-footer class to a <div> element inside the card.
Support
Franken UI is an independent project free for everyone. Help support it and
expand its component library.