Appearance
Skip to content
ts
import Header from '~/ui/Header.vue'Page header
Place the Header at the beginning of a page. Choose an appropriate heading level: h1 or h2 or h3. Choose h1 unless the header is part of a page subsection or a modal. You can use all props for Heading, including the stylistic variants such as radio or page-heading.
ts
const props = defineProps<{
columnsPerItem?: 1 | 2 | 3 | 4
alignLeft?: boolean
action?: { text: string } & (ComponentProps<typeof Link | typeof Button>)
icon?: string
noGap?: boolean
} & {
[H in `h${'1' | '2' | '3' | '4' | '5' | '6'}`]?: string
} & {
[S in 'pageHeading' | 'sectionHeading' | 'largeSectionHeading' | 'subsectionHeading' | 'caption' | 'title' | 'radio' | 'secondary' ]?: true
} & {
[Operation in 'expand' | 'collapse']?: () => void
}>()For a detailed explanation of the props, read the entry on Section
template
<Header
page-heading
h1="My title"
/>Add an image
Use the <template #image> slot to place a picture to the left of the header.
My title
My subtitle
template
<Header
h3="My title"
page-heading
>
<template #image>
<img
style="width: 196px;"
src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
role="presentation"
>
</template>
<div style="height: 48px;">
My subtitle
</div>
<Layout
flex
gap-8
>
<Button
ui-raised
class="shape-square"
>
A
</Button>
<Button
ui-raised
class="shape-square"
>
B
</Button>
<Spacer
h
grow
/>
<Button
ui-raised
class="shape-square"
>
C
</Button>
</Layout>
</Header>Add an action to the right of the heading
-> Use the action prop which is the same as in the Section component.
Tuning the layout
Responsive design
On narrow screens, the header will first wrap between image and title/content area.
Make sure to keep the minimum width of the title and the content area narrow to prevent unnecessary wrapping.
Consistent spacing
The distance between the image and the content area is 24px (gap-24). The title baseline is at 68px below top.
Using this component
A11y Checklist
Accessible header
My title
My subtitle
template
<Header
h3="My title"
page-heading
>
<template #image>
<img
style="width: 196px;"
src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
role="presentation"
>
</template>
<div style="height: 48px;">
My subtitle
</div>
<Layout
flex
gap-8
>
<Button
ui-raised
class="shape-square"
>
A
</Button>
<Button
ui-raised
class="shape-square"
>
B
</Button>
<Spacer
h
grow
/>
<Button
ui-raised
class="shape-square"
>
C
</Button>
</Layout>
</Header>