We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create layout boxes with different styles.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Card component
within the ui()
plugin.
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. |
By default, a card is blank. That is why it is important to add a modifier class for styling. In our example we are using the .uk-card-default
class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
UIkit includes a number of modifiers that can be used to add a specific style to cards.
Class | Description |
---|---|
.uk-card-default | Add this class to create a visually styled box. |
.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-danger | Add this class to modify the card and give it a destructive background color. |
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.
Deploy your new project in one-click.
Learn more about using hooks.
Hook Name | Affected Classes |
---|---|
hook-card | .uk-card |
hook-body | .uk-card-body |
hook-header | .uk-card-header |
hook-footer | .uk-card-footer |
hook-media | [class*='uk-card-media'] |
hook-media-top | .uk-card-media-top, .uk-grid-stack > .uk-card-media-left, .uk-grid-stack > .uk-card-media-right |
hook-media-bottom | .uk-card-media-bottom |
hook-media-left | :not(.uk-grid-stack) > .uk-card-media-left |
hook-media-right | :not(.uk-grid-stack) > .uk-card-media-right |
hook-title | .uk-card-title |
hook-badge | .uk-card-badge |
hook-hover | .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover |
hook-default | .uk-card-default |
hook-default-title | .uk-card-default .uk-card-title |
hook-default-hover | .uk-card-default.uk-card-hover:hover |
hook-default-header | .uk-card-default .uk-card-header |
hook-default-footer | .uk-card-default .uk-card-footer |
hook-primary | .uk-card-primary |
hook-primary-title | .uk-card-primary .uk-card-title |
hook-primary-hover | .uk-card-primary.uk-card-hover:hover |
hook-secondary | .uk-card-secondary |
hook-secondary-title | .uk-card-secondary .uk-card-title |
hook-secondary-hover | .uk-card-secondary.uk-card-hover:hover |
hook-misc | * |