Card

Create layout boxes with different styles.

Card

Create layout boxes with different styles.

Usage

The Card component consists of the card itself, the card body and an optional card title. Typically, cards are arranged in grid columns from the Grid component.

ClassDescription
.uk-cardAdd this class to a <div> element to define the Card component.
.uk-card-bodyAdd this class to the card to create padding between the card and its content.
.uk-card-titleAdd this class to a heading to define a card title.
<div class="uk-card uk-card-body">
    <h3 class="uk-card-title"></h3>
</div>

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.

Style modifiers

UIkit includes a number of modifiers that can be used to add a specific style to cards.

ClassDescription
.uk-card-defaultAdd this class to create a visually styled box.
.uk-card-primaryAdd this class to modify the card and emphasize it with a primary color.
.uk-card-secondaryAdd this class to modify the card and give it a secondary background color.
<div class="uk-card uk-card-default"></div>

<div class="uk-card uk-card-primary"></div>

<div class="uk-card uk-card-secondary"></div>

Hover modifier

To create a hover effect on the card, add the .uk-card-hover class. This comes in handy when working with anchors and can be combined with the other card modifiers.

<div class="uk-card uk-card-hover"></div>

Size modifiers

You can apply different size modifiers to cards that will decrease or increase their padding.

ClassDescription
.uk-card-smallAdd this class to apply a smaller padding.
.uk-card-largeAdd this class to apply a larger padding.
<div class="uk-card uk-card-small uk-card-default"></div>

<div class="uk-card uk-card-large uk-card-default"></div>

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.

<div class="uk-card">
    <div class="uk-card-header">
        <h3 class="uk-card-title"></h3>
    </div>
    <div class="uk-card-body"></div>
    <div class="uk-card-footer"></div>
</div>

Media

To display an image inside a card without any spacing, add one of the following classes to a <div> around the <img> element. Mind that you need to modify the source order accordingly.

ClassDescription
.uk-card-media-topThis class indicates that the media element is aligned to the top.
.uk-card-media-bottomThis class indicates that the media element is aligned to the bottom.
.uk-card-media-leftThis class indicates that the media element is aligned to the left.
.uk-card-media-rightThis class indicates that the media element is aligned to the right.
<div class="uk-card uk-card-default">
    <div class="uk-card-media-top">
        <img src="" width="" height="" alt="">
    </div>
    <div class="uk-card-body"></div>
</div>

Horizontal alignment

The .uk-card-media-left or the .uk-card-media-right classes are used to reset border radius or similar where necessary. They don’t create the actual layout.

To do that, you could for example add the .uk-cover-container class from the Cover component. Add the uk-cover attribute to the image element and use the Grid and Width components to achieve the alignment. Create a <canvas> element with your image’s width and height, so that it will retain its dimensions, if the grid stacks on smaller viewports. This is just one way of creating a side by side layout.

<div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
    <div class="uk-card-media-left uk-cover-container">
        <img src="" alt="" uk-cover>
        <canvas width="" height=""></canvas>
    </div>
    <div>
        <div class="uk-card-body"></div>
    </div>
</div>

Badge

To position a badge inside a card, add the .uk-card-badge class to a container element. To style the badge, you can use one of the other components, for example the Label.

<div class="uk-card uk-card-body">
    <div class="uk-card-badge uk-label"></div>
</div>