Hero — Centred search bar

A centred heading above a two-field search card and popular-query links. Use it when searching is the primary entry point.

ReactHTML

1440 × 900

Open in new tab

Component.tsx35 lines

export default function HeroSearchBar() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-3xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the search destination</p>
          <h1 className="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">Headline that guides the next search</h1>
          <p className="mt-6 text-lg text-pretty text-neutral-600">Supporting copy that explains what readers can find and how to narrow their search.</p>
        </div>
        <div className="mx-auto mt-10 max-w-4xl rounded-lg border border-neutral-200 bg-white p-3 shadow-sm">
          <form action="#" method="get" className="grid gap-3 sm:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
            <div className="min-w-0">
              <label htmlFor="hero-search-bar-keyword" className="mb-2 block text-sm font-medium">Keyword</label>
              <input id="hero-search-bar-keyword" name="keyword" type="search" placeholder="Search term" aria-describedby="hero-search-bar-help" className="h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            </div>
            <div className="min-w-0">
              <label htmlFor="hero-search-bar-location" className="mb-2 block text-sm font-medium">Location</label>
              <input id="hero-search-bar-location" name="location" type="text" placeholder="Location" aria-describedby="hero-search-bar-help" className="h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            </div>
            <button type="submit" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors bg-neutral-900 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:col-span-2 lg:col-span-1 lg:self-end">Search</button>
          </form>
        </div>
        <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
          <p className="text-sm text-neutral-500">Popular:</p>
          <a href="#" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Category</a>
          <a href="#" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Topic</a>
          <a href="#" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Format</a>
          <a href="#" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Type</a>
          <a href="#" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Scope</a>
        </div>
        <p id="hero-search-bar-help" className="mt-4 text-center text-sm text-neutral-500">1,284 results available to explore</p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a directory or searchable catalog opening. Choose hero-centered-form for a single email task. Variations: change location to a format field, show fewer popular queries, or replace the result count with search guidance.
Hierarchy: The display headline is 36px, 48px at 640px and 60px at 1024px, semibold with tracking-tight and balanced wrapping. Read the h1, 18px lede, labelled Keyword and Location inputs, Search button, 12px popular badges and 14px count. Slots: eyebrow 5 words, headline 10, lede 25, popular labels 1 word each. Both inputs describe their hints using one shared search-help line.
Responsive: Below 640px fields and button form one column. From 640px the fields share two columns with the full-width button below. From 1024px the button occupies an auto-sized third column. The popular row wraps at every width; headline and section padding follow the standard display breakpoints.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. A centered max-w-3xl 768px header precedes a max-w-4xl 896px bordered search card by 40px. The rounded-lg card has 12px padding and shadow-sm. At 1024px its form uses 1fr 1fr auto columns, aligned to the bottom, with 12px gaps. A 24px-lower popular-query row wraps centrally; a count follows by 16px.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. Inputs are 40px high with neutral-300 borders. Popular badge links fill neutral-50 on hover. The GET form is native; no results or selected states are implemented.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                           Eyebrow                            │
│               Headline for the search outcome                │
│                       Supporting lede                        │
│                                                              │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │Keyword                Location                           │ │
│ │[Search term        ]  [Location           ]  [Search]    │ │
│ └──────────────────────────────────────────────────────────┘ │
│     Popular: [Category] [Topic] [Format] [Type] [Scope]      │
│                      Result count line                       │
└──────────────────────────────────────────────────────────────┘

View all

Hero — Announcement rail and wide pitch
Layout tags: sidebar,numbers,spacious
Hero — Bento tiles
Layout tags: bento,media,compact
Hero — Centred with email form
Layout tags: centered,form,spacious

Hero — Centred search bar

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred with email form