Card

June 30, 2016bywebsevendev

The [cards] shortcode is a container for multiple cards.
The [card] shortcode itself can contain 6 different shortcodes: [cardheader], [cardimage], [carddimmer], [carditem], [cardtext] or [cardextra].

Classes

Columns	`one` `two` `three` `...` `ten`
Color	`red` `orange` `yellow` `olive` `green` `teal` `blue` `violet` `purple` `pink` `brown` `grey` `black`
Mobile	`stackable` `doubling`

Classes

Emphasis	`raised`
Color	`red` `orange` `yellow` `olive` `green` `teal` `blue` `violet` `purple` `pink` `brown` `grey` `black`
Other	`centered` `fluid`

href The href/url/link argument can be used to specify a link.

Classes

Alignment center aligned right aligned

subheader Text under the header.

`content`	HTML image tag.
`src`	Optional: image link (image can also be specified inside the shortcode, using an HTML <img> tag).
`alt`	Optional: alternative text (only used when src argument is specified).

`image`	The url to the image.
`content`	Content to show on image hover.
`alt`	Image alt.

`icon`	Name of the icon to use.
`content`	Item text.
`description`	Subtext under the item.

content Text.

Classes

Type content

content Extra content for the card.

Person card

Whitney is a worker compensation coordinator living in Arizona.

November 4, 1967

<card>
  <cardimage>{lt}img src="/avatars/3.png" alt="Whitney" /{gt}</cardimage>
  <cardheader>Whitney</cardheader>
  <cardtext>Whitney is a worker compensation coordinator living in Arizona.</cardtext>
  <cardextra content><icon birthday> November 4, 1967</cardextra>
</card>

Card header with meta

Joined in 2013

Kristy is an art director living in New York.

22 friends

<card>
  <cardimage>{lt}img src="/avatars/5.png" alt="Kristy" /{gt}</cardimage>
  <cardtext>
    <div header>
      <ui large header>Kristy</ui>
    </div>
    <div meta>
      <span date>Joined in 2013</span>
    </div>
  </cardtext>
  <cardtext>Kristy is an art director living in New York.</cardtext>
  <cardextra content><icon user> 22 friends</cardextra>
</card>

To include meta in card header, cardtext can be used.

Plan card

At alii legendos complectitur has.

Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.

<card red url="#">
  <cardheader center aligned subheader="€5 / month per user">Basic package</cardheader>
  <cardimage>{lt}img src="//placehold.co/300x120" alt="Basic" /{gt}</cardimage>
  <carditem icon="check">Eu nec esse splendide</carditem>
  <carditem icon="check" description="At alii legendos complectitur has.">Libris facilisis in duo</carditem>
  <carditem icon="user">7+ mel meis tollit</carditem>
  <cardtext>Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.</cardtext>
  <cardheader center aligned subheader="*it's almost €60">€59.99*</cardheader>
</card>

Image cards

<cards three>
  <card>
    <cardimage>{lt}img src="//picsum.photos/320?image=15" alt="Basic" /{gt}</cardimage>
  </card>
  <card>
    <cardimage>{lt}img src="//picsum.photos/320?image=16" alt="Basic" /{gt}</cardimage>
  </card>
  <card>
    <cardimage>{lt}img src="//picsum.photos/320?image=17" alt="Basic" /{gt}</cardimage>
  </card>
</cards>

Dimmable card image

Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur.

<card>
  <carddimmer image="//picsum.photos/320?image=10">
    <p>Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur.</p>
    <button inverted>Read more</button>
  </carddimmer>
</card>

Using a dimmer instead instead of an image allows to display content on hover.

Button

Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam.

Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.

<card>
  <button icon="eye">Top button</button>
  <cardtext>Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam.</cardtext>
</card>
<card>
  <cardimage>{lt}img src="//picsum.photos/320?image=19" alt="Basic" /{gt}</cardimage>
  <button attached icon="eye">Middle button (attached)</button>
  <cardtext>Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.</cardtext>
</card>
<card>
  <cardimage>{lt}img src="//picsum.photos/320?image=21" alt="Basic" /{gt}</cardimage>
  <button icon="eye">Bottom button</button>
</card>

The [button] shortcode can be used seamlessly in a card.

Lazyloaded images in cards

Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur.

<card>
  <cardheader>Image</cardheader>
  <cardimage lazyload src="//picsum.photos/512?image=24" />
  <cardheader>Dimmer</cardheader>
  <carddimmer lazyload image="//picsum.photos/512?image=25">
    <p>Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur.</p>
    <button inverted>Read more</button>
  </carddimmer>
</card>

Header in a card

Header in a card with card attribute.

<card>
  <header card="true">
    Account Settings
    <subheader normal>Manage your account settings and set e-mail preferences.</subheader>
  </header>
  <cardextra>Header in a card with card attribute.</cardextra>
</card>

The [header] shortcode can be used directly in a card by setting the card attribute to true.

Card

Demos

Documentation

Social media

Newsletter