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
Default (white)
Muted (grey)
Primary (brand red)
Secondary (teal/blue)
Secondary (dark grey)
Gradient
Primary light (light red)
Secondary light (light teal/blue)
Transparent (no background)
Section Size Options
Extra Small
Small
Default (medium)
Large
Extra Large
Remove Padding
Container Width Options
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.
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.
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.
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.
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.