Gloss Section

The Gloss Section component is one of the fundamental building blocks of our design system. It's purpose is to serve as a flexible layout element for organizing and containing other components within your web pages. Its primary purpose is to provide a customizable container that enhances the structure and visual hierarchy of your content. Authors can adjust the background color to complement their design, modify the vertical padding to control spacing, and set the width of the inner content for optimal readability and alignment. This component is particularly useful for creating distinct sections, improving content presentation, and maintaining a consistent layout throughout your site.

View on Github

Options and Variations

Background Color

There are a number of background colors that can be applied to the gloss section. The main purpose of this is to visually crate individual content sections as a user scrolls down the page. Alternating white and grey sections are the preferred aesthetic so not to distract from the main content on the page. However Gloss does offer a number of alternative colors for sections that require special attention or are important to highlight.

Default (white)

Primary (brand red)

Secondary (dark grey)

Primary light (light red)

Transparent (no background)

Muted (grey)

Secondary (teal/blue)

Gradient

Secondary light (light teal/blue)

Section Size (Height)

The Gloss section includes the options to adjust the padding above and below the contents inside the container. The default sets the preferred padding though there are also options for removing the padding completely, small, large, and extra large. This allows consistent spacing between sections throughout the page.

Remove Padding

Extra Small

Small

Default (medium)

Large

Extra Large

Container Width

The with of the container can be adjusted to best suit the contents of the Gloss section. While the default  options works well for housing other components like cards ot large images, it is often preferable to adjust the with to a smaller size when adding large blocks of text. The width options include: extra small, small, default (medium), large and extra large.

Extra Small

This is a Gloss section with the container width set to extra small. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Small

This is a Gloss section with the container width set to small. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Default (Medium)

This is a Gloss section with the container width set to default (medium). Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large

This is a Gloss section with the container width set to large. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Expanded (Full Width)

This is a Gloss section with the container width set to expanded (Full Width). Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Do...

  • Ensure the background color complements the overall design of your webpage.
  • Adjust the vertical padding to provide adequate spacing around the content.
  • Set the width of the inner content to enhance readability and alignment.
  • Combine the Gloss Section with other layout components to build complex designs.
  • Take advantage of the customizable options to highlight important content or calls to action.
  • Utilize the Gloss Section to separate different types of content, making your page easier to navigate.

Don't...

  • Use clashing background colors that can distract from the content.
  • Overload the Gloss Section with too many components, which can make it look cluttered.
  • Set excessively large vertical padding that could waste space.
  • Place unrelated content within the same Gloss Section, which can confuse readers.
  • Make every section look the same; use the Gloss Section to add variety to your layout.