Overview
The Layout component organizes page content in a variety of structural ways. It spans the full browser width and supports three background color options.
Elements
- Container heading (optional): Displays a title for the section.
- Container text (optional): Displays brief supporting description, such as a tagline or short instructions.
- Anchor ID (optional): Allows you to assign a name to the layout container so it can be used as a named anchor, enabling direct links to this area. Names should be single or hyphenated words. - do not put spaces between words.
- Layout: Controls how components within the container is arranged:
- Grid: Displays components in two to four columns.
- List: Displays components stacked vertically in a single column.
- Split 1/3: Displays two columns—the first takes up one-third of the width, and the second takes up two-thirds.
- Split 2/3: Displays two columns—the first takes up two-thirds of the width, and the second takes up one-third.
- Grid Columns: Determines the number of columns when the layout is set to Grid.
- Theme: Sets the background color for the component. Options include White, Light Gray, and Blue.
When to use it
- To organize content and components using defined layout structures.
- To create a contrasting section that draws visual interest or breaks up a long page.
- To build multi-column layouts on a page.
Best Practices
- Keep container text short: Do not use container text for long paragraphs. It is intended only for brief taglines or instructions—use a standard Text component for main body copy.
- Avoid visual clutter: Use background colors and layout containers intentionally. Overusing multiple colors or stacked containers can make a page feel chaotic.
- Use only when needed: Basic body text does not need to be wrapped in a Layout component unless you specifically require a colored background section or multiple columns.
