Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelogApp ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbarAnchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree ViewAccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual ListActivity HeatmapAnimated NumberBadgeBar ListChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveformBlockquoteCode BlockCode GroupGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriterButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerField ListFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree SelectAlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UIARC Radiant Components
v4.9DocsComponentsTokensSynthesizer
Getting StartedFrameworksServer RenderingDesign TokensThemingTheme SynthesizerTypographyUtilitiesAll ComponentsAccessibilityBrowser SupportChangelogContributingStatsApp ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbarAnchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree ViewAccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual ListActivity HeatmapAnimated NumberBadgeBar ListChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveformBlockquoteCode BlockCode GroupGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriterButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerField ListFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree SelectAlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

Page Header

Page title area with positional slots for composing breadcrumbs, actions, tabs, or any content around a heading and description.

ComponentsPage Header
layoutstatic
<arc-page-header>

Overview

PageHeader is the topmost landmark on a content page. It combines a heading, an optional description, and four positional slots into one layout. Use it on every settings screen, detail view, and dashboard so users always know where they are and what they can do. The component exposes four positional slots: `above` (renders above the heading row), `aside` (renders to the right of the heading), `below` (renders between the description and default content), and the default slot (renders at the bottom). The slots don't dictate content: put breadcrumbs in `above`, action buttons in `aside`, a tab strip in `below`, or use them for anything else your layout requires. Because PageHeader renders a semantic `<h1>` for its heading, it establishes the document outline automatically. The `border` prop adds a bottom border when you want a visual separator from the page body below.

Guidelines

When to use

  • Use one PageHeader per page to maintain a single <h1> document landmark
  • Always populate the heading prop: it is the primary orientation cue for the page
  • Place breadcrumbs in the above slot on pages more than one level deep
  • Put the primary page-level action in the aside slot (e.g. "Invite Member", "Create Report")
  • Keep the description to one or two short sentences that clarify what the page contains
  • Use the below slot for tab strips or secondary controls between the heading and main content

When not to use

  • Do not nest multiple PageHeaders on the same page: this creates duplicate <h1> elements and confuses assistive technology
  • Do not use PageHeader as a section divider inside a scrolling page; use Section or Divider instead
  • Do not overload the aside slot with more than two or three buttons; move overflow actions into a DropdownMenu
  • Do not place lengthy paragraph text in the description; keep it concise and scannable
  • Do not hard-code colors or font sizes on slotted children; rely on the token system for consistency

Features

  • Semantic <h1> heading that establishes the document outline
  • Four positional slots: above, aside, below, and default content
  • Optional description text for additional page context
  • Border prop for optional bottom border separator
  • Responsive title row that wraps on narrow viewports
  • CSS custom property theming via design tokens
  • Shadow DOM parts (base, above, title-row, heading, aside, description, below, content) for targeted styling

Preview

Home Settings Team Invite Member

Usage

<arc-page-header heading="Team Settings" description="Manage roles, permissions, and invitations for your team." border>
  <arc-breadcrumb slot="above">
    <arc-breadcrumb-item href="/">Home</arc-breadcrumb-item>
    <arc-breadcrumb-item href="/settings">Settings</arc-breadcrumb-item>
    <arc-breadcrumb-item>Team</arc-breadcrumb-item>
  </arc-breadcrumb>
  <arc-button slot="aside" variant="primary" size="sm">Invite Member</arc-button>
</arc-page-header>

API

headingstring''
The page title rendered as an <h1>. This is the primary text landmark and should clearly describe the current page or view (e.g. "Team Settings", "Order #4021"). Keep it concise: two to five words is ideal.
descriptionstring''
Optional supporting text displayed below the title row. Use it to provide a one-line summary of what the page contains or what action the user should take. When empty, the description paragraph is not rendered.
borderbooleanfalse
When set, renders a subtle bottom border below the header to visually separate it from page content.

See Also

ARC UI

Components that glow.One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy