Card

Simple rectangular container to display content related to a single subject.

Default

Default card with different position

Some title

Some quick example text to build on the card title and make up the bulk of the card's content

Cancel Confirm

<!-- default card -->
<div class="ui-card" style="width: 16rem;">
  <div class="ui-card-body">
    <span class="ui-title-3">Some title</span>
    <p>Some quick example text to build on the card title and make up
    the bulk of the card's content</p>
    <div class="ui-button-group" style="margin-top: 1rem">
      <a href="#" class="ui-button isLink">Cancel</a>
      <a href="#" class="ui-button isPrimary">Confirm</a>
    </div>
  </div>
</div>

Text alignment

Quickly change the text alignment of any card by add styles for parent class ui-card:

• text-align: left (by default)
• text-align: center
• text-align: right

Align left

Some quick example text to build on the card title and make up the bulk of the card's content

Align right

Some quick example text to build on the card title and make up the bulk of the card's content

Align center

Some quick example text to build on the card title and make up the bulk of the card's content

<!-- align center default card -->
<div class="ui-card" style="width: 20rem; text-align: center;">
  <div class="ui-card-body">
    <span class="ui-title-3">Some title</span>
    <p>Some quick example text to build on the card title and make up
    the bulk of the card's content</p>
  </div>
</div>
<!-- align right default card -->
<div class="ui-card" style="width: 20rem; text-align: right;">
  <div class="ui-card-body">
    <span class="ui-title-3">Some title</span>
    <p>Some quick example text to build on the card title and make up
    the bulk of the card's content</p>
    </div>
  </div>
</div>
<!-- align left default card -->
<div class="ui-card" style="width: 20rem;">
  <div class="ui-card-body">
    <span class="ui-title-3">Some title</span>
    <p>Some quick example text to build on the card title and make up
    the bulk of the card's content</p>
    </div>
  </div>
</div>

Animated card

Add animation by .isAnimated class and background color for display animation.

Some title

Some quick example text to build on the card title

Go somewhere

Some title

Some quick example text to build on the card title

Go somewhere

Some title

Some quick example text to build on the card title

Go somewhere

Some title

Some quick example text to build on the card title

Go somewhere

<!-- animated card -->
<div class="ui-card isAnimated" style="width: 20rem; background-color: #ffd3ce;">
  <div class="ui-card-body">
    <span class="ui-title-3">Some title</span>
    <p>Some quick example text to build on the card title</p>
    <div class="ui-button-group" style="margin-top: 1rem">
      <a href="#" class="ui-button isLink">Go somewhere</a>
    </div>
  </div>
</div>

Images

Places an image without any helpers classes

Some title

Some quick example text to build on the card title

Go somewhere

<!-- image card -->
<div class="ui-card" style="width: 20rem;">
  <img src="..." alt="..." />
  <div class="ui-card-body">
    <span class="ui-title-3">Some title</span>
    <p>Some quick example text to build on the card title</p>
    <div class="ui-button-group" style="margin-top: 1rem">
      <a href="#" class="ui-button isLink">Go somewhere</a>
    </div>
  </div>
</div>