A layout that balances content with supplementary information through two sidebars, providing a comprehensive view.(Show example/ wireframe)
A focused layout featuring one sidebar for targeted content.(Show example/ wireframe)
A visually immersive layout that spans the entire page width.(Show example/ wireframe)
Each section is defined by two essential properties: flush and width.
The flush property determines the section's width concerning the page size. When set to true, the section stretches from edge to edge, embracing the full available width of the screen. When flush is set to false, it means that the section will have a defined width and won't stretch to the full width of the page. Instead, it will adhere to the values specified by the width property.
The width property refers to a fixed width of the section. Width can be
assigned values like
Flush: When width is set to flush, the section's content spans the entire
width of the screen.
Wide: A wide width occupies a substantial portion of the page's width,
offering more room for content without taking up the full width.
Half: A section set to half width occupies half of the screen's width.
(Embed interactive element to show the different width values. Example:
sliders or toggles to allow readers to dynamically see how different
properties (flush, wide, half, narrow, etc.) affect the appearance of a section
on a page.)
1/3: A section set to 1/3 width occupies about one-third of the screen's
The name of the section should simplify the identification process.
To distinguish different sections, we assign names based on the elements within each section.
For instance, a section with a heading, image, and CTA, as well as a section
with only a heading and image, will carry distinct names. For instance, the
former can be labeled as
h1-with-image-and-1-cta, and the latter can be
referred to as
(Show examples of both sections)
In scenarios where sections share common elements but boast varying alignments or orientations, we utilize a numerical prefix to establish distinct identities.
Here is a practical example:
Imagine two hero sections, each featuring 2 CTAs. In the first, the heading,
subtitle, and CTAs are aligned at the top of the section, followed by the
image. For the second, the hero section showcases the same elements but with a
distinct alignment—headings, subtitles, and CTAs are right-aligned, while the
image is positioned to the left. To facilitate clear identification, we
designate these sections as
respectively. This approach ensures an intuitive and organized system for
A section grid brings multiple sections together in a grid format. These grids act as the foundation for arranging multiple sections in a cohesive and visually appealing manner, typically in a column arrangement.
Section grids can be organized in various ways:
One-column, two-column, three-column, one-third right column, one-third left column, full-width column.(Show Example for each type)