Best Practice

• The large text should be succinct.
• The smaller text can be longer, but try to keep it brief. Lengthy text will defeat the purpose of a Hero Block.
• Don’t use more than the number of buttons shown in this Hero Block.
• Do not use a random or decorative image.
• Be sure to change the heading level as appropriate.

Usage

Pelican

Louisiana’s Design System

Get started in creating modern, consistent digital products for Louisiana.

Get Started

<div class="hero-dual-pane" style="background-image: url('/img/photos/pexels-photo-275030.jpeg');">
  <div class="overlay overlay-left"></div>
  <div class="overlay overlay-right"></div>
  <div class="container">
    <div class="row justify-content-center">
    <div class="col-10 col-md-7 col-lg-6">
      <img src="/img/favicon.png" alt="icon for Pelican, Louisianas Design System." class="logo">
      <h1 class="hero-big-text">Pelican</h1>
      <p class="hero-lead-text">Louisiana’s Design System</p>
      <p class="hero-small-text">Get started in creating modern, consistent digital products for Louisiana.</p>
    </div>
    <div class="col-10 col-md-7 col-lg-6 d-flex flex-column justify-content-center align-items-center">
      <a href="/get-started/" class="btn btn-accent btn-lg">Get Started<span class="icon fas fa-arrow-right ms-1" aria-hidden="true"></span></a>
    </div>
    </div>
  </div>
</div>