box inset example box between example
### Spacing levels The spacing system defines 8 levels of spacing. Levels `4` and above are always responsive by default, as detailed below:
box spacing levels example
| Level | Default value | Value in viewports greater or equal to `768px` | | ----- | ------------: | ---------------------------------------------: | | 1 | 0.25rem (4px) | _unchanged_ | | 2 | 0.5rem (8px) | _unchanged_ | | 3 | 1rem (16px) | _unchanged_ | | 4 | 1.5rem (24px) | 2rem (32px) | | 5 | 2rem (32px) | 3rem (48px) | | 6 | 2.5rem (40px) | 4rem (64px) | | 7 | 3rem (48px) | 4.5rem (72px) | | 8 | 4rem (64px) | 6rem (96px) | ### Recommended usage - Use levels `1`-`3` to space inline content, such as [Typography](#/Typography), [Buttons](#/Forms?id=button), or [Icons](#/Icons) - Use levels `4`-`8` to space block content, such as [Cards](#/Content?id=card) or [Dividers](#/Layout?id=section-dividers) - Use levels `5`, `7`, and `8` to vertically stack full-width Blocks This annotated example highlights the different `Box` properties and sizes used to create the spacing in a `Card`.
box annotated example
These examples showcase all of the `Box` properties working together to control both inset (padding) and stacking (margin). Note the compositional nature of `Box`. Use multiple Boxes to achieve complex layouts. ```jsx Mobile internet plans Take your business out of the office. All across Canada businesses use TELUS mobile phones to go where their customers are and stay connected. Bundle and save Save up to $200 on any new Smartphone when you add TELUS Mobility to your TELUS PureFibre home services account. Learn more ``` ```jsx Phones | Pre-Owned | Prepaid | Sale ``` ### Responsiveness The `Box` component is also capable of setting certain box sizes at specific viewport breakpoints. Designers should use best practices and recommended spacing if the current behaviour of `Box` levels does not solve a design's needs. In the following example, resize your browser window to see different `Box` sizing at different viewport widths: ```jsx { "props": { "className": "docs_box-coloring" } } ``` This will do the following: - Padding on all sides will increase as the viewport size increases to take advantage of the extra space - Spacing between the buttons will increase as the viewport size increases to make things look less dense on larger screens - Below the `lg` viewport (≤992px), `inline` will be set to `false`, making the buttons stack. On `lg` and larger, the buttons will appear side to side To learn more about responsive props see [`@tds/util-prop-types`](#/Utilities?id=section-proptypes). The following `Box` props support responsive props: `vertical`, `horizontal`, `inset`, `between`, `inline`, and `below`. ### Using space-between This prop implements `justify-content: space-between;` in CSS. With `space-between`, the space is dynamically determined based on the size of the box, and the elements inside are distributed evenly from the start to the end. #### Without space-between ```jsx This is the first line This is the second line This is the third line This first line is much larger than the others to demonstrate the effects of space-between This is the second line This is the third line This is the first line This is the second line This is the third line ``` #### With space-between ```jsx This is the first line This is the second line This is the third line This first line is much larger than the others to demonstrate the effects of space-between This is the second line. This is the third line This is the first line This is the second line This is the third line ``` Use `space-between` to space elements inside of `Box` evenly, dynamically fitted to the `Box`'s size. ### Below ```jsx { "props": { "className": "docs_full-width-playground docs_full-width-footer" } }
Mobile internet plans Take your business out of the office. All across Canada businesses use TELUS mobile phones to go where their customers are and stay connected. Learn more
About us Accessibility Careers Support Contact Us Neighbourhood TELUS & CRTC Internet Code Internet Code, SimplifiedAccessibility TELUS & CRTC Wireless Code TELUS Digital TELUS International TELUS Partner Solutions
```