Tutorialsplane

UIkit Card


UIkit Card– You can create layout boxes using card classes in beautiful styles. Class uk-card is used to create cards in UIkit framework. Here in this article we are going to explain how you can use the card classes and modifier classes to create beautiful cards.


UIkit Card Example

Following classes are used to define a card in UIKit-

Class Description
.uk-card This class is used to define the Card component.
.uk-card-body This class defines the body of card.
.uk-card-title This is used to define the card title.

Let us create a simple example.

UIkit Card Example:

<div class="uk-card uk-card-default uk-card-body uk-width-1-4@m">
    <h3 class="uk-card-title">Tutorialsplane</h3>
    <p> Learn to Create Hybrid Mobile Apps with High      Performance,
        Native Focused and Beautiful Design. 
        Learn with Online Demo & Examples .</p>
</div>

Try it »

If you run the above example it will produce output something like this-

Style Modifiers

Following modifier classes are available-

Example

Uikit Card Modifiers:

<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid="">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

Try it »

If you run the above example it will produce output like this-

Size Modifiers

You can use the following size modifiers to changes the size of cards.

Header & Footer

Class uk-card-header and uk-card-footer is used to add the header and footer of card.

Header & Footer Example:

<div class="uk-card uk-card-default">
    <div class="uk-card-header">
        <h3 class="uk-card-title">Header </h3>
    </div>
    <div class="uk-card-body">Body</div>
    <div class="uk-card-footer">Footer</div>
</div>

Try it »

Uikit Tutorial

Component