{#
  Sub template for UnLondon block - card layout.

  A title, an image, some text and a CTA with a link

  title: the card title, plain text.
  image: the image, media.
  text: the main text, formatted text.
  cta_text: the CTA text, plain text.

  cta_icon: classes for a desired icon in the CTA, string.
  url: the URL to link to, string.
  title_heading_tag: the header tag, string.
  layout: the layout to render, string.
  coloured_bg: whether to show the featured tag on the image, boolean.
  featured: whether to show the featured tag on the image, boolean.
#}

<div class="ul-block ub-card image-{% if layout == 'image_left' %}left{% else %}right{% endif %}">
  {% if layout == 'image_left' %}
    {% include '@organisms/tm-ul/ul-block/includes/ul-block-card-image.twig' with {
      'image': image,
      'featured': featured,
    } %}
  {% endif %}
  <div class="ub-card-text{% if coloured_bg %} coloured-bg{% endif %}">
    <div class="ub-card-text-inner">
      <{{ title_heading_tag }} class="ul-title">{{ title }}</{{ title_heading_tag }}>
      {{ text|raw }}
      {% if url %}
        {% include '@organisms/tm-ul/ul-block/includes/ul-block-cta.twig' with {
          'text': cta_text,
          'cta_icon': cta_icon,
          'url': url,
          'button_style': 'outline-default',
        } %}
      {% endif %}
    </div>
  </div>
  {% if layout == 'image_right' %}
    {% include '@organisms/tm-ul/ul-block/includes/ul-block-card-image.twig' with {
      'image': image,
      'featured': featured,
    } %}
  {% endif %}
</div>
