Section

The chapter marker of your layout. Section is a versatile container that groups related content together, creating a structured and coherent narrative throughout your webpage. It’s perfect for segmenting different topics or features with style.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec diam sit amet lacus tincidunt facilisis. Sed nulla arcu, interdum a tortor et, bibendum sagittis nulla. Phasellus vel pulvinar dolor, non elementum dolor. Etiam accumsan nisl a ultrices iaculis. Morbi non lectus nulla. Sed non dui vel massa auctor bibendum. Quisque aliquet, magna in elementum aliquam, turpis nisi sodales ligula, quis lacinia erat ipsum in orci. Vivamus ut mauris vel eros maximus vehicula non sit amet dolor. Ut ornare nunc quis nibh maximus, id dapibus ligula posuere. Vestibulum id tempus felis. Sed eget mi non quam hendrerit luctus vitae a turpis. Integer eget elementum dui, nec aliquet ex.

1  import { Section, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' justify='center'>
4    <Section
5      container
6      css={{
7        bg: '$slateGrey000',
8        border: "1px solid $slateGrey100"
9      }}>
10      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec diam sit amet lacus tincidunt facilisis. Sed nulla arcu, interdum a tortor et, bibendum sagittis nulla. Phasellus vel pulvinar dolor, non elementum dolor. Etiam accumsan nisl a ultrices iaculis. Morbi non lectus nulla. Sed non dui vel massa auctor bibendum. Quisque aliquet, magna in elementum aliquam, turpis nisi sodales ligula, quis lacinia erat ipsum in orci. Vivamus ut mauris vel eros maximus vehicula non sit amet dolor. Ut ornare nunc quis nibh maximus, id dapibus ligula posuere. Vestibulum id tempus felis. Sed eget mi non quam hendrerit luctus vitae a turpis. Integer eget elementum dui, nec aliquet ex.
11    </Section>
12  </FlexBox>
13

API Reference

Component	Description
Section	The decision maker. The small clickable box that lets users toggle between choices, perfect for when you need to pick any number of options from a set.

Component Properties

Container

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the wrapper, that adds horizontal padding to the `section` element
`container`	`boolean`	false	When true, it wraps the Section within a Container component and it uses the size property for both.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius