Page layout

Instate a standard page layout by wrapping a skip link, Language component, Header, a main content area, and a Footer in a <div> with class="ds-page" directly inside the <body> element.

<body>
  <div class="ds-page">
    <a class="ds-skip-link" href="#main">skip to content</a>
    <aside class"ds-language">...</aside>
    <header class="ds-header">...</header>
    <main id="main" tabindex="-1" class="ds-stack">...</main>
    <footer class="ds-footer">...</footer>
  </div>
</body>

Notes

The Header component’s prescribed markup includes a skip link, so don’t implement one separately.
For the skip link to work reliably in all browsers, the <main> element needs id="main" and tabindex="-1".
The <main> element needs class="ds-stack" (see Stack) to insert margin between all the flow elements. For dealing with flow content, see Composing content.