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 |
|
Card shortcode arguments
Classes |
| ||||||
href | The href/url/link argument can be used to specify a link. |
Cardheader shortcode arguments
Classes |
| ||
subheader | Text under the header. |
Cardimage shortcode arguments
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). |
Carddimmer shortcode arguments
image | The url to the image. |
content | Content to show on image hover. |
alt | Image alt. |
Carditem shortcode arguments
icon | Name of the icon to use. |
content | Item text. |
description | Subtext under the item. |
Cardtext shortcode arguments
content | Text. |
Cardextra shortcode arguments
Classes |
| ||
content | Extra content for the card. |
Person card

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 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
<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>
Notes
Using a dimmer instead instead of an image allows to display content on hover.<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>
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.
<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
.