uikit_components-8.x-3.1/templates/components/uikit-card.html.twig

{#
/**
 * @file
 * Default theme implementation for a UIkit Card.
 *
 * Available variables:
 * - title: The title of the card.
 * - content: The content of the card.
 * - attributes: HTML attributes to be applied to the card wrapper.
 * - badge: The badge to display in the card.
 * - header: The header content to display above the default body content, or
 *   NULL if not set.
 * - footer: The footer content to display below the default body content, or
 *   NULL if not set.
 * - media: The image media to display in the card, or NULL if not set. If set,
 *   available variables in media include media.alignment for the alignment of
 *   of the media, and media.image_url for the image URL of the media.
 *
 * @see \Drupal\uikit_components\Element\UIkitCard
 * @see template_preprocess_uikit_card()
 * @see https://getuikit.com/docs/card
 *
 * @ingroup uikit_components_theme_render
 */
#}
{% if content %}
  <div{{ attributes }}>
    {% if media and media.alignment == 'top' %}
      <div class="uk-card-media-{{ media.alignment }}">
        <img src="{{ media.image_url }}" />
      </div>
    {% endif %}

    {% if not media and header %}
      <div class="uk-card-header">
        {{ header }}
      </div>
    {% endif %}

    <div class="uk-card-body">
      {% if badge %}
        <div class="uk-card-badge uk-label">{{ badge }}</div>
      {% endif %}

      {% if title and not header %}
        <h3 class="uk-card-title">{{ title }}</h3>
      {% endif %}

      {{ content }}
    </div>

    {% if media and media.alignment == 'bottom' %}
      <div class="uk-card-media-{{ media.alignment }}">
        <img src="{{ media.image_url }}" />
      </div>
    {% endif %}

    {% if not media and footer %}
      <div class="uk-card-footer">
        {{ footer }}
      </div>
    {% endif %}
  </div>
{% endif %}