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, Flex } from '@haktos/sugarcoat-ui';
2
3 <Flex 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 </Flex>
13

API Reference

ComponentDescription
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
PropTypeDefaultExplanation
sizestringmd

The size of the wrapper, that adds horizontal padding to the section element

containerbooleanfalse

When true, it wraps the Section within a Container component and it uses the size property for both.