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:
Columns -
[one|two|three|...]Color -
[red|green|blue|...]Mobile -
[stackable|doubling][card] shortcode arguments
classes:
Emphasis -
[raised]Color -
[red|green|blue|...]Other -
[centered|fluid]href:
The href/url/link argument can be used to specify a link.[cardheader] shortcode arguments
classes:
Alignment -
[center aligned|right aligned]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:
Type -
[content]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.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>
Leave a comment