---
custom_classes: ""
title_image_text_classes: "white"
---
{{#
/**
 * @name banner/title-image
 * @description A partial for a banner with a title, copy, and image
 * @property {string} banner_title - Banner title
 * @property {string} banner_image - Banner image
 * @property {string} banner_mobile_image - Banner mobile image
 * @property {string} [title_image_img_position] - Have the text appear on the `left` or `right`
 * @property {string} [banner_description]
 * @property {string} [custom_classes=""] - Custom classes to apply to wrapping `section`
 * @property {string} [title_image_text_classes="white"] - Custom classes to apply to the text
 */
#}}
<section class="px-5 py-11 l--py-6 {{ custom_classes }}">
  <div class="mw-32 m--mw-grid mx-auto m--grid m--g-cols m--gap-m m--ai-center l--my-11">
    {{ if title_image_img_position=='left' }}
      <div class="relative m--g-col-6 m--h-100 mb-8 m--mb-0 {{ custom_image_wrap_classes }}">
    {{ else }}
      <div class="relative m--g-col-6 m--g-start-6 ta-center m--order-2 m--h-100 mb-8 m--mb-0 {{ custom_image_wrap_classes }}">
    {{ /if }}
        <picture>
          <source srcset="{{ banner_mobile_image or banner_image }}" media="(max-width: 480px)">
          {{ asset:banner_image }}
          <img src="{{ url }}"
            alt="{{ alt }}"
            class="mw-100 relative border-box {{ custom_image_classes }}">
          {{ /asset:banner_image }}
        </picture>
      </div>
    {{ if title_image_img_position=='left' }}
      <div class="m--g-col-5 m--g-start-7">
    {{ else }}
      <div class="m--g-col-5">
    {{ /if }}
      <h2 class="title-3 {{ title_image_text_classes }} mb-4 m--mt-0">{{ banner_title }}</h2>
      {{ if banner_description }}
        <p class="body-3 {{ title_image_text_classes }} m--mb-0">{{ banner_description }}</p>
      {{ /if }}
      {{ if banner_list }}
        <ul class="body-3 m--mb-0">
          {{ banner_list }}
          <li class="mt-3">{{ value }}</li>
          {{ /banner_list }}
        </ul>
      {{ /if }}
      {{ if banner_link }}
        <a href="{{ banner_link }}" class="mt-4 fw-500 fs-4 lh-4 mt-4 link hover-link-border hover-link-border-arrow inline-block {{ title_image_text_classes }}">
          {{ banner_link_text }} <i class="rarr"></i>
        </a>
      {{ /if }}
    </div>
  </div>
</section>