Caster — Site header

Signed-in — production layout

The standard B2B account state. Logo · search bar (with model-aware placeholder) · user pill · notifications · cart.

<header class="site-header">
  <div class="site-header__inner">
    <a href="/" class="site-header__logo">
      <img src="logo.svg" alt="USA Clean" class="site-header__logo-img">
    </a>
    <div class="site-header__search">
      <input class="site-header__search-input" type="text"
             placeholder="Search by part number, brand, or machine model">
      <button class="site-header__search-btn">
        <svg width="14" height="14">...</svg> Search
      </button>
    </div>
    <div class="site-header__actions">
      <a href="/account" class="site-header__user">
        <div class="site-header__avatar">MR</div>
        <div class="site-header__user-info">
          <div class="site-header__user-name">Maria Reyes</div>
          <div class="site-header__user-acct">Summit Facilities · #A-2241</div>
        </div>
      </a>
      <a href="/notifications" class="site-header__icon-btn">
        <svg ...></svg><span class="badge">4</span>
      </a>
      <a href="/cart" class="site-header__cart">
        <svg ...></svg> Cart <span class="site-header__cart-badge">7</span>
      </a>
    </div>
  </div>
</header>

Anonymous (signed-out)

Replace the user pill with a simple sign-in link. Cart still shows but with empty badge.

Anatomy

Slot	Class	Notes
Container	.site-header	`position: sticky; top: 0; z-index: 300`
Inner row	.site-header__inner	Flex, height 72px on desktop / 56px on mobile, container padding
Logo	.site-header__logo	Use an `<img>` via `.site-header__logo-img` in production (52px tall)
Search	.site-header__search	Flex-1, max-width 640px. Placeholder uses model-aware copy.
Search input	.site-header__search-input	Full-height transparent input
Search button	.site-header__search-btn	Gold accent — same color as `.btn-primary`
Actions cluster	.site-header__actions	Flex, justified right
User pill	.site-header__user	Avatar + name + account number, click → account dashboard
Avatar	.site-header__avatar	32px circle, brand bg, white initials
Icon button	.site-header__icon-btn	Notifications, wishlist — uses `.badge` for unread count
Cart button	.site-header__cart	Brand-blue solid with gold count badge

Tokens consumed

Slot	Token
Header height	--caster-header-height (72/64/56 px responsive)
Header bg	--caster-header-bg → surface.default
Logo height	--caster-header-logo-height (52px)
Search bg	--caster-color-surface-search (#f4f5f7)
Search button bg	--caster-color-accent-default
Cart bg	--caster-color-brand-default
Z-index	--caster-z-index-sticky (300)

Sticky behavior: the header stays fixed during scroll. If you also use the announcement bar above it, the bar scrolls away — only the header remains pinned. To keep both pinned, wrap them in a parent with position: sticky and update the z-indexes.