Hero

Heroes are large web banners, usually placed in the center of a page. It presents an overview of the page's most important content.

Interactive demo

Hero image with tagline and call to action button

   <div class="hero-banner">
        <div class="hero-banner-content">
          <h1 class="mb-4">Judiciary Design System</h1>
          <h3 class="mb-4">Judiciary DS unites style, content and components with a single set of design  principles. Whether you’re a developer or designer, you’ll get all the information  and guidance you need.</h3>
          <div class="text-center">
            <button class="btn btn-primary btn-large">Call to Action</button>
          </div>
        </div>
      </div>

Hero image with Search Bar

<div class="hero-banner has-search">
    <div class="hero-banner-content">
      <h1 class="mb-4">Judiciary Design System</h1>
      <h3 class="mb-4">Judiciary DS unites style, content and components with a single set of design  principles. Whether you’re a developer or designer, you’ll get all the information  and guidance you need.</h3>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="">
        <div class="input-group-append">
          <button class="btn btn-primary btn-large" type="button">Search</button>
        </div>
      </div>
    </div>
</div>