Skip to main content

PageHeader

PageHeader

Hero and page title component with multiple variants

Tags: component layout typography

View Demo

PageHeader provides a flexible component for page titles and hero sections with multiple styling variants.

Import​

<script>
  import { PageHeader } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<PageHeader title="Welcome" subtitle="Get started with our platform" />

Props​

Prop Type Default Description
title string required Main title text
subtitle string - Optional subtitle
variant 'default' | 'hero' | 'centered' | 'form' 'default' Visual variant
as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' 'h1' Heading element
class string - Additional classes
actions Snippet - Action buttons

Variants​

Default​

Standard page header:

<PageHeader title="Dashboard" subtitle="Welcome back, John" />

Hero​

Bold, uppercase styling for landing pages:

<PageHeader
  title="Build Something Great"
  subtitle="The modern way to create applications"
  variant="hero"
/>

Centered​

Centered text for content pages:

<PageHeader
  title="About Us"
  subtitle="Learn more about our mission and values"
  variant="centered"
/>

Form​

Light, centered styling for form pages:

<PageHeader title="Create Account" subtitle="Join thousands of users today" variant="form" />

With Actions​

Add call-to-action buttons:

<PageHeader title="Projects" subtitle="Manage your active projects">
  {#snippet actions()}
    <Button>New Project</Button>
    <Button variant="outline">Import</Button>
  {/snippet}
</PageHeader>

Variant Comparison​

Variant Title Style Subtitle Style Alignment
default theme scale for as (h1: text-h1) lg, muted left
hero 5xl, black, uppercase lg, serif italic left
centered theme scale for as (h1: text-h1) xl, max-w-2xl center
form 3xl-4xl, light base-lg, gray center

Examples​

Landing Page Hero​

<section class="py-24 bg-gradient-to-b from-primary/5 to-background">
  <div class="container mx-auto px-4">
    <PageHeader
      title="Ship Faster"
      subtitle="The complete toolkit for modern web development"
      variant="hero"
    >
      {#snippet actions()}
        <Button size="lg">Get Started Free</Button>
        <Button size="lg" variant="outline">View Demo</Button>
      {/snippet}
    </PageHeader>
  </div>
</section>

Dashboard Page​

<PageHeader title="Analytics" subtitle="Track your performance metrics">
  {#snippet actions()}
    <Button variant="outline">Export</Button>
    <Button>Add Widget</Button>
  {/snippet}
</PageHeader>

Content Page​

<div class="py-16">
  <PageHeader
    title="Documentation"
    subtitle="Everything you need to build amazing applications with our component library."
    variant="centered"
  >
    {#snippet actions()}
      <Button>Get Started</Button>
      <Button variant="outline">Browse Components</Button>
    {/snippet}
  </PageHeader>
</div>

Form Page​

<PageHeader
  title="Contact Us"
  subtitle="Fill out the form below and we'll get back to you within 24 hours."
  variant="form"
/>

<form class="max-w-md mx-auto mt-8">
  <!-- Form fields -->
</form>

Settings Page​

<PageHeader
  title="Account Settings"
  subtitle="Manage your account preferences and security settings"
>
  {#snippet actions()}
    <Button variant="outline">Cancel</Button>
    <Button>Save Changes</Button>
  {/snippet}
</PageHeader>

<Separator class="my-6" />

<div class="space-y-6">
  <Section title="Profile">...</Section>
  <Section title="Security">...</Section>
</div>

Blog Post​

<article>
  <PageHeader
    title="Getting Started with Svelte 5"
    subtitle="Learn the fundamentals of Svelte's new runes system"
    variant="centered"
  />

  <div class="prose mx-auto mt-8">
    <!-- Article content -->
  </div>
</article>

Typography Tokens​

PageHeader uses design system typography:

  • Default / centered title: the theme heading scale for the rendered level, set explicitly - font-serif italic text-h1 for as="h1" (Spectral 500 italic, 2.5rem / 2rem), font-sans text-h2 … text-h6 (Figtree 600) for the rest. The classes are on the element rather than inherited from the bare h1 style because Tailwind preflight resets heading size and weight in consumer apps (see Theming).
  • Hero title: text-5xl font-black uppercase tracking-tight
  • Form title: text-3xl md:text-4xl font-light tracking-tight

Accessibility​

  • Title renders as h1
  • Clear visual hierarchy
  • Actions are properly grouped
  • Semantic markup
On this page