# 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

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

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

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

Some title

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

Some title

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

<!-- center default card -->
<div class="ui-card" style="width: 13rem; 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>
<!-- right default card -->
<div class="ui-card" style="width: 13rem; 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>

# 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

Some title

Some quick example text to build on the card title

Some title

Some quick example text to build on the card title

Some title

Some quick example text to build on the card title

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

PlaceholderImage cap
Some title

Some quick example text to build on the card title

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