Layout

Landmarks & section

Structure your pages with semantic landmarks and sections for better accessibility and graceful spacings.

<header>, <main> and <footer> as direct children of <body> provide a responsive vertical padding

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Root container#

If you need to customize the default root container for <header>, <main>, and <footer>, you can recompile Pico with another CSS selector.

Useful for React, Gatsby, or Next.js.

/* Custom Class-less version for React */
@use "pico" with (
  
  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "#root",
  
  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: true,

  // Enable .classes
  $enable-classes: false
)

The code above will compile Pico with the containers defined like this:

/* Containers */
#root > header,
#root > main,
#root > footer {
  ...
}

Learn more about compiling a custom version of Pico with SASS.

Section#

<section> provides a responsive margin-bottom to separate your sections.

Edit this page on GitHub