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="//imgplaceholder.com/300x120?font-family=OpenSans" 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/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.
<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.
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/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.
<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