Skip to main content

Hero sections

With image and reviews

Open this with image and reviews hero sections example in new window
Copy with image and reviews hero sections code 
<!-- Hero -->
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Grid -->
  <div class="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
    <div>
      <h1 class="block text-3xl font-bold text-hs2-primary-500 sm:text-4xl lg:text-6xl lg:leading-tight">Embark on the future of travel</h1>
      <p class="mt-3 text-lg text-gray-800 ">Welcome to High Speed Two (HS2), where innovation meets infrastructure to redefine the way you travel.</p>

      <!-- Buttons -->
      <div class="mt-7 grid gap-3 w-full sm:inline-flex">
        <a class="inline-flex justify-center items-center gap-x-3 text-center bg-hs2-secondary hover:bg-hs2-secondary-hover border border-transparent text-sm lg:text-base text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-secondary-hover focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
          Get started
          <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </a>
        <a class="inline-flex justify-center items-center gap-x-3.5 text-sm lg:text-base text-center border hover:border-gray-300 shadow-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
          Contact us
        </a>
      </div>
      <!-- End Buttons -->
    </div>
    <!-- End Col -->

    <div class="relative ml-4">
      <img class="w-full rounded-md" src="/assets/images/app-toolkit/placeholder-2.jpg" alt="Image Description">
      <div class="absolute inset-0 -z-[1] bg-gradient-to-tr from-gray-200 via-white/0 to-white/0 w-full h-full rounded-md mt-4 -mb-4 mr-4 -ml-4 lg:mt-6 lg:-mb-6 lg:mr-6 lg:-ml-6 "></div>
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->
</div>
<!-- End Hero -->
Close with image and reviews hero sections code

Simple centered

Open this simple centered hero sections example in new window
Copy simple centered hero sections code 
<!-- Hero -->
<div class="relative overflow-hidden before:absolute before:top-0 before:left-1/2 before:bg-current before:bg-[url('/assets/images/accessibility-law.jpg')] before:bg-no-repeat before:bg-top before:bg-cover before:w-full before:h-full before:-z-[1] before:transform before:-translate-x-1/2 ">
  <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
    <!-- Announcement Banner -->
    <div class="flex justify-center">
      <a class="inline-flex items-center gap-x-2 bg-white border border-gray-200 text-sm text-gray-800 p-1 pl-3 rounded-full transition hover:border-gray-300 " href="#">
        Connecting cities like never before
        <span class="py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-full bg-gray-200 font-semibold text-sm text-gray-600 ">
          <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </span>
      </a>
    </div>
    <!-- End Announcement Banner -->

    <!-- Title -->
    <div class="mt-5 max-w-2xl text-center mx-auto">
      <h1 class="block font-bold text-hs2-primary-500 text-4xl md:text-5xl lg:text-6xl lg:leading-tight ">
        Uniting Communities, Boosting Economies
      </h1>
    </div>
    <!-- End Title -->

    <div class="mt-5 max-w-3xl text-center mx-auto">
      <p class="text-lg text-gray-600 ">High Speed Two (HS2) is not just a railway – it's a lifeline that brings cities closer, bridges gaps, and fuels growth. </p>
    </div>

    <!-- Buttons -->
    <div class="mt-8 grid gap-3 w-full sm:inline-flex sm:justify-center">
      <a class="inline-flex justify-center items-center gap-x-3 text-center bg-hs2-secondary hover:bg-hs2-secondary-hover border border-transparent text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-4 " href="#">
        Get started
        <svg class="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </a>
      <a class="inline-flex justify-center items-center gap-x-3.5 text-sm lg:text-base text-center border hover:border-gray-300 shadow-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
        Contact support
      </a>
    </div>
    <!-- End Buttons -->

    <div class="mt-5 flex justify-center items-center gap-x-1 sm:gap-x-3">
      <a class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium" href="#">
        Learn more
        <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
        </svg>
      </a>
    </div>
  </div>
</div>
<!-- End Hero -->
Close simple centered hero sections code

Center aligned in dark background

