Cards are flexible containers used for displaying content.
To display a card, use the class a-card
.
<div class="a-card">
<div class="a-card__content">
This is a card
</div>
</div>
Render an active state card with the class -active
.
<div class="a-card -active">
<div class="a-card__content">
This is an active card
</div>
</div>
Render an alternative active state card with the class -active--alt
.
<div class="a-card -active--alt">
<div class="a-card__content">
This is an active alt card
</div>
</div>
Render an empty state card with the class -empty
.
Add Product
<div class="a-card -empty">
<div class="a-card__content">
<i class="a-icon icon-circle-plus-outline -md -text--muted"></i>
<p class="-text -m--0">Add Product</p>
</div>
</div>
Add a title to a card by applying the class a-card__title
.
This is a titled card
<div class="a-card">
<div class="a-card__content">
<div class="a-card__title">Title</div>
<p class="-text -m--0">This is a titled card</p>
</div>
</div>
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__content">
<div class="a-card__title">Title</div>
<p class="-text -mt--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
<button class="a-btn -primary">Action</button>
</div>
</div>
4 Running
6 Pending
4 Running
6 Pending
<!-- Base -->
<div class="a-card">
<div class="a-card__content -d--flex -flex--column -justify-content--center -align-items--center -text--center">
<div class="a-card__title">Title</div>
<i class="a-icon icon-atom -sm--3 -text--grey"></i>
<p class="-text--small -mb--0 -mt--1">4 Running</p>
<p class="-text--smaller -m--0 -text--grey">6 Pending</p>
</div>
</div>
<!-- Active -->
<div class="a-card -active">
<div class="a-card__content -d--flex -flex--column -justify-content--center -align-items--center -text--center">
<div class="a-card__title">Title</div>
<i class="a-icon icon-atom -sm--3 -text--grey"></i>
<p class="-text--small -mb--0 -mt--1">4 Running</p>
<p class="-text--smaller -m--0 -text--grey">6 Pending</p>
</div>
</div>
Add a full width image or banner to the top of a card by applying the class a-card__hero
.
Hero Image
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec, ultrices in turpis. Donec sit amet consectetur elit.
<div class="a-card">
<img class="a-card__hero" src="..." alt="Card Image">
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec, ultrices in turpis. Donec sit amet consectetur elit.</p>
</div>
</div>
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer">
<button class="a-btn -primary">Action 1</button>
<button class="a-btn -ml--1">Action 2</button>
</div>
</div>
Apply the class -align--right
on a-card__footer
to right align its contents.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer -align--right">
<button class="a-btn">Action 2</button>
<button class="a-btn -primary -ml--1">Action 1</button>
</div>
</div>
Apply the class -align--center
on a-card__footer
to center align its contents.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer -align--center">
<button class="a-btn -primary">Action</button>
</div>
</div>
Apply the class -noBorder
on a-card__footer
to remove the default border.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer -noBorder">
<button class="a-btn -primary">Action</button>
</div>
</div>
Apply the class -sm
on a-card__footer
to reduce its padding.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer -sm">
<a class="-text" href="#">Action</a>
</div>
</div>
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__header">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
</div>
Apply the class -align--center
on a-card__header
to center align its contents.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__header -align--center">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
</div>
Apply the class -noBorder
on a-card__header
to remove the default border.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__header -noBorder">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
</div>
Apply the class -sm
on a-card__header
to reduce its padding.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__header -sm">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
</div>
Further customize cards by adding both headers a-card__header
and footers a-card__footer
.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__header">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer">
<button class="a-btn -primary">Action</button>
</div>
</div>
Reduce the size of the header and footer by applying the class -sm
to each element.
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card">
<div class="a-card__header -sm">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
<div class="a-card__footer -sm">
<a class="-text" href="#">Action</a>
</div>
</div>
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card -portal">
<div class="a-card__header -sm">
<div class="a-card__title">Title</div>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
</div>
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="a-card -portal">
<div class="a-card__tabs">
<ul class="a-tabs -xs">
<li class="-active">
<a href="#">Active Tab</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>
</div>
<div class="a-card__content">
<p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
</div>
</div>