You are here

Home » API reference » UIkit Components 8.3

uikit-card.html.twig in UIkit Components 8.3

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 also

\Drupal\uikit_components\Element\UIkitCard

template_preprocess_uikit_card()

https://getuikit.com/docs/card

File

templates/components/uikit-card.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation for a UIkit Card.

  5.  *

  6.  * Available variables:

  7.  * - title: The title of the card.

  8.  * - content: The content of the card.

  9.  * - attributes: HTML attributes to be applied to the card wrapper.

  10.  * - badge: The badge to display in the card.

  11.  * - header: The header content to display above the default body content, or

  12.  *   NULL if not set.

  13.  * - footer: The footer content to display below the default body content, or

  14.  *   NULL if not set.

  15.  * - media: The image media to display in the card, or NULL if not set. If set,

  16.  *   available variables in media include media.alignment for the alignment of

  17.  *   of the media, and media.image_url for the image URL of the media.

  18.  *

  19.  * @see \Drupal\uikit_components\Element\UIkitCard

  20.  * @see template_preprocess_uikit_card()

  21.  * @see https://getuikit.com/docs/card

  22.  *

  23.  * @ingroup uikit_components_theme_render

  24.  */

  25. #}

  26. {% if content %}

  27.   <div{{ attributes }}>

  28.     {% if media and media.alignment == 'top' %}

  29.       <div class="uk-card-media-{{ media.alignment }}">

  30.         <img src="{{ media.image_url }}" />

  31.       </div>

  32.     {% endif %}

  33. 

  34.     {% if not media and header %}

  35.       <div class="uk-card-header">

  36.         {{ header }}

  37.       </div>

  38.     {% endif %}

  39. 

  40.     <div class="uk-card-body">

  41.       {% if badge %}

  42.         <div class="uk-card-badge uk-label">{{ badge }}</div>

  43.       {% endif %}

  44. 

  45.       {% if title and not header %}

  46.         <h3 class="uk-card-title">{{ title }}</h3>

  47.       {% endif %}

  48. 

  49.       {{ content }}

  50.     </div>

  51. 

  52.     {% if media and media.alignment == 'bottom' %}

  53.       <div class="uk-card-media-{{ media.alignment }}">

  54.         <img src="{{ media.image_url }}" />

  55.       </div>

  56.     {% endif %}

  57. 

  58.     {% if not media and footer %}

  59.       <div class="uk-card-footer">

  60.         {{ footer }}

  61.       </div>

  62.     {% endif %}

  63.   </div>

  64. {% endif %}

Related topics

Render API Overview
Overview of the UIkit Components Theme system and Render API.