← Back to Search

Search Preview

Desktop — with Trending

I'm looking for…

Trending: agency services programs contact us
View HTML 
<section class="txds-search-hero">
  <div class="txds-search-hero__inner">
    <h2 class="txds-search-hero__heading">I'm looking for…</h2>
    <div class="txds-search-hero__bar">
      <div class="txds-search-hero__input-wrap">
        <span class="txds-search-hero__search-icon"><!-- search svg --></span>
        <input type="search" class="txds-search-hero__input" placeholder="Search" aria-label="Search">
      </div>
      <button type="submit" class="txds-search-hero__button">Search</button>
    </div>
    <div class="txds-search-hero__trending">
      <span class="txds-search-hero__trending-label">Trending:</span>
      <a href="#">agency services</a>
      <a href="#">programs</a>
      <a href="#">contact us</a>
    </div>
  </div>
</section>

Desktop — without Trending

I'm looking for…

View HTML 
<section class="txds-search-hero">
  <div class="txds-search-hero__inner">
    <h2 class="txds-search-hero__heading">I'm looking for…</h2>
    <div class="txds-search-hero__bar">
      <div class="txds-search-hero__input-wrap">
        <span class="txds-search-hero__search-icon"><!-- search svg --></span>
        <input type="search" class="txds-search-hero__input" placeholder="Search" aria-label="Search">
      </div>
      <button type="submit" class="txds-search-hero__button">Search</button>
    </div>
  </div>
</section>

Mobile — with Trending

I'm looking for…

Trending: agency services programs contact us
View HTML 
<section class="txds-search-hero txds-search-hero--mobile">
  <h2 class="txds-search-hero__heading">I'm looking for…</h2>
  <div class="txds-search-hero__bar">
    <div class="txds-search-hero__input-wrap">
      <span class="txds-search-hero__search-icon"><!-- search svg --></span>
      <input type="search" class="txds-search-hero__input" placeholder="Search" aria-label="Search">
    </div>
    <button type="submit" class="txds-search-hero__button">Search</button>
  </div>
  <div class="txds-search-hero__trending">
    <span class="txds-search-hero__trending-label">Trending:</span>
    <a href="#">agency services</a>
    <a href="#">programs</a>
    <a href="#">contact us</a>
  </div>
</section>