Open this centered dark bg hero sections example in new window
Copy centered dark bg hero sections code 
<!-- Hero -->
<div class="bg-hs2-primary-500">
  <div class="bg-gradient-to-b from-violet-600/[.15] via-transparent">
    <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8">
      <!-- Announcement Banner -->
      <div class="flex justify-center">
        <a class="group inline-block bg-white/[.05] hover:bg-white/[.1] border border-white/[.05] p-1 pl-4 rounded-full shadow-md" href="../figma.html">
          <p class="mr-2 inline-block text-white text-sm">
            Sustainable Speed for a Greener Tomorrow
          </p>
          <span class="group-hover:bg-white/[.1] py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-full bg-white/[.075] font-semibold text-white text-sm">
            <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            </svg>
          </span>
        </a>
      </div>
      <!-- End Announcement Banner -->

      <!-- Title -->
      <div class="max-w-3xl text-center mx-auto">
        <h1 class="block font-bold text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl lg:leading-tight">
          Pioneering Eco-Friendly High-Speed Travel
        </h1>
      </div>
      <!-- End Title -->

      <div class="max-w-3xl text-center mx-auto">
        <p class="text-lg text-white">At High Speed Two (HS2), we are steering towards a more sustainable future at full throttle. </p>
      </div>

      <!-- Buttons -->
      <div class="text-center">
        <a class="inline-flex justify-center items-center gap-x-3 text-center bg-hs2-secondary hover:bg-hs2-secondary-hover shadow-lg shadow-transparent border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-hs2-secondary-hover focus:ring-offset-2 focus:ring-offset-white py-3 px-6 " href="#">
          Get started
          <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </a>
      </div>
      <!-- End Buttons -->
    </div>
  </div>
</div>
<!-- End Hero -->
Close centered dark bg hero sections code

With email input

Open this with email input hero sections example in new window
Copy with email input hero sections code 
<!-- Hero -->
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Grid -->
  <div class="grid lg:grid-cols-7 lg:gap-x-8 xl:gap-x-12 lg:items-center">
    <div class="lg:col-span-3">
      <h1 class="block text-3xl font-bold text-hs2-primary-500 sm:text-4xl md:text-5xl lg:text-6xl ">Welcome to HS2</h1>
      <p class="mt-3 text-lg text-gray-800 ">At High Speed Two (HS2), we are steering towards a more sustainable future at full throttle.</p>

      <div class="mt-5 lg:mt-8 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
        <div class="w-full sm:w-auto">
          <label for="hero-input" class="sr-only">Search</label>
          <input type="text" id="hero-input" name="hero-input" class="py-3 px-4 block w-full xl:min-w-[18rem] border-gray-200 shadow-sm rounded-md focus:z-10 focus:border-hs2-primary-500 focus:ring-hs2-primary-500 " placeholder="Enter work email">
        </div>
        <a class="w-full sm:w-auto inline-flex justify-center items-center gap-x-3 text-center bg-hs2-secondary hover:bg-hs2-secondary-hover border border-transparent text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
          Request access
        </a>
      </div>
    </div>
    <!-- End Col -->

    <div class="lg:col-span-4 mt-10 lg:mt-0">
      <img class="w-full rounded-xl" src="/assets/images/app-toolkit/placeholder-3.jpg" alt="Image Description">
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->
</div>
<!-- End Hero -->
Close with email input hero sections code

Center aligned with video play button on image

Open this centered with video play hero sections example in new window
Copy centered with video play hero sections code 
<!-- Hero -->
<div class="relative overflow-hidden">
  <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="max-w-2xl text-center mx-auto">
      <h1 class="block text-3xl font-bold text-hs2-primary-500 sm:text-4xl md:text-5xl ">Welcome to HS2</h1>
      <p class="mt-3 text-lg text-gray-800 ">Embark on the future of travel.</p>
    </div>

    <div class="mt-10 relative max-w-5xl mx-auto">
      <div class="w-full object-cover h-96 sm:h-[480px] bg-[url('/assets/images/app-toolkit/placeholder-1.jpg')] bg-no-repeat bg-center bg-cover rounded-xl"></div>

      <div class="absolute inset-0 w-full h-full">
        <div class="flex flex-col justify-center items-center w-full h-full">
          <a class="inline-flex justify-center items-center gap-x-1.5 text-center text-sm bg-hs2-secondary text-white hover:bg-hs2-secondary-hover rounded-full transition focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z" />
            </svg>
            Play the overview
          </a>
        </div>
      </div>

      <div class="absolute bottom-12 -left-20 -z-[1] w-48 h-48 bg-gradient-to-b from-orange-500 to-white p-px rounded-lg ">
        <div class="bg-white w-48 h-48 rounded-lg "></div>
      </div>

      <div class="absolute -top-12 -right-20 -z-[1] w-48 h-48 bg-gradient-to-t from-blue-600 to-cyan-400 p-px rounded-full">
        <div class="bg-white w-48 h-48 rounded-full "></div>
      </div>
    </div>
  </div>
</div>
<!-- End Hero -->
Close centered with video play hero sections code