Usage :

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.

PREVIEW

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Style modifiers

UIkit includes a number of modifiers that can be used to add a specific style to cards.
.uk-card-default .uk-card-primary .uk-card-secondary or you can use Background compounents . and .uk-light

PREVIEW

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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.

PREVIEW

Hover

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Size modifier

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

PREVIEW

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

PREVIEW

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Media modifiers.

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.

PREVIEW

Media Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Media Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Horizontal alignment

PREVIEW

Media Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Media Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.


© 2019 Sasuke. All Rights Reserved.