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.
Leave a comment