Blueprint

GuidesFoundationComponentsReleases
⌘K

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

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 space scale.

live

<div className="example-size">
<Box width="100" />
<Box width="200" />
<Box width="300" />
<Box width="400" />
<Box width="500" />
<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-600"></div>
<div class="w-size-700"></div>
<div class="w-size-800"></div>
<div class="w-size-900"></div>
</div>