Components
Page Header
The page's face: an eyebrow whisper, a serif title, one line of description, and the actions resting beside the title on the same baseline. Heading groups title and actions; the rest compose below.
#Basic usage
Ledger of correspondence
Every letter in and out of the house, logged and shelved.
<script setup lang="ts">
import { Button, PageHeader } from "@bysages/vue";
</script>
<template>
<PageHeader.Root>
<PageHeader.Heading>
<div class="min-w-0">
<PageHeader.Title>Ledger of correspondence</PageHeader.Title>
<PageHeader.Description>
Every letter in and out of the house, logged and shelved.
</PageHeader.Description>
</div>
<PageHeader.Actions>
<Button variant="outline" size="sm">Export</Button>
<Button size="sm">New letter</Button>
</PageHeader.Actions>
</PageHeader.Heading>
</PageHeader.Root>
</template>
#Props
#PageHeaderRoot
A styled part — no props of its own; it takes the anatomy's shared styling.
#PageHeaderHeading
A styled part — no props of its own; it takes the anatomy's shared styling.
#PageHeaderEyebrow
A styled part — no props of its own; it takes the anatomy's shared styling.
#PageHeaderTitle
A styled part — no props of its own; it takes the anatomy's shared styling.
#PageHeaderDescription
A styled part — no props of its own; it takes the anatomy's shared styling.
#PageHeaderActions
A styled part — no props of its own; it takes the anatomy's shared styling.