Box

Ready

There are different ways to organise the content on the webpage to facilitate the user according to his nature of interaction with the content like forms, tables, lists etc. One of the best ways to organize the webpage is by using groups of related content, this can be achieved by using a dedicated Box component.

Code

Usage

Specifications

Props

warning

The padding prop has been deprecated. Consider using layout components like the Inset for the same purpose.

Name	Default	Description
shadowDepth: 0 \| 1 \| 2	`2`	The size of the shadow to be displayed around the box.
display: string	`'inline-flex'`	Changes the display CSS property of the box div.
children: node		Custom content that will be placed in the box component.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
padding: string \| object		Deprecated Size of the padding to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
size: string	`'fitContent'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fillParent'\| 'fitContent').

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcBox shadowDepth={1}>
        <DxcInset space="2rem">Personal information</DxcInset>
      </DxcBox>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcBox shadowDepth={1}>
        <DxcInset space="2rem">Personal information</DxcInset>
      </DxcBox>
    </DxcInset>
  );
}

Props
Examples
- Basic usage

Edit this page on GitHub

Bleed

NextBulleted List

Box

Props

Examples

Basic usage

Contents