- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
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';23 <Flex gap='3' justify='center'>4 <Section5 container6 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
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 |
container | boolean | false | When true, it wraps the Section within a Container component and it uses the size property for both. |