Box

4.2.0

O componente Box nos permite agrupar e espaçar elementos ou outros componentes.

Default

Responsive

import React from "react";
import { Box } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Box
    borderColor="neutral-interactive"
    borderRadius="2"
    borderStyle="dashed"
    borderWidth="2"
    height="5rem"
    width="12rem"
  />
);

export default Example;

Anatomia do componente

O componente é composto por uma container com múltiplas propriedades visuais e de posicionamento.

Guidelines

Utilizamos esse componente para agrupar outros componentes, delimitar tamanhos e posicionamentos, controlar propriedades visuais e de espaçamento.

Controle visual

É possível controlar os aspectos visuais do box, modificando a cor de background, espessura, radius, estilo e cor da borda. O componente também possui um controle visual responsivo, que possibilita a definição de propriedades visuais diferentes para distintas resolução.

Controle de posicionamento

Também é possível controlar os espaçamentos internos (paddings) e os espaçamentos externos (margens) em relação a elementos que estão ao redor.

Recomendações de uso

Construir containers
Agrupar componentes
Personalizar fundos e bordas
Posicionar componentes

Suporte polimórfico

Esse componente pode ser renderizado como qualquer elemento HTML ou componente React, usando a propriedade as. Essa funcção permite construir diferentes elementos aproveitando a flexibilidade do componente Box e mantendo um bom nível de semántica HTML.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/box

Abreviações de propriedades

As propriedades do componente contam com abreviações para facilitar o seu uso, elas são aplicáveis sobre paddings, margins e seus posicionamentos. * m = margin * p = padding * r = right * l = left * t = top * b = bottom * x = left e right * y = top e bottom

Exemplos de uso:
* ml = marginLeft * pb = paddingBottom * py = paddingY * mx = marginX

Props

Additional props are passed to the <Box> element. See div docs for a list of props accepted by the <Box> element.

Box

