Card

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].
Cards shortcode arguments
Classes
Columnsone two three ... ten
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Mobilestackable doubling
Card shortcode arguments
Classes
Emphasisraised
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Othercentered fluid
hrefThe href/url/link argument can be used to specify a link.
Cardheader shortcode arguments
Classes
Alignmentcenter aligned right aligned
subheaderText under the header.
Cardimage shortcode arguments
contentHTML image tag.
srcOptional: image link (image can also be specified inside the shortcode, using an HTML <img> tag).
altOptional: alternative text (only used when src argument is specified).
Carddimmer shortcode arguments
imageThe url to the image.
contentContent to show on image hover.
altImage alt.
Carditem shortcode arguments
iconName of the icon to use.
contentItem text.
descriptionSubtext under the item.
Cardtext shortcode arguments
contentText.
Cardextra shortcode arguments
Classes
Typecontent
contentExtra content for the card.
Person card
Whitney
Whitney
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
Kristy
Kristy
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>
Notes
To include meta in card header, cardtext can be used.
<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
Basic
Basic
Basic
<cards three>
  <card>
    <cardimage>{lt}img src="//picsum.photos/256?image=15" alt="Basic" /{gt}</cardimage>
  </card>
  <card>
    <cardimage>{lt}img src="//picsum.photos/256?image=16" alt="Basic" /{gt}</cardimage>
  </card>
  <card>
    <cardimage>{lt}img src="//picsum.photos/256?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.

Dimmer image
<card>
  <carddimmer image="//picsum.photos/256?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>
Notes
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.
Basic
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.
Basic
<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/256?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/256?image=21" alt="Basic" /{gt}</cardimage>
  <button icon="eye">Bottom button</button>
</card>
Notes
The [button] shortcode can be used seamlessly in a card.
Lazyloaded images in cards
Image
Dimmer

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

Dimmer image
<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
Account Settings
Manage your account settings and set e-mail preferences.
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>
Notes
The [header] shortcode can be used directly in a card by setting the card attribute to true.

Leave a comment

Your email address will not be published. Required fields are marked *