Container

The grand orchestrator of layout harmony. Container is a div that knows its limits, boasting a max-width layout, and effortlessly aligning your content for different screen sizes with grace.

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 { Container, FlexBox } from '@sugarcoat/ui';
2
3 <FlexBox gap='3' justify='center'>
4 <Container
5 css={{
6 bg: 'neutral100',
7 border: "1px solid token(colors.neutral200)"
8 }}>
9 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.
10 </Container>
11 </FlexBox>
12

API Reference

ComponentDescription
Container

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 container, that affects the max-width applied.

The default size map has the following values:
  • xs375px
  • sm640px
  • md768px
  • lg1024px
  • xlg1280px
  • full100%

These values can be customized within your custom theme definition

Customize The Look
Check out these sample themes
Or create your ownBrand color
Accent color
Neutral color
Border radius