Basic page
A standard page shell with all required structural regions.
Every page in the system is this template with different regions filled. Keeping one structure means the skip link, the landmark order, and the focus behavior are identical everywhere — a returning screen reader user never has to relearn the page.
Structure
Single-column layout stacked vertically: header at the top, followed by navigation, then the main content area, an optional feedback region, and the footer at the bottom.
┌──────────────────────────────┐
│ Header │ brand, global actions
├──────────────────────────────┤
│ Navigation │ top nav / breadcrumbs / tabs
├──────────────────────────────┤
│ Main │ <main id="ds-main-content">
│ │
├──────────────────────────────┤
│ Feedback (optional) │ date modified, help, related
├──────────────────────────────┤
│ Footer │ secondary nav, legal
└──────────────────────────────┘
A skip link precedes the header as the first focusable element, targeting #ds-main-content.
Regions
| Region | Required | Purpose | Element |
|---|---|---|---|
| Header | Yes | Brand identity, global navigation | <header> |
| Navigation | Yes | Page-level or section-level wayfinding | <nav aria-label="…"> |
| Content area | Yes | Primary page content | <main id="ds-main-content"> |
| Feedback region | Optional | Date modified, help links, related content | <aside> |
| Footer | Yes | Secondary navigation, legal, contact | <footer> |
Regions are never reordered and never added. A page that appears to need a sixth region is a page whose content belongs inside <main>.
Landmarks and labels
One <main> per page. Each <nav> carries a distinct aria-label — a documentation page with both a section nav and a table of contents has two, and unlabelled they are indistinguishable to a screen reader user.
Usage
Use the basic page template as the default for:
- Content pages
- Documentation pages
- Form pages
- Landing pages (with hero variant)
Shells specialize this template for a purpose — which navigation, which container width, which feedback surface. See Page shells.
Customization
- Content area accepts any combination of components and patterns
- Navigation can be top navigation, side navigation, or breadcrumbs
- Feedback region is optional but recommended
Responsive behavior
| Breakpoint | Layout |
|---|---|
| Mobile (<600px) | Single column, --ds-space-4 edge margin, bottom tab navigation |
| Tablet (600–1023px) | Single column, --ds-space-5 margin |
| Desktop (≥1024px) | Container-constrained, --ds-space-6 margin, navigation may move to a sidebar |
Page-level states
Every page built on this template has four states, and all four fill the same <main> region:
| State | Content |
|---|---|
| Loading | Skeletons matching the final layout — never a blank main |
| Loaded | The page content |
| Empty | An empty state of the correct type |
| Error | An error state with a retry and a statement about what is unchanged |
Header, navigation, and footer render in all four. Chrome that disappears while content loads makes a slow page look like a broken one.
Accessibility
- Skip link is the first focusable element and targets a
tabindex="-1"<main> - One
<h1>per page, naming the page rather than the product - Heading levels are sequential through the content area
- On route change, focus moves to the
<h1>and the document title updates - DOM order matches visual order in every region
Known gaps
- The hero variant for landing pages is referenced but not specified.
- The feedback region has no documented content model.