HighFive Design System

Molecules

Call To Action: Standard

Example CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

Learn More for Example CTA

HTML

<section id="cta--example-cta" class="section-row cta--example-cta py-6 bg-gray-100" aria-label="Example CTA">

  <!-- .container-fluid -->
  <div class="container-fluid">
    <div class="row justify-content-center align-items-center">
      <div class="col-lg-7 ">
        <h2 class="text-maroon-400">Example CTA</h2>
        <p class="fw-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
      </div>
      <div class="col-lg-4 col-xl-3">
        <p class="mb-0"><a href="https://www.msstate.edu" class="btn btn-primary btn-lg">Learn More<span class="sr-only"> for Example CTA</span></a></p>
      </div>
    </div>
  </div>
  <!-- /.container-fluid -->

</section>
Molecules

Call To Action: No Title

Example CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

Learn More for Example CTA

HTML

<section id="cta--example-cta" class="section-row cta--example-cta py-6 bg-gray-100" aria-label="Example CTA">

  <!-- .container-fluid -->
  <div class="container-fluid">
    <div class="row justify-content-center align-items-center">
      <div class="col-lg-7 ">
        <h2 class="sr-only text-maroon-400">Example CTA</h2>
        <p class="lead fw-normal mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
      </div>
      <div class="col-lg-4 col-xl-3">
        <p class="mb-0"><a href="https://www.msstate.edu" class="btn btn-primary btn-lg">Learn More<span class="sr-only"> for Example CTA</span></a></p>
      </div>
    </div>
  </div>
  <!-- /.container-fluid -->

</section>
Molecules

Call To Action: Big Button

Example CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

Learn More for Example CTA

HTML

<section id="cta--example-cta" class="section-row cta--example-cta py-0 bg-gray-100" aria-label="Example CTA">

  <!-- .container-fluid -->
  <div class="container-fluid">
    <div class="row justify-content-center align-items-stretch">
      <div class="col-lg-7 py-6">
        <h2 class="sr-only text-maroon-400">Example CTA</h2>
        <p class="lead fw-normal mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
      </div>
      <div class="col-lg-4 col-xl-3">
        <a href="https://www.msstate.edu" class="btn btn-primary btn-lg m-0 d-flex align-items-center justify-content-center text-center h-100 external"><span>Learn More<span class="sr-only"> for Example CTA</span></span></a>
      </div>
    </div>
  </div>
  <!-- /.container-fluid -->

</section>