Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Typography test
  • Avatars
  • Breadcrumbs
  • Cards
  • Image component
  • Main
  • Notes
  • Pagination
  • Progress indicator
  • Quote component
  • Shelves
  • Simple search form
  • Sticky footer
  • Tag list
  • Text component
  • Video component

Main

A few notes on main, which contains the main contents of a web page.

  • There should only be a single instance of main that does not have the hidden attribute applied to it.
  • In Amplify, main uses the same principles as the center layout helper to add some minimum space between its contents and the edges of the parent element or viewport. Inspect this page in your web browser to see it in action.
  • Although it has a set maximum width, the utility class u-full-width can be applied to a child item of main to make it extend full width beyond the borders of main.
© Studio 24