Hero

Overview

Hero banners are visual and interactive elements that typically sit towards the top of pages, framing the context and tone of the page. They communicate information that should be highlighted and will often include a headline with a subheading and optionally a call to action to direct the user to another page or piece of information. They are typically used at high levels of information architecture.

Default

<div className="hero p-6 rounded-2xl lg:rounded-3xl bg-white dark:bg-gray-900 grid grid-cols-2 gap-x-8">
  <div className="hero-visual rounded-2xl lg:rounded-3xl p-4 bg-gray-100 dark:bg-gray-800 flex justify-content items-center">
    ![Pre-built UI illustration](/pre-built-ui-themes-3.svg)
  </div>
  <div className="hero-text">
    <div className="headline text-4xl font-semibold lg:text-6xl lg:leading-tight">Ship faster with our chat API and pre-built UI</div>
    <div className="subheading text-2xl font-medium mt-8">Save *months* of work. Don't code everything from scratch.</div>
  </div>
</div>

Call to action

Ship faster with our chat API and pre-built UI

Save months of work. Don't code everything from scratch.

Get started

<div className="hero p-6 rounded-2xl lg:rounded-3xl bg-white dark:bg-gray-900 grid grid-cols-2 gap-x-8">
  <div className="hero-visual rounded-2xl lg:rounded-3xl bg-gray-100 dark:bg-gray-800 flex justify-content items-center overflow-hidden">
    <div className="scale-150">![Pre-built UI illustration](/pre-built-ui-themes-2.svg)</div>
  </div>
  <div className="hero-text">
    <div className="headline text-4xl font-semibold lg:text-6xl lg:leading-tight">Ship faster with our chat API and pre-built UI</div>
    <div className="subheading text-2xl font-medium mt-8">Save *months* of work. Don't code everything from scratch.</div>
    <button className="px-5 py-4 mt-8 font-semibold rounded-2xl bg-blue-500 text-white text-lg hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
      Get started
    </button>
  </div>
</div>

Headline only

<div className="hero p-6 rounded-2xl lg:rounded-3xl bg-white dark:bg-gray-900">
  <div className="hero-text text-center">
    <div className="headline text-4xl font-semibold lg:text-6xl lg:leading-tight">Ship faster with our chat API and pre-built UI</div>
    <div className="subheading text-2xl font-medium mt-8 text-gray-500">Save *months* of work. Don't code everything from scratch.</div>
  </div>
</div>