Layout
Container
Storybook
Container
Storybook
The Container component is used to wrap content and apply various styling options like shadows and rounded corners.
Import
1import { Container } from 'dd360-ds'1import Container from 'dd360-ds/Layout/Container'Usage
I am a children
1import { Container } from 'dd360-ds'
2
3<Container>I am a children</Container>Shadow
Used to apply different shadow styles to the container. Options include none, sm, md, lg, xl, and inner.
none
sm
md
lg
xl
inner
1import { Container } from "dd360-ds"
2
3<Container shadow="none">none</Container>
4<Container shadow="sm">sm</Container>
5<Container shadow="md">md</Container>
6<Container shadow="lg">lg</Container>
7<Container shadow="xl">xl</Container>
8<Container shadow="inner">inner</Container>Rounded
Used to apply different rounded corner styles to the container. Options include rounded, none, sm, md, lg, xl, 2xl, 3xl, and full.
rounded
none
sm
md
lg
xl
2xl
3xl
full
1import { Container } from "dd360-ds"
2
3<Container rounded="rounded">rounded</Container>
4<Container rounded="none">none</Container>
5<Container rounded="sm">sm</Container>
6<Container rounded="md">md</Container>
7<Container rounded="lg">lg</Container>
8<Container rounded="xl">xl</Container>
9<Container rounded="2xl">2xl</Container>
10<Container rounded="3xl">3xl</Container>
11<Container rounded="full">full</Container>API Reference
| Name | Types | Default |
|---|---|---|
| "children" | ReactNode | - |
| "shadow" | none sm md lg xl inner | - |
| "rounded" | rounded none sm md lg xl 2xl 3xl full | - |
| "className" | string | - |