Header
Introduce a page or section with a title, a short explanation and the actions available there.
<script setup lang="ts">import { Plus } from '@lucide/vue'import { UiStack, UiHeader, UiButton, UiCard, UiList, UiListItem } from 'grani'</script> <template> <UiStack gap="title" class="w-full max-w-2xl"> <UiHeader title="Users" description="Who can sign in to the workspace."> <template #actions> <UiButton><Plus aria-hidden="true" />Invite</UiButton> </template> </UiHeader> <UiCard :padded="false"> <UiList> <UiListItem title="Anna Petrova" description="anna@work" /> <UiListItem title="Ivan Sidorov" description="ivan@work" /> </UiList> </UiCard> </UiStack></template>
Also called page header, section header, title bar.
Usage
<UiHeader :title="title" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| title*string | The name: the page's h1, or the section's title on its line. | |
| descriptionstring= "" | "" | One line under a page's title. A list page has none: the title names the list. A legend has none. |
| variantlegend | page= "page" | "page" | page is the first line of a page; legend names a section on the line above it. |
Anything else lands on the root element: native attributes, aria-*, data-testid.