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-

Let us create a simple 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>

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

<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>

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.

<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>

Add Comment

📖 Read More

• 1. UIkit Form
• 2. UIkit Table
• 3. UIkit List
• 4. UIkit Pagination
• 5. UIkit Progress Bar

• 6. UIkit Spinner
• 7. UIkit Divider
• 8. UIkit Totop scroll
• 9. UIkit Tile
• 10. UIkit Notification