The Gloss Section component is designed 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.

Layout and Styling Options

Section Style Options

Section Style modifier

Default (white)

Section Style modifier

Muted (grey)

Section Style modifier

Primary (brand red)

Section Style modifier

Secondary (teal/blue)

Section Style modifier

Secondary (dark grey)

Section Style modifier

Gradient

Section Style modifier

Primary light (light red)

Section Style modifier

Secondary light (light teal/blue)

Section Style modifier

Transparent (no background)

Section Size Options

Section Size

Extra Small

Section Size

Small

Section Size

Default (medium)

Section Size

Large

Section Size

Extra Large

Section Size

Remove Padding

Container Width Options

Container Width

Extra Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Container Width

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Container Width

Default (medium)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Container Width

Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Container Width

Expand

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

Usage

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

  • Avoid using clashing background colors that can distract from the content.
  • Don’t overload the Gloss Section with too many components, which can make it look cluttered.
  • Refrain from setting excessively large vertical padding that could waste space.
  • Avoid placing unrelated content within the same Gloss Section, which can confuse readers.
  • Avoid making every section look the same; use the Gloss Section to add variety to your layout.