Announcement Bar – Frontend Snippet

Go back

<header class="h03">
  <div class="h03-bar">
    <div class="h03-bar-in">
      <p><span class="h03-new">New</span> Portfolio v3 is live — motion, dark mode & more. <a href="#">Read more →</a></p>
      <button class="h03-x" aria-label="Dismiss announcement">×</button>
    </div>
  </div>
  <div class="h03-main">
    <a href="#" class="h03-logo"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="8" cy="12" r="5"/><rect x="13" y="7" width="10" height="10" rx="2"/></svg>Studio</a>
    <nav class="h03-nav" aria-label="Main">
      <a href="#">Work</a>
      <a href="#">Services</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <div class="h03-right">
      <button class="h03-icon" aria-label="Search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
      <a href="#" class="h03-login">Log in</a>
      <a href="#" class="h03-cta">Get started</a>
      <button class="h03-burger" aria-label="Open menu" aria-expanded="false"><i></i><i></i><i></i></button>
    </div>
  </div>
  <div class="h03-scrim"></div>
  <aside class="h03-drawer" aria-label="Mobile menu">
    <nav>
      <a href="#">Work</a>
      <a href="#">Services</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
      <a href="#">Log in</a>
    </nav>
    <a href="#" class="h03-cta">Get started</a>
  </aside>
</header>