Headers

Transparent header over a hero

variant="transparent" drops the surface and border so the bar sits on the hero backdrop. The dark overlay lights the text.

8 components46 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Button Hero Navbar NavbarActions NavbarBrand NavbarLink NavbarLinks NavbarToggle

Imports

import { Button, Hero, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarToggle } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import {
  Button,
  Hero,
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarLink,
  NavbarLinks,
  NavbarToggle,
} from '@the_viveksingh/vivek-ui'

export default function HeaderTransparent() {
  return (
    <div style={{ position: 'relative', isolation: 'isolate' }}>
      <div style={{ position: 'absolute', insetInline: 0, insetBlockStart: 0, zIndex: 1 }}>
        <Navbar variant="transparent" container="lg" style={{ color: '#fff' }}>
          <NavbarBrand href="#" style={{ color: 'inherit' }}>
            Summit
          </NavbarBrand>
          <NavbarToggle />
          <NavbarLinks>
            <NavbarLink active href="#">
              Product
            </NavbarLink>
            <NavbarLink href="#">Pricing</NavbarLink>
            <NavbarLink href="#">Docs</NavbarLink>
            <NavbarLink href="#">Blog</NavbarLink>
          </NavbarLinks>
          <NavbarActions>
            <Button size="sm" variant="outline">
              Shop
            </Button>
          </NavbarActions>
        </Navbar>
      </div>
      <Hero
        overlay="dark"
        minHeight="half"
        backdrop={<img src="/demo/vk-ridge.svg" alt="" />}
        title="Built for the days the forecast was wrong"
        description="Shells, mid-layers and packs tested where the weather does not read the brochure."
        actions={<Button size="lg">Explore the range</Button>}
      />
    </div>
  )
}

← All 62 blocks