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
<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.
<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 Reply