Name	Type	Default	Description
children	React.ReactNode		Element to be rendered inside the Box component.
width	string		The width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
height	string		The height property specifies the height of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
maxWidth	string		The max width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
maxHeight	string		The max height property specifies the height of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
minWidth	string		The min width property specifies the width of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
minHeight	string		The min height property specifies the height of a box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
bottom	string		The bottom property participates in setting the vertical position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
left	string		The left property participates in specifying the horizontal position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
right	string		The right property participates in specifying the horizontal position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
top	string		The top property participates in setting the vertical position of a positioned box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
flex	string		This is the shorthand for flexGrow, flexShrink and flexBasis combined. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
flexShrink	string		This defines the ability for a flex item to shrink if necessary. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
flexGrow	string		This defines the ability for a flex item to grow if necessary. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
flexWrap	'nowrap' 'wrap' 'wrap-reverse'		The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
order	string		The order property controls the order in which they appear in a flex container. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
gridTemplateColumns	string		The gridTemplateColumns property defines the line names and track sizing functions of the grid columns. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
gridTemplateAreas	string		The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
gridTemplateRows	string		The gridTemplateRows property defines the line names and track sizing functions of the grid rows. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
gridArea	string		The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
display	'block' 'flex' 'grid' 'inline-flex' 'inline-grid' 'none'		The display property sets whether an box is treated as a block or inline element and the layout used for its children, such as grid or flex. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
justifyContent	'center' 'flex-end' 'flex-start' 'space-around' 'space-between' 'space-evenly'		The justifyContent property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
flexDirection	'column' 'column-reverse' 'row' 'row-reverse'		The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
alignItems	'baseline' 'center' 'flex-end' 'flex-start' 'stretch'		The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
alignSelf	'auto' 'baseline' 'center' 'flex-end' 'flex-start' 'stretch'		The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
gap	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
gridGap	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
pointerEvents	'all' 'auto' 'fill' 'inherit' 'none' 'painted' 'stroke' 'visible' 'visibleFill' 'visiblePainted' 'visibleStroke'		The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
position	'absolute' 'fixed' 'relative' 'static' 'sticky'		The position property sets how an box is positioned in a document. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
overflow	'auto' 'hidden' 'scroll' 'visible'		The overflow shorthand property sets the desired behavior for an box's overflow. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
overflowX	'auto' 'hidden' 'scroll' 'visible'		The overflow-x property sets what shows when content overflows a block-level box's left and right edges. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
overflowY	'auto' 'hidden' 'scroll' 'visible'		The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
cursor	'auto' 'grab' 'inherit' 'not-allowed' 'pointer'		The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
backgroundColor	'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'danger-textLow' 'neutral-background' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'neutral-textLow' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'primary-textLow' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'success-textLow' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight' 'warning-textLow'	'neutral-background'	The backgroundColor property sets the background color of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
color	'currentColor' 'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'danger-textLow' 'neutral-background' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'neutral-textLow' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'primary-textLow' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'success-textLow' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight' 'warning-textLow'		The color property is used to set the color of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderRadius	'0-5' '1' '2' '3' '4' '5' '6' 'base' 'full' 'half' 'none'		The borderRadius property rounds the corners of an box's outer border edge. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderWidth	'1' '2' '3' '4' '5' 'none'		The borderWidth property sets the width of an box's border. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderTopWidth	'1' '2' '3' '4' '5' 'none'		The borderTopWidth property defines the width of the border at the top of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderBottomWidth	'1' '2' '3' '4' '5' 'none'		The borderBottomWidth property defines the width of the border at the bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderLeftWidth	'1' '2' '3' '4' '5' 'none'		The borderLeftWidth property defines the width of the border at the left of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderRightWidth	'1' '2' '3' '4' '5' 'none'		The borderRightWidth property defines the width of the border at the right of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderWidthX	'1' '2' '3' '4' '5' 'none'		The borderWidthX shorthand property defines the width of the element's border on the left and right. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderWidthY	'1' '2' '3' '4' '5' 'none'		The borderWidthY shorthand property defines the width of the element's border on the top and bottom. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderColor	'danger-interactive' 'danger-surface' 'danger-surfaceHighlight' 'neutral-interactive' 'neutral-surface' 'neutral-surfaceDisabled' 'neutral-surfaceHighlight' 'primary-interactive' 'primary-surface' 'primary-surfaceHighlight' 'success-interactive' 'success-surface' 'success-surfaceHighlight' 'transparent' 'warning-interactive' 'warning-surface' 'warning-surfaceHighlight'		The borderColor property sets the color of the box's four borders. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
borderStyle	'dashed' 'dotted' 'hidden' 'none' 'solid'		borderStyle property sets the line style for all four sides of an box's border. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
boxSizing	'border-box' 'content-box'	'border-box'	The boxSizing property sets how the total width and height of an box is calculated. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
boxShadow	'0' '1' '2' '3' '4' '5' 'focusRing'		The boxShadow property adds shadow effects around an box's frame. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
padding	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The padding properties are used to generate space around an box's content area. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
paddingTop	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The paddingTop property sets the height of the padding area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
paddingBottom	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The paddingBottom property sets the height of the padding area on the bottom of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
paddingLeft	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The paddingLeft property sets the width of the padding area to the left of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
paddingRight	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The paddingLeft property sets the width of the padding area to the right of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
margin	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The margin shorthand property sets the margin area on all four sides of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
marginTop	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginTop property sets the margin area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
marginBottom	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginBottom property sets the margin area on the bottom of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
marginLeft	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginLeft property sets the margin area on the left side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
marginRight	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginRight property sets the margin area on the right side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
transitionTimingFunction	'ease' 'ease-in' 'ease-in-out' 'ease-out' 'linear' 'step-end' 'step-start'		The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
transitionProperty	string		The transitionProperty property sets the CSS properties to which a transition effect should be applied. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
transitionDelay	string		The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
transitionDuration	'base' 'fast' 'slow' 'slower'		The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
zIndex	'100' '200' '300' '400' '500' '600' '700' '800' '900'		The zIndex property specifies the stack order of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
backgroundImage	string		The backgroundImage property sets one or more background images on an element. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
backgroundPosition	string		The backgroundPosition property sets the initial position for each background image. The position is relative to the position layer set by background-origin. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
backgroundBlendMode	string		The backgroundBlendMode property sets how an element's background images should blend with each other and with the element's background color. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
backgroundRepeat	string		The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
textDecoration	'line-through' 'none' 'underline'		The textDecoration shorthand property sets the appearance of decorative lines on text. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
backgroundSize	string		The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
p	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The p shorthand property sets the margin area on all four sides of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
pl	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The pl shorthand property sets the width of the padding area to the left of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
pr	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The pl shorthand property sets the width of the padding area to the right of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
pt	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The pt shorthand property sets the height of the padding area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
pb	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The pb shorthand property sets the height of the padding area on the botton of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
px	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The px shorthand property defines the width of the left and right padding area of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
py	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The py pt shorthand property sets the height of the padding area at the top and bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
paddingX	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The paddingX shorthand property defines the width of the left and right padding area of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
paddingY	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'none'		The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
m	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The m shorthand property sets the margin area on all four sides of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
mr	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The mr property sets the margin area on the right side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
ml	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The ml property sets the margin area on the left side of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
mt	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The mt property sets the margin area on the top of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
mb	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginBottom property sets the margin area on the bottom of an box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
mx	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The mx property defines the margin area on the left and right side of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
my	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The my property defines the margin area on the top and bottom of a box This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
marginX	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginX property defines the margin area on the left and right side of a box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
marginY	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'auto' 'none'		The marginY property defines the margin area on the top and bottom of a box This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
fontSize	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'h1' 'h2' 'h3' 'h4' 'h5' 'h6'	'base'	The fontSize property sets the size of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
fontWeight	'bold' 'medium' 'regular'	'regular'	The fontWeight property sets how thick or thin characters in box should be displayed. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
lineHeight	'0-5' '1' '1-5' '10' '11' '12' '14' '16' '18' '2' '2-5' '20' '3' '3-5' '4' '4-5' '5' '6' '7' '8' '9' 'h1' 'h2' 'h3' 'h4' 'h5' 'h6'	'base'	The lineHeight property specifies the line height of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'
textAlign	'center' 'justify' 'left' 'right'	'left'	The textAlign property specifies the horizontal alignment of box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value" }'