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
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="https://placehold.it/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.

Leave a comment

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