Icons & Text

Simple text with icons to explain a feature.

On this page:

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

Big Text.

This is smaller text which explains this block.

<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="fas fa-fw fa-thumbs-up" aria-hidden="true"></span>
          <span class="fas fa-fw fa-code mx-4" aria-hidden="true"></span>
          <span class="fas fa-fw fa-laptop" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </div>
</div>
Previous page
Next page