The card component consists of a content blob (required), media and attributes (both optional). Attributes are used to set the BEM modifiers that create the style variations of cards (text-overlay, centered, light, etc.).
Variations are demoed individually below, and then added to a grid.
{% for card in demo.cards %}
{% set rendered_card %}
{% set rendered_media %}
{% if card.img %}
{% include '@union/_image.twig' with {
img_src: card.img.src,
img_alt: card.img.alt,
blurred: card.img.blurred
} only %}
{% endif %}
{% endset %}
{% set rendered_content %}
{% if card.icon %}
{% include "@union/_icon.twig" with {
title: card.icon.title,
icon: card.icon.icon,
size: card.icon.size,
label: card.icon.label,
label_element: card.icon.label_element,
attributes: card.icon.attributes
} only %}
{% endif %}
{{ card.content }}
{% if card.button %}
{% include '@union/_button.twig' with {
attributes: card.button.attributes,
text: card.button.text
} only %}
{% endif %}
{% endset %}
{% include '@union/_card.twig' with {
card_content: rendered_content,
card_media: rendered_media,
attributes: card.attributes
} only %}
{% endset %}
{# Render the card #}
{{ card.label}}
{% if not card.overflow_demo %}
{% endif %}
{{ rendered_card }}
{% if not card.overflow_demo %}
{% endif %}
{% endfor %}