Layout

Wrapper
Storybook

The Wrapper component is a container used to wrap other components and provide them with a common set of styles.

Import

1import { Wrapper } from 'dd360-ds'

1import Wrapper from 'dd360-ds/Wrapper'

Usage

I am a children

1import { Wrapper } from "dd360-ds"
2
3<Wrapper className="bg-blue-500">I am a children</Wrapper>

HasViewportHeight

Sets whether the component should have a viewport height. The default value is "false".

I am a children

1import { Wrapper } from "dd360-ds"
2
3<Wrapper hasViewportHeight className="bg-blue-500">
4I am a children
5</Wrapper>
6

MaxWidth

Defines the maximum width of the component, and can take one of the following values: "max", "min", "none", "0", "sm", "md", "lg", "xl", "2xl", "3xl", "full", "4xl", "5xl", "xs", "7xl", "6xl", "prose", "screen-sm", "screen-md", "screen-lg", "screen-xl", "screen-2xl". By default, it is set to "screen-2xl".

none

full

min

max

screen-sm

screen-md

1import { Wrapper } from "dd360-ds"
2
3<Wrapper maxWidth="none">none</Wrapper>
4<Wrapper maxWidth="sm">sm</Wrapper>
5<Wrapper maxWidth="md">md</Wrapper>
6<Wrapper maxWidth="full">full</Wrapper>
7<Wrapper maxWidth="min">min</Wrapper>
8<Wrapper maxWidth="max">max</Wrapper>
9<Wrapper maxWidth="screen-sm">screen-sm</Wrapper>
10<Wrapper maxWidth="screen-md">screen-md</Wrapper>

API Reference

Name	Types	Default
"maxWidth"	max min none 0 sm md lg xl 2xl 3xl full 4xl 5xl xs 7xl 6xl prose screen-sm screen-md screen-lg screen-xl screen-2xl	screen-2xl
"hasViewportHeight"	boolean	false
"children"	ReactNode	-
"paddingY"	string	10
"paddingX"	string	20
"className"	string	-

SideBar