Card

The [cards] shortcode is a container for multiple cards.
The [card] shortcode itself can contain 5 different shortcodes: [cardheader], [cardimage], [carditem], [cardtext] or [carddimmer].
[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.
<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="https://placehold.it/400x370" alt="Basic" /{gt}</cardimage>
  </card>
  <card raised>
    <cardimage>{lt}img src="https://placehold.it/400x370" alt="Basic" /{gt}</cardimage>
  </card>
  <card>
    <cardimage>{lt}img src="https://placehold.it/400x370" 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
<cards>
  <card>
    <carddimmer image="https://placehold.it/300x240">
      <p>Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur.</p>
      <button inverted>Read more</button>
    </carddimmer>
  </card>
</cards>

Leave a comment

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