Brand Brand Header

Brand Header

The logo over the tagline band — and, if you like, a landscape’s verbs.

Preview

Logo and tagline band

LIVE IT. NOW

With a landscape's verbs

LIVE IT. NOW

CLIMBGAZERESTRISE

Logo only

Usage

tsx

import { BrandHeader } from "zostel-ui";

<BrandHeader />
<BrandHeader showThemeLines themeProps={{ theme: "valleys", color: "grey" }} bandProps={{ accent: true }} />
<BrandHeader showBand={false} logoProps={{ size: 32 }} />

Props

Prop	Type	Default	Description
`logoProps`	`ZostelLogoProps`	—	Passed to the logo.
`showBand`	`boolean`	`true`	The LIVE IT. NOW band.
`bandProps`	`TaglineBandProps`	—	Passed to the band.
`showThemeLines`	`boolean`	`false`	Four verbs under the band.
`themeProps`	`ThemeLinesProps`	—	Passed to the verbs.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

logoProps

Type: ZostelLogoProps

Default: —

Passed to the logo.

showBand

Type: boolean

Default: true

The LIVE IT. NOW band.

bandProps

Type: TaglineBandProps

Default: —

Passed to the band.

showThemeLines

Type: boolean

Default: false

Four verbs under the band.

themeProps

Type: ThemeLinesProps

Default: —

Passed to the verbs.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).