Brand Header

A composed brand header combining the Zostel logo, tagline band, and optional theme lines into a unified header block.

Preview

Full Brand Header

ZOSTEL

LIVE IT. NOW.

Without Tagline Band

ZOSTEL

Without Theme Lines

ZOSTEL

LIVE IT. NOW.

Usage

tsx

import { BrandHeader } from "zostel-ui";

// Default: logo + tagline band
<BrandHeader />

// With theme lines
<BrandHeader showThemeLines />

// Without the tagline band
<BrandHeader showBand={false} />

// Customise sub-components
<BrandHeader
  logoProps={{ size: 64, layout: "vertical" }}
  bandProps={{ size: "lg" }}
  themeProps={{ theme: "explore", color: "orange" }}
  showThemeLines
/>

Props

Prop	Type	Default	Description
`logoProps`	`ZostelLogoProps`	—	Props forwarded to the ZostelLogo component
`bandProps`	`TaglineBandProps`	—	Props forwarded to the TaglineBand component
`themeProps`	`ThemeLinesProps`	—	Props forwarded to the ThemeLines component
`showBand`	`boolean`	true	Show or hide the tagline band
`showThemeLines`	`boolean`	false	Show or hide the theme lines section
`className`	`string`	—	Additional CSS classes

logoProps

Type: ZostelLogoProps

Default: —

Props forwarded to the ZostelLogo component

bandProps

Type: TaglineBandProps

Default: —

Props forwarded to the TaglineBand component

themeProps

Type: ThemeLinesProps

Default: —

Props forwarded to the ThemeLines component

showBand

Type: boolean

Default: true

Show or hide the tagline band

showThemeLines

Type: boolean

Default: false

Show or hide the theme lines section

className

Type: string

Default: —

Additional CSS classes

Previous Theme Lines Next Pattern Background