---
default: "px-5 pt-10 pb-11 m--py-11"
bg: "bg-bottom bg-contain l--bg-center l--bg-cover bg-{{ bg-color }}"
---
{{#
/**
 * @name top-level/basic-cta
 * @description A partial for a basic CTA trial form
 * @see Uses partial {@link form/free-trial}
 * @property {string} title - Headline title
 * @property {string} copy - Text below Headline title
 * @property {string} btn-color - Passed to the {@link form/free-trial}'s var `button_color`
 * @property {string} [bg-color] - Pass it `ocean` or `mint` for a wave background
 * @property {string} [default="px-5 pt-10 pb-11 m--py-11"] - Classes applied to `section` wrapper
 * @property {string} [bg="bg-bottom bg-contain l--bg-center l--bg-cover bg-{{ bg-color }}"] - Classes applied to `section` wrapper
 */
#}}
{{ if bg-color=="ocean" }}
  <section class="{{ default }} {{ bg }} bg-blue-wave" style="background-image: url('{{ theme:asset src="images/backgrounds/ocean-wave.svg" }}')">
{{ elseif bg-color=="mint" }}
  <section class="{{ default }} {{ bg }} bg-green-wave" style="background-image: url('{{ theme:asset src="images/backgrounds/mint-wave.svg" }}')">
{{ else }}
  <section class="{{ default }}">
{{ /if }}
  <div class="mw-grid mx-auto m--grid m--g-cols m--gap-m m--ai-center m--my-5">
  {{ if bg-color }}
    <div class="m--g-col-6 white">
  {{ else }}
    <div class="m--g-col-6 slate-120">
  {{ /if }}
      <h2 class="title-2 m--mt-0 l--title-4 l--mb-5 {{ text-color }}">{{ title }}</h2>
      <p class="body-3 fw-500 mb-8 m--mb-0">{{ copy }}</p>
    </div>
    <div class="mt-8 m--mt-0 m--g-col-6">
      {{ partial:form/free-trial button_color='{ btn-color }' }}
    </div>
  </div>
</section>