UIkit Card

admin

7 years ago

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-

uk-card-default– This class is used to create the default style card.
uk-card-primary– This creates a card with primary color style.
uk-card-secondary– This class is used to modify the card and adds secondary background color.

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.

.uk-card-small: This adds a smaller padding.
.uk-card-large: This adds larger padding.

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 »