{#
/**
 * Card
 *
 * A card represents a small piece of content, like an article teaser or a promo.
 * An optional media element, an image or a video, may be included.
 *
 * Cards can contain any content, but there are a few structured elements that can be added - specifically, the `heading`, `eyebrow_heading`, and `icon_data`. If these or related variables are included, they will be placed in a `composite-heading` component within the content area of the card.
 *
 * By default, cards appear as a teaser, with the media above unpadded content.
 *
 * @var string $card_content The primary content of the card, often markup.
 * @var string $card_media Optional media (img, video, or any other CSS replaced element).
 * @var string $heading Main heading title for the card.
 * @var string $eyebrow_heading A descriptive keyword or phrase placed above the main heading.
 * @var string $heading_element The HTML element for the heading. Defaults to `h2`.
 * @var string $eyebrow_heading_element The HTML element for the eyebrow_heading. Defaults to `h3`.
 * @var string $card_link_url An optional URL for link over the entire card.
 * @var string $card_link_alt Alt text for the card link.
 * @var array $icon_data An array of icon data (e.g. `icon`, `title`, `size`, `label`, etc.)
 * @var array $button_data An array of button data (e.g. `text`, `attributes`, etc.)
 * @var Drupal\Core\Template\Attribute|array $attributes Attributes (class, data, etc.) for the entire card.
 * @var Drupal\Core\Template\Attribute|array $content_attributes Attributes for the card content region.
 * @var Drupal\Core\Template\Attribute|array $link_attributes Attributes for the card link.
 *
 * @union-variation cu-card--stacked Centered content below the media.
 * @union-variation cu-card--with-media Not a layout, but an indication that the card includes media.
 * @union-variation cu-card--with-aside
 * @union-variation cu-card--promo Legacy. Centered content over the background or media.
 * @union-variation cu-grid--popout Content slightly overlaps the content on the lower right.
 * @union-variation cu-grid--popout-left Left variation of `cu-card--popout`.
 * @union-variation cu-card--panel Media appears on the right.
 * @union-variation cu-card--panel-left Left variation of `cu-card--panel`.
 * @union-variation cu-card--use-aspect-ratio
 * @union-variation cu-card--pinned Content is pinned to the top and bottom of the card via flex layout.
 * @union-variation cu-card--pinned-bottom Content is pinned to the bottom of the card.
 * @union-variation cu-card--pinned-top Content is pinned to the top of the card.
 * @union-variation cu-card--centered Content is horizontally centered in the card.
 * @union-variation cu-card--padded The content gets some padding.
 * @union-variation cu-card--cinematic Wide media is displayed above the content, in which the heading and body are side-by-side.
 * @union-variation cu-card--cinematic-reversed Like `cu-card--cinematic`, but with the media below the content.
 * @union-variation cu-card--post-small Unpadded content with the media to the left.
 * @union-variation cu-card--icon A bad name for a simple variation that places media and content horizontally, adds a bit of padding, and adds a border radius.
 * @union-variation cu-card--hover-content-reveal Reveals any content with the CSS class `.cu-card__hover-content` when the card is hovered.
 * @union-variation cu-card--hover-overlay Displays content on hover.
 * @union-variation cu-card--portrait Spans two rows when in a grid. Probably doesn't belong here.
 * @union-variation cu-card--landscape Spans two columns when in a grid. Probably also doesn't belong here.
 *
 * @see https://www.figma.com/file/uFwXUY837P752PL8MndgBN/ILR-Design-System?node-id=380%3A1454 Card Below/Text Right (AKA Popout) in Figma
 * @see https://www.figma.com/file/uFwXUY837P752PL8MndgBN/ILR-Design-System?node-id=371%3A1031 News Article/Small (--cu-card--post-small)
 */
#}
{% set attributes = union_attributes(attributes|default([])) %}
{% set content_attributes = union_attributes(content_attributes|default([])) %}
{% set link_attributes = union_attributes(link_attributes|default([])) %}

<div{{ attributes.addClass([
    'cu-card',
    card_media ? 'cu-card--with-media'
  ]) }}>
  <div{{ content_attributes.addClass(['cu-card__content']) }}>
    {% if icon_data or eyebrow_heading or heading %}
    {% include '@union/_composite-heading.twig' with {
      icon_data: icon_data,
      eyebrow_heading: eyebrow_heading,
      heading: heading,
      eyebrow_heading_element: eyebrow_heading_element,
      heading_element: heading_element,
      attributes: {
        class: [
          'cu-card__meta',
          attributes.hasClass('cu-card--panel') or attributes.hasClass('cu-card--cinematic') or attributes.hasClass('cu-card--post-small') ? 'cu-composite-heading--left',
          attributes.hasClass('cu-card--panel') ? 'cu-composite-heading--bold',
          not heading ? 'cu-composite-heading--minimal'
        ]
      }
    } only %}
    {% endif %}
    {{ card_content }}
    {% if button_data %}
    {% include '@union/_button.twig' with button_data only %}
    {% endif %}
  </div>
{% if card_media %}
  <div class="cu-card__media">
    {{ card_media }}
  </div>
{% endif %}
{% if card_link_url %}
  <a{{ link_attributes.addClass(['cu-card__link']) }} href="{{ card_link_url }}">{{ card_link_alt }}</a>
{% endif %}
</div>