## Feature Examples ### Structure - description:

Render any kind of content inside of a box. Boxes must include at least one element, and can wrap multiple child elements.

- example: ```jsx Content ; ``` ### Dimensions - description:

Control the component size by setting its width and height in pixels or percentage. The box container size will automatically equal the size of content added inside if these values are not specified.

- example: ```jsx Width 100%, Height 100px Width 50%, Height 50px ; ``` ### Direction - description:

Control the direction in which child elements will be listed inside a box. There are 2 types of directions supported:

  • horizontal lists items in a single row.
  • vertical lists items in a single column. This layout will automatically extend each item to the full width of the box.
    • - example: ```jsx Horizontal Horizontal Horizontal Vertical Vertical Vertical ; ``` ### Gap - description:

    Control the space between elements contained inside a box with gap prop. WSR spacing tokens and values are shown in pixels.

    - example: ```jsx 6px gap 6px gap 6px gap 48px gap 48px gap 48px gap ; ``` ### Horizontal alignment - description:

    Align child elements of an X-axis inside a box with align prop as follows:

  • left
  • center
  • right
  • space-betweendistributes child items evenly.
    • - example: ```jsx Left Center Right Space Between ; ``` ### Vertical alignment - description:

    Align child elements of a Y-axis inside a box with verticalAlign prop as follows:

  • top
  • middle
  • bottom
  • space-between distributes child items evenly.
    • - example: ```jsx Top Middle Bottom Space Between ; ``` ### Padding - description:

    Control the amount of white space around child elements inside a box. Padding can be defined by:

  • padding which defines the amount of white space from all sides.
  • paddingTop, paddingRight, paddingBottom, andpaddingLeft which define the amount of white space from a specific side only.
    • - example: ```jsx Equal padding Different side paddings No padding ; ``` ### Margin - description:

    Control the amount of white space around the box component itself with different properties.

  • Define the amount of space from all sides with margin.
  • Define the amount of space for a specific side only with marginTop, marginRight, marginBottom or marginLeft .
    • - example: ```jsx No margin With margin ; ``` ### Color - description:

    Control the background and text color of a component with:

  • backgroundColor to specify the background fill color.
  • color to specify the text color.

    • Properties include WSR color variables and natively supported values, such as HEX, RGB, etc.

    - example: ```jsx Dark text Light text Light text Light text Dark text ; ``` ### Border - description:

    Control the style of a border with the following properties:

  • border enables a border and sets its width and style. This prop does not include WSR color variable keys.
  • borderColor specifies the border color.
  • borderTopColor, borderRightColor, borderBottomColor, borderLeftColor specifies the border color per edge.
  • borderRadius specifies the corner radius.
    • - example: ```jsx ; ``` ### Inline - description:

    Define how a box behaves as an inline element when placed next to other components.

    - example: ```jsx This is a sentence with an action at the end of it. Add link This is a sentence with an action at the end of it. Add link ; ``` ## Common Use Case Examples ### Content arrangement - description:

    Use a box to arrange elements inside of other components in a desired way.

    - example: ```jsx () => { const options = [ { value: ( Structured data Make your product eligible for rich results in search engines. ), width: '80%', }, { value: ( ), align: 'right', }, ]; return ; }; ``` ### List item - description:

    A combination of boxes can be used to construct custom widgets and list items.

    - example: ```jsx () => ( Get running! Scheduled for April 26, 2021 Public Join for Free ); ```