Box
Agrupa, espaça e posiciona elementos aplicando propriedades visuais e de layout sobre um contêiner.
- Agrupar e delimitar componentes: construir contêineres que agrupam e encerram outros componentes.
- Controlar o espaçamento: ajustar o padding interno e o margin externo de um bloco de conteúdo.
- Definir propriedades visuais: aplicar cor de fundo, borda, raio ou sombra sobre um contêiner.
- Construir layouts: dispor conteúdo com display="flex" ou display="grid", incluindo seu comportamento responsivo.
- Renderizar um elemento semântico: usar a propriedade as (por exemplo nav, section, ul) mantendo a flexibilidade de layout.
As propriedades de tamanho, espaçamento, layout e visuais aceitam tanto um valor único quanto um objeto responsivo com chaves por breakpoint (xs, md, lg, xl, xxl), o que permite adaptar o mesmo contêiner a cada resolução sem duplicar markup.
É também polimórfico: por padrão renderiza uma div, mas a propriedade as permite renderizá-lo como qualquer elemento HTML ou outro componente React, mantendo a flexibilidade de layout e a semântica adequada.
Usar Box como contêiner para controlar espaçamento, fundo, borda e disposição de outros componentes.
Evitar usar Box para substituir componentes com semântica própria como Card, Alert ou Table.
Definir o elemento semântico com a propriedade as (nav, section, ul) quando o contêiner tiver um papel claro.
Box › Box › Box
Evitar aninhar muitos Box apenas para espaçar elementos; controlar o espaçamento com gap em um único Box.
xs
md
Aproveitar o objeto responsivo (xs, md, lg, xl, xxl) para adaptar o layout a cada resolução.
width: 320px
Evitar fixar tamanhos absolutos em pixels quando o contêiner deve se adaptar à largura disponível.
- Semântica com as: por padrão Box renderiza uma div sem papel. Quando o contêiner representa uma região com significado (navegação, lista, seção), definir o elemento correto com as (nav, ul, section) para que a estrutura seja compreensível por leitores de tela.
- Ordem do conteúdo: manter a ordem do DOM coerente com a ordem de leitura, já que propriedades como order ou flexDirection podem reordenar visualmente sem alterar a sequência que os leitores de tela recebem.
Instale o componente via terminal.
npm install @nimbus-ds/componentsimport 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;Propriedades adicionais são repassadas ao elemento <Box>. Consulte a documentação do elemento div para ver a lista de atributos aceitos.
- Layout — Para organizar as regiões principais de uma página em colunas.
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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
flexWrap | 'nowrap' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
display | 'block' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
justifyContent | 'center' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
flexDirection | 'column' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
alignItems | 'baseline' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
alignSelf | 'auto' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
gap | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
gridGap | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
pointerEvents | 'all' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
position | 'absolute' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
overflow | 'auto' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
overflowX | 'auto' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
overflowY | 'auto' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
cursor | 'auto' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
backgroundColor | 'ai-generative-surface' | '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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
color | 'ai-generative-surface' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderRadius | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderWidth | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderTopWidth | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderBottomWidth | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderLeftWidth | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderRightWidth | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderWidthX | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderWidthY | '1' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderColor | 'ai-generative-interactiveHover' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
borderStyle | 'dashed' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
boxSizing | 'border-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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
boxShadow | '0' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
padding | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
paddingTop | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
paddingBottom | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
paddingLeft | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
paddingRight | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
margin | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
marginTop | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
marginBottom | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
marginLeft | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
marginRight | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
transitionTimingFunction | 'ease' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
transitionDuration | 'base' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
zIndex | '100' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
background | 'ai-generative-interactive' | The background property sets the background of the box. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
textDecoration | 'line-through' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
p | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
pl | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
pr | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
pt | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
pb | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
px | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
py | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
paddingX | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
paddingY | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
m | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
mr | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
ml | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
mt | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
mb | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
mx | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
my | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
marginX | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
marginY | '0-5' | 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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' | |
fontSize | '0-5' | '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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
fontWeight | 'bold' | '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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
lineHeight | '0-5' | '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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
textAlign | 'center' | '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", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
scrollbarWidth | 'auto' | The scrollbarWidth property specifies the width of the scrollbar. This is a responsive property and you can have the options below available for you to use. '{ "focus": "value", "focusVisible": "value", "focusWithin": "value", "active": "value", "hover": "value", "disabled": "value", "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.