Logotype
JM Admin / Components / Layout
User

Layout

Layout design for the main section of a web page.

Features
  • CSS only, based on grid layout.
  • Grid columns collapses to full width rows (with proper vertical space between) on small screens.
Implementation
  1. Set the class attribute of the <main> tag.
  2. Add child elements to the <main> tag.
Child elements
  • Content: <article>
  • Sidebar: <aside>
  • Navigation: <aside><nav>
  • Header: <section class="header">
  • Badges: <section class="badges">

Alternatives

Header, content, sidebar

Class: header-content-sidebar

Header, sidebar, content

Class: header-sidebar-content

Sidebar, header, content

Class: sidebar-header-content

Header, badges, content, sidebar

Class: header-badges-content-sidebar

Navigation, content Used by this page

Class: navigation-content

Centered content (vertical and horizontal)

Class: centered-content