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


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> provides a responsive margin-bottom to separate your sections.