Landing Page

Create a first impression of your digital product.
Best Practices

Use a landing page to provide a quick overview.
Describe the digital product in terms of benefits.
Choose just a few abilities to highlight.
Be concise.
Be sure to adjust heading levels as appropriate.
Usage

<!-- Modified from the Hero Block > Single Pane -->
<div class="hero-solo-pane">
  <div class="row no-gutters">
    <div class="col-lg-6 half-left"
      style="background-image: url('https://i.ibb.co/Xt9tVG7/pexels-photo-275030-1.png');">
      <img src="https://i.ibb.co/Xt9tVG7/pexels-photo-275030-1.png" alt="A building shaped like a person."
        class="img-fluid">
    </div>
    <div class="col-lg-6 half-right bg-secondary">
      <div class="container-fluid">
        <div class="row align-items-center justify-content-center">
          <div class="col-10 col-lg-8">
            <h1 class="hero-big-text">Site Title</h1>
            <p class="hero-small-text">In just a few words, explain the great benefit which your users will get from
              this website. Then take them to the next step.</p>
            <a href="/introduction" class="btn btn-white btn-lg">Go to the next step<span class="icon fas fa-arrow-right ms-1" aria-hidden="true"></span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modified from the Feature Blocks > Set -->
<div class="feature-set bg-white py-12">
  <div class="container-fluid">
    <div class="row">
      <div class="offset-lg-1 col-12 col-lg-10">
        <h2 class="feature-big-text">Cool features</h2>
        <p class="feature-lead-text">This sentence is a summary of the two best features of this site. Keep the
          summary short, like an overview. Too many lines of text will distract the user.</p>
      </div>
    </div>
    <div class="row">
      <div class="offset-lg-1 col-12 col-lg-4">
        <hr class="minor">
        <p class="feature-lead-icon">
          <span class="icon fas fa-info-circle" aria-hidden="true"></span>
        </p>
        <p class="feature-small-text">This is the first cool feature. Did you know that this particular feature will
          do this cool thing? Check it out below and see for your self.</p>
        <a href="#" class="btn btn-accent">
          Check it out<span class="icon fas fa-arrow-right ms-1" aria-hidden="true"></span>
        </a>
      </div>
      <div class="offset-lg-2 col-12 col-lg-4">
        <hr class="minor">
        <p class="feature-lead-icon">
          <span class="icon fas fa-info-circle" aria-hidden="true"></span>
        </p>
        <p class="feature-small-text">This is the second cool feature. Did you know that this particular feature will
          do this cool thing? Check it out below and see for your self.</p>
        <a href="#" class="btn btn-accent">
          Check it out<span class="icon fas fa-arrow-right ms-1" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </div>
</div>
<!-- Modified from the Feature Blocks > Call to Action, Double -->
<div class="feature-cta-double bg-secondary">
  <div class="container-fluid">
    <div class="row align-items-end">
      <div class="col-md-6 col-lg-5 offset-lg-1">
        <h2 class="feature-big-text">Some extra facts</h2>
        <p class="feature-small-text">Still not convinced? Check out these two extra cool things about this site. These
          two things will certainly convince you now.</p>
      </div>
      <div class="col-md-6 offset-lg-1 col-lg-5">
        <div class="row">
          <div class="col-12 text-center">
            <div class="d-block d-md-inline">
              <a href="#" class="btn btn-white">Thing 1<span class="icon fas fa-arrow-right ms-1" aria-hidden="true"></span></a>
            </div>
            <div class="d-block d-md-inline">
              <a href="#" class="btn btn-white">Thing 2<span class="icon fas fa-arrow-right ms-1" aria-hidden="true"></span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Landing Page

On this page:

Best Practices

Usage
