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.

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.

Copy to clipboard
  • Default

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

  • <div class="uk-width-1-2@m uk-card uk-card-body uk-card-default">
      <h3 class="uk-card-title">Default</h3>
      <p class="uk-margin">
        Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>

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.
.uk-card-dangerAdd this class to modify the card and give it a destructive 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>

<div class="uk-card uk-card-danger"></div>
Copy to clipboard
  • 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.

    Danger

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="uk-child-width-1-2@m uk-grid-small uk-grid-match" uk-grid>
      <div>
        <div class="uk-card uk-card-body uk-card-default">
          <h3 class="uk-card-title">Default</h3>
          <p class="uk-margin">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
      </div>
      <div>
        <div class="uk-card uk-card-body uk-card-primary">
          <h3 class="uk-card-title">Primary</h3>
          <p class="uk-margin">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
      </div>
      <div>
        <div class="uk-card uk-card-body uk-card-secondary">
          <h3 class="uk-card-title">Secondary</h3>
          <p class="uk-margin">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
      </div>
      <div>
        <div class="uk-card uk-card-body uk-card-danger">
          <h3 class="uk-card-title">Danger</h3>
          <p class="uk-margin">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
      </div>
    </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>
Copy to clipboard
  • Create project

    Deploy your new project in one-click.

    The name of your project.
  • <div class="uk-width-1-2@m uk-card">
      <div class="uk-card-header">
        <h3 class="uk-card-title">Create project</h3>
        <p class="uk-margin-small-top uk-text-small text-muted-foreground">
          Deploy your new project in one-click.
        </p>
      </div>
      <div class="uk-card-body uk-padding-remove-top uk-padding-remove-bottom">
        <div class="">
          <label class="uk-form-label" for="name">Name</label>
          <input
            class="uk-input uk-margin-small-top"
            id="name"
            type="text"
            aria-describedby="name-help-block"
            placeholder="Name"
          />
          <div id="name-help-block" class="uk-form-help uk-margin-small-top">
            The name of your project.
          </div>
        </div>
    
        <div class="uk-margin">
          <label class="uk-form-label" for="framework">Framework</label>
          <select
            class="uk-select uk-margin-small-top"
            name="framework"
            id="framework"
          >
            <option value="sveltekit">Sveltekit</option>
            <option value="astro">Astro</option>
          </select>
        </div>
      </div>
    
      <div class="uk-card-footer uk-flex uk-flex-between">
        <button class="uk-button uk-button-default">Cancel</button>
        <button class="uk-button uk-button-primary">Deploy</button>
      </div>
    </div>

Theme development

On your tailwind.config.js file, add the Card component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        card: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-card.uk-card
hook-body.uk-card-body
hook-header.uk-card-header
hook-footer.uk-card-footer
hook-media[class*='uk-card-media']
hook-media-top.uk-card-media-top, .uk-grid-stack > .uk-card-media-left, .uk-grid-stack > .uk-card-media-right
hook-media-bottom.uk-card-media-bottom
hook-media-left:not(.uk-grid-stack) > .uk-card-media-left
hook-media-right:not(.uk-grid-stack) > .uk-card-media-right
hook-title.uk-card-title
hook-badge.uk-card-badge
hook-hover.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover
hook-default.uk-card-default
hook-default-title.uk-card-default .uk-card-title
hook-default-hover.uk-card-default.uk-card-hover:hover
hook-default-header.uk-card-default .uk-card-header
hook-default-footer.uk-card-default .uk-card-footer
hook-primary.uk-card-primary
hook-primary-title.uk-card-primary .uk-card-title
hook-primary-hover.uk-card-primary.uk-card-hover:hover
hook-secondary.uk-card-secondary
hook-secondary-title.uk-card-secondary .uk-card-title
hook-secondary-hover.uk-card-secondary.uk-card-hover:hover
hook-misc*