---
banner_default_classes: "py-11"
banner_heading_default_font: "title-2 ta-center l--title-4"
banner_copy_default_font: "body-3 ta-center fw-500"
---
{{#
/**
 * @name banner/title-cta
 * @description A partial for a banner with a title, copy, and CTA Button
 * @property {string} banner_cta_button_text
 * @property {string} banner_cta_url
 * @property {string} [banner_cta_button_color]
 * @property {string} [banner_cta_text_color]
 * @property {string} [banner_default_classes="py-11"]
 * @property {string} [banner_background_color]
 * @property {string} [banner_copy]
 * @property {string} [banner_custom_classes]
 * @property {string} [banner_text_color]
 * @see Uses partial {@link cta-button}
 * @todo Set up defaults for vars
 * @todo Fix <code>banner_default_classes</code> to use <code>banner_custom_classes</code> with defaults
 */
 #}}
<section class="px-5 {{ banner_custom_classes or banner_default_classes }} {{ banner_background_color }}">
  <div class="mw-grid mx-auto ta-center">
    <h2 class="{{ banner_heading_custom_font or banner_heading_default_font }} mb-4 mt-0 l--mb-5 {{ banner_text_color }}">{{ banner_title | widont }}</h2>
    {{ if banner_copy }}
    <p class="{{ banner_copy_custom_font or banner_copy_default_font }} mb-8 l--mb-0 {{ banner_text_color }}">{{ banner_copy }}</p>
    {{ /if }}
    <div class="ta-center mt-8">
      {{ partial:cta-button
        cta_button_color='{ banner_cta_button_color }'
        cta_text_color='{ banner_cta_text_color }'
        cta_button_text='{ banner_cta_button_text }'
        cta_url='{ banner_cta_url }'
      }}
    </div>
  </div>
</section>