modules/jumpstart_ui/dist/templates/decanter/components/card/card.twig
{#
/**
* @file
* Card Component. Default is a vertical card with an image above text content.
*
* Available variants:
* - .su-card--horizontal: Media field and text content are side by side.
* - .su-card--link: Whole card is a link with no button or call to action link.
* - .su-card--minimal: No background, drop shadow and space around. Do not use with the .su-card--link class.
* - .su-card--icon: An image icon above text content.
* - .su-card--video: A video above text content.
*
* Available variables:
* - attributes: Additional HTML attributes not already provided.
* - modifier_class: Additional CSS classes to change look and behavior.
* - card_headline: Main headind text for the card.
* - card_allow_headline_link: Boolean. If set to true, headline links to card_link.
* - card_super_headline: Text super headline. Often used for metadata such as category.
* - card_body: An open variable for anything including HTML. Generally this would be for WYSIWYG editor contents.
* - card_link: The href value for the card. A single card is only allowed to link to one URL.
* - card_cta_attributes: Any html attributes on the link that need to be added. For example: rel='noopener', target='_blank'.
* This acts as the attributes for the link button and headline link as well.
* - card_cta_label: The clickable text for the CTA link
* - card_button_label: The text label of the button component.
* - card_icon_font_class: If using icon font, e.g., FontAwesome, the class(es) of the icon including modifier classes,
e.g. 'fas fa-globe fa-2x', 'far fa-thumbs-up fa-rotate-90'
* - card_media_image_src: The src link to the image file.
* - card_media_image_srcset: The srcset of the image if exists.
* - card_media_icon_image_src: The src link to the icon image file.
* - card_media_video_src: The src link to the video file.
* - card_media_video_poster: Optional preview image of the video.
* - card_media_fallback_content: Fallback content to display when browser doesn't support video or audio format.
* - card_allow_media_link: Boolean. If set to true, media element (image or self-hosted video) links to card_link.
* - card_media_type: Type of the media file, e.g. mp4, webm, quicktime (self-hosted video only).
* - card_media_custom: An open field for the full HTML element of the media content, e.g., an embedded YouTube iframe.
* - card_media_modifier_class: Additional CSS classes to change look and behavior of the media media element.
* - card_media_attributes: Additional HTML attributes for the media element not already provided.
* - card_media_wrapper_modifier_class: Additional CSS classes to change look and behavior of the media wrapper, e.g. "su-aspect-ratio" to provide aspect ratio constraint.
* - card_media_content_attributes: Additional HTML attributes for the media content, e.g., for <video> - controls, autoplay; for <img> - sizes (when srcset is provided), alt, width, height.
*/
#}
{%- if template_path_media is empty -%}
{%- set template_path_media = "@decanter/components/media/media.twig" -%}
{%- endif -%}
{# For variant where whole card is a link, suppress all other links within the component #}
{%- if "su-card--link" in modifier_class -%}
{%- set allow_links = false -%}
{%- else -%}
{%- set allow_links = true -%}
{% if card_allow_media_link == true %}
{%- set card_media_link = card_link -%}
{%- endif -%}
{%- endif -%}
<article {{ attributes }} class="su-card {{ modifier_class }}">
{# For variant where whole card is a link, add an <a> within the outer wrapper <div> #}
{%- if allow_links == false %}
<a href="{{ card_link }}" {{ card_cta_attributes }}>
{%- endif -%}
{% block block_card_media %}
{# We use the media component here except for the two variants with icons in the media field. #}
{% if 'su-card--video' in modifier_class %}
{# Support for cards with a self-hosted video in the media field #}
{% if card_media_video_src is not empty %}
{% include template_path_media with
{
"modifier_class": card_media_modifier_class ~ ' ' ~ 'su-media--video su-card__media',
"attributes": card_media_attributes,
"media_link": card_media_link,
"media_link_attributes": card_cta_attributes ~ ' ' ~ "tabindex='-1'",
"media_video_src": card_media_video_src,
"media_wrapper_modifier_class": card_media_wrapper_modifier_class,
"media_type": card_media_type,
"media_content_attributes": card_media_content_attributes
}
only
%}
{% endif %}
{% elseif 'su-card--embed' in modifier_class %}
{# Support for cards with an embedded media element, e.g., YouTube or Vimeo videos #}
{% if card_media_custom is not empty %}
{% include template_path_media with
{
"modifier_class": card_media_modifier_class ~ ' ' ~ 'su-card__media',
"attributes": card_media_attributes,
"media_wrapper_modifier_class": card_media_wrapper_modifier_class,
"media_custom": card_media_custom
}
only
%}
{% endif %}
{%- elseif 'su-card--icon-font' in modifier_class -%}
{# Support for icon font, e.g., FontAwesome #}
{% if card_icon_font_class is not empty %}
<span {{ card_media_attributes }} class="{{ card_icon_font_class }}" aria-hidden="true"></span>
{% endif %}
{%- elseif 'su-card--icon' in modifier_class -%}
{# Support for small images such as icons or avatars; use card_media_icon_image_src if provided, if not, use card_media_image_src. #}
{%- if card_media_icon_image_src is not empty %}
<img {{ card_media_attributes|default("aria-hidden='true'") }} src="{{ card_media_icon_image_src }}">
{%- elseif card_media_image_src is not empty %}
<img {{ card_media_attributes|default("aria-hidden='true'") }} src="{{ card_media_image_src }}">
{%- endif -%}
{% else %}
{# Default card with optional image in media field #}
{%- if card_media_image_src is not empty -%}
{% include template_path_media with
{
"modifier_class": card_media_modifier_class ~ ' ' ~ 'su-media--image su-card__media',
"attributes": card_media_attributes,
"media_wrapper_modifier_class": card_media_wrapper_modifier_class,
"media_link": card_media_link,
"media_link_attributes": card_cta_attributes ~ ' ' ~ "tabindex='-1'",
"media_image_src": card_media_image_src,
"media_image_srcset": card_media_image_srcset,
"media_content_attributes": card_media_content_attributes
}
only
%}
{%- endif -%}
{% endif %}
{% endblock block_card_media -%}
<section class="su-card__contents">
{# Card Super Headline #}
{%- block block_card_super_headline %}
{% if card_super_headline is not empty %}
<div class="su-card__superhead">{{ card_super_headline }}</div>
{% endif -%}
{% endblock -%}
{# Card Headline #}
{%- block block_card_headline %}
{%- if card_headline is not empty %}
<{{ card_headline_tag|default('h2') }}{{ card_headline_attributes }}>
{%- if card_allow_headline_link and allow_links -%}
<a href="{{ card_link }}" {{ card_cta_attributes }}>
{%- endif -%}
{{- card_headline -}}
{% if card_allow_headline_link and allow_links -%}
</a>
{%- endif -%}
</{{ card_headline_tag|default('h2') }}>
{% endif -%}
{% endblock -%}
{%- block block_card_body %}
{# An open field for body content #}
{{ card_body }}
{% endblock -%}
{# Block for CTA elements, e.g., link, button #}
{%- block block_card_cta %}
{# Card CTA Link #}
{%- if card_cta_label is not empty and allow_links %}
<a{{ card_cta_attributes }} href="{{ card_link }}" class="su-link su-card__link su-link--action">
{{ card_cta_label }}
</a>
{% endif -%}
{# Big ol link button. Adds a BEM class for targeting. #}
{%- if card_button_label is not empty and allow_links %}
<div class="su-card__button">
<a{{ card_cta_attributes }} href="{{ card_link }}" class="su-link su-button">
{{ card_button_label }}
</a>
</div>
{% endif -%}
{% endblock -%}
</section>{# end of .su-card__contents #}
{%- if allow_links == false %}
</a>
{%- endif -%}
</article>