Standard Section
Use the Standard Section to wrap major sections of the page, to provide margin at the bottom of that major section, so that its contents do not run up against the section that follows it. For instance, it might be used to wrap a page's hero so that the hero doesn't touch the content that follows it.
Standard Section adds 32 pixels of margin at the bottom. You can also pick the "mini" option, which will give you 16 pixels instead.
Standard Section adds 32 pixels of margin at the bottom. You can also pick the "mini" option, which will give you 16 pixels instead.
<><StandardSection>Some content in the first section</StandardSection><StandardSection gutterBottom="mini">Some content in the second section</StandardSection><StandardSection>Some content in the third section</StandardSection></>
<section class="standard-section">Some content in the first section</section><section class="standard-section standard-section-mini">Some content in the second section</section><section class="standard-section">Some content in the third section</section>
Components
StandardSection
| Prop | Type | Default | Description |
|---|---|---|---|
| gutterBottom | "standard" | "mini" | standard | Mini sections have less bottom margin |
All other props are forwarded to the element specified in thecomponentprop(default: <div/>)
Guidelines
Designer Guidelines
Standard Section is intended to wrap major sections of the page, and should not be used to adjust spacing for smaller page elements. (Using it improperly can cause a accessibility issues for some assistive devices.)
Some components may have their own bottom margin or spacing, which may interact with the Standard Section's bottom margin.
Developer Guidelines
Standard Section is intended to wrap major sections of the page. If you just need to add some spacing around an element, use the Spacing system instead.
Accessibility Guidelines
Assistive technologies such as screen readers construct a document outline based on the HTML for the page. Therefore, only use Standard Section for major sections of the page, or the page may be presented incorrectly to assistive technologies.