PageSection

A titled section within a page.

Danger zone

These actions are permanent and cannot be undone.

1<template>2  <PageSection title="Danger zone" description="These actions are permanent.">3    <Button variant="destructive">Delete project</Button>4  </PageSection>5</template>

Props

Name	Type	Default
title	string	-
description	string	-
orientation	"vertical" \| "horizontal"	"vertical"

Slots

Name	Description
default	The section's content.
title	Overrides the `title` prop.
description	Overrides the `description` prop.
actions	Optional action(s) next to the section's own title/description.

Guidelines

Do

Use its title/description when a page has multiple distinct sections and no single PageHeader title covers all of them - each section gets its own heading instead.
Use orientation="horizontal" when the section's own summary (title/description) is short and its content is the main focus - the summary sits beside it instead of stacking above.

Don't

Don't use this for a page's own primary heading - that's PageHeader. PageSection is for organizing content within a page, not identifying the page itself.
Don't give it a title when the section's content already makes its purpose obvious - an unnecessary heading adds visual noise without adding information.