Size

The size tokens are used to define the size of elements, applied for example on the width and height properties.

List of design token names, values and metadata for
Name	Value
size-0	`0` Defined in `src/application.json` Refers to `dimension.0`
size-6	`0.0625rem` Defined in `src/application.json` Refers to `dimension.6`
size-12	`0.125rem` Defined in `src/application.json` Refers to `dimension.12`
size-25	`0.25rem` Defined in `src/application.json` Refers to `dimension.25`
size-50	`0.5rem` Defined in `src/application.json` Refers to `dimension.50`
size-75	`0.75rem` Defined in `src/application.json` Refers to `dimension.75`
size-100	`1rem` Defined in `src/application.json` Refers to `dimension.100`
size-125	`1.25rem` Defined in `src/application.json` Refers to `dimension.125`
size-150	`1.5rem` Defined in `src/application.json` Refers to `dimension.150`
size-200	`2rem` Defined in `src/application.json` Refers to `dimension.200`
size-250	`2.5rem` Defined in `src/application.json` Refers to `dimension.250`
size-275	`2.75rem` Defined in `src/application.json` Refers to `dimension.275`
size-300	`3rem` Defined in `src/application.json` Refers to `dimension.300`
size-400	`4rem` Defined in `src/application.json` Refers to `dimension.400`
size-800	`8rem` Defined in `src/application.json` Refers to `dimension.800`
size-1600	`16rem` Defined in `src/application.json` Refers to `dimension.1600`
size-2400	`24rem` Defined in `src/application.json` Refers to `dimension.2400`
size-2800	`28rem` Defined in `src/application.json` Refers to `dimension.2800`
size-3200	`32rem` Defined in `src/application.json` Refers to `dimension.3200`
size-4000	`40rem` Defined in `src/application.json` Refers to `dimension.4000`
size-5600	`56rem` Defined in `src/application.json` Refers to `dimension.5600`
size-viewport-width-full	`100vw` Defined in `src/application.json` Refers to `dimension.viewport.width-full`
size-viewport-height-full	`100vh` Defined in `src/application.json` Refers to `dimension.viewport.height-full`
size-absolute-1	`1px` Defined in `src/application.json` Refers to `dimension.absolute.1`
size-absolute-9999	`9999px` Defined in `src/application.json` Refers to `dimension.absolute.9999`
size-third	`33.33%` Defined in `src/application.json` Refers to `dimension.third`
size-half	`50%` Defined in `src/application.json` Refers to `dimension.half`
size-full	`100%` Defined in `src/application.json` Refers to `dimension.full`
size-double	`200%` Defined in `src/application.json` Refers to `dimension.double`
size-search-figure	`2.5rem` Defined in `src/application.json` Refers to `dimension.250` Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.
size-icon-x-small	`0.75rem` Defined in `src/components.json` Refers to `dimension.75`
size-icon-small	`1rem` Defined in `src/components.json` Refers to `dimension.100`
size-icon-medium	`1.25rem` Defined in `src/components.json` Refers to `dimension.125`

Minimum size

List of design token names, values and metadata for
Name	Value
min-size-interactive-pointer	`32px` Defined in `src/application.json` Refers to `dimension.200`
min-size-interactive-touch	`44px` Defined in `src/application.json` Refers to `dimension.275`
min-size-search-figure	`40px` Defined in `src/application.json` Refers to `dimension.250` Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.
min-size-icon-x-small	`12px` Defined in `src/components.json` Refers to `dimension.75`
min-size-icon-small	`16px` Defined in `src/components.json` Refers to `dimension.100`
min-size-icon-medium	`20px` Defined in `src/components.json` Refers to `dimension.125`
min-size-input-binary	`20px` Defined in `src/components.json` Refers to `dimension.125`
min-size-toggle-switch-grip	`20px` Defined in `src/components.json` Refers to `dimension.125`

Maximum width

List of design token names, values and metadata for `width`
Name	Value
max-width-base	`none` Defined in `src/application.json` Refers to `max-width.100`
max-width-button	`28rem` Defined in `src/components.json` Refers to `dimension.2800` Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800`

Size ​

Size ​

Minimum size ​

Maximum width ​

Size

Size

Minimum size

Maximum width