Header

Storybook

Figma Demo

Guidelines

Variations

The header has small variations based on breakpoint in order to display all content properly.

Spacing

• Max/Desktop/Tablet: 24px between elements in the top area of the header.
• Mobile: 16px between elements in the top area of the header.

Logo

• Max/Desktop/Tablet: “Super P” logo is shown at 56px.
• Mobile: “Super P” logo is reduced to 48px.

Location Chooser

Note that the location chooser tertiary button retains its original position down to 700px viewports; at 699px and below, it sits full-width in its own row between the other header elements above and the global search field below.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• container: boolean | Default: false
  Sets the header to be a container with padding, maxWidth, and margin auto.

• containerClasses: string | Default: undefined

Example

<script>
	import { Header } from '@getprovi/craft-svelte';
</script>

<Header>
	<SideMenu class="area-menu" />
	<Logo class="area-logo" />
	<GlobalSearch class="area-search" />
	<LocationChooser class="area-user" />
	<Notifications class="area-notifications" />
	<button class="area-card" />
	<GlobalNav name="nav" />
</Header>

<Header container>header content</Header>

Types

interface Props {
	class?: string | undefined | null;
	container?: boolean;
	containerClasses?: string;
}