Page Header

A top region that introduces a page, document, section, or template.

When To Use

Use	Avoid
A top region that introduces a page, document, section, or template.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use layout sections to create predictable page regions and reusable responsive structure.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<header class="lds-page-header">
  <nav class="lds-breadcrumb" aria-label="Breadcrumb">
    <a href="/">Home</a>
    <span aria-hidden="true">/</span>
    <span>Events</span>
  </nav>
  <h1>Community planting day</h1>
  <p class="lds-type-lead">Join the group to restore habitat along the creek corridor.</p>
</header>

Class Reference

Class	Use
`.lds-page-header`	Styles a quiet Markdoc-style page introduction with breadcrumb, title, and lead text.
`.lds-breadcrumb`	Styles breadcrumb trails as eyebrow/metadata wayfinding text.
`.lds-type-lead`	Use as part of the Landcare component CSS layer.

Review Notes

Web

Use layout sections to create predictable page regions and reusable responsive structure.

Print

Use layout sections as reusable page, flyer, report, slide, and signage regions with consistent margins and hierarchy.

States And Variants

Document compact, spacious, image-led, text-led, and repeated-section variants.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.