Size

The size scale helps maintain consistent sizing of elements. This scale applies primarily to width and height.

25 / 4px

50 / 8px

75 / 12px

100 / 16px

150 / 20px

200 / 24px

300 / 32px

350 / 40px

375 / 44px

400 / 48px

500 / 64px

525 / 80px

600 / 128px

700 / 256px

750 / 384px

800 / 512px

850 / 768px

900 / 1024px

Usage

React

See the style props documentation for the complete list of style props that use the size scale.

live

<div className="example-size">
  <Box width="100" />
  <Box width="200" />
  <Box width="300" />
  <Box width="400" />
  <Box width="500" />
  <Box width="525" />
  <Box width="600" />
  <Box width="700" />
  <Box width="800" />
  <Box width="900" />
</div>

Bootstrap

Use the sizing utilities to apply system sizing such as width, height etc.

live

<div class="example-size">
  <div class="w-size-100"></div>
  <div class="w-size-200"></div>
  <div class="w-size-300"></div>
  <div class="w-size-400"></div>
  <div class="w-size-500"></div>
  <div class="w-size-525"></div>
  <div class="w-size-600"></div>
  <div class="w-size-700"></div>
  <div class="w-size-800"></div>
  <div class="w-size-900"></div>
</div>

Blueprint

Settings

Size

Usage

React

Bootstrap