Icons & Text

Best Practices

Allows a Louisiana product to briefly describe a feature with related icons to reinforce the message. In the example below, it’s describing Pelican.

• The large text is the main benefit or feature, explain in one or two words.
• The small text explains the main benefit or feature. Keep this explanation as short as possible.
• Icons set the context for the benefit or feature. Do not use more than three.

Usage

<div class="feature-icons-text">
  <div class="container">
    <div class="row justify-content-center justify-content-lg-between align-items-center">
      <div class="col-10 col-lg-5">
        <h2 class="feature-big-text">Big Text.</h2>
        <p class="feature-small-text">This is smaller text which explains this block.</p>
      </div>
      <div class="col-10 col-lg-5">
        <div class="feature-icons">
          <span class="icon fas fa-fw fa-thumbs-up" aria-hidden="true"></span>
          <span class="icon fas fa-fw fa-code mx-4" aria-hidden="true"></span>
          <span class="icon fas fa-fw fa-laptop" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </div>
</div>