Create layout boxes with different styles.
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. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
There are several style modifiers available. Just add one of the following classes to apply a different look.
.uk-card-primary.uk-card-secondary.uk-badge-danger.uk-badge-warning.uk-badge-success.uk-badge-infoLorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
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.