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 search-box">
    <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">
        <div class="input-group-text"> <i class="far fa-search"></i> </div>
        <input type="search" class="form-control" placeholder="" aria-label="" aria-describedby="">
        <button class="btn btn-primary btn-large" type="button">Search</button>
      </div>
    </div>
  </div>