Skip to content

Size

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
NameValue
size-00

Defined in src/application.json

Refers to dimension.0

size-60.0625rem

Defined in src/application.json

Refers to dimension.6

size-120.125rem

Defined in src/application.json

Refers to dimension.12

size-250.25rem

Defined in src/application.json

Refers to dimension.25

size-500.5rem

Defined in src/application.json

Refers to dimension.50

size-750.75rem

Defined in src/application.json

Refers to dimension.75

size-1001rem

Defined in src/application.json

Refers to dimension.100

size-1251.25rem

Defined in src/application.json

Refers to dimension.125

size-1501.5rem

Defined in src/application.json

Refers to dimension.150

size-2002rem

Defined in src/application.json

Refers to dimension.200

size-2502.5rem

Defined in src/application.json

Refers to dimension.250

size-2752.75rem

Defined in src/application.json

Refers to dimension.275

size-3003rem

Defined in src/application.json

Refers to dimension.300

size-4004rem

Defined in src/application.json

Refers to dimension.400

size-8008rem

Defined in src/application.json

Refers to dimension.800

size-160016rem

Defined in src/application.json

Refers to dimension.1600

size-240024rem

Defined in src/application.json

Refers to dimension.2400

size-280028rem

Defined in src/application.json

Refers to dimension.2800

size-320032rem

Defined in src/application.json

Refers to dimension.3200

size-400040rem

Defined in src/application.json

Refers to dimension.4000

size-560056rem

Defined in src/application.json

Refers to dimension.5600

size-viewport-width-full100vw

Defined in src/application.json

Refers to dimension.viewport.width-full

size-viewport-height-full100vh

Defined in src/application.json

Refers to dimension.viewport.height-full

size-absolute-11px

Defined in src/application.json

Refers to dimension.absolute.1

size-absolute-99999999px

Defined in src/application.json

Refers to dimension.absolute.9999

size-third33.33%

Defined in src/application.json

Refers to dimension.third

size-half50%

Defined in src/application.json

Refers to dimension.half

size-full100%

Defined in src/application.json

Refers to dimension.full

size-double200%

Defined in src/application.json

Refers to dimension.double

size-search-figure2.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-small0.75rem

Defined in src/components.json

Refers to dimension.75

size-icon-small1rem

Defined in src/components.json

Refers to dimension.100

size-icon-medium1.25rem

Defined in src/components.json

Refers to dimension.125

size-tooltipmax-content

Defined in src/components.json

Minimum size

List of design token names, values and metadata for
NameValue
min-size-interactive-pointer32px

Defined in src/application.json

Refers to dimension.200

min-size-interactive-touch44px

Defined in src/application.json

Refers to dimension.275

min-size-search-figure40px

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-small12px

Defined in src/components.json

Refers to dimension.75

min-size-icon-small16px

Defined in src/components.json

Refers to dimension.100

min-size-icon-medium20px

Defined in src/components.json

Refers to dimension.125

min-size-input-binary20px

Defined in src/components.json

Refers to dimension.125

min-size-toggle-switch-grip20px

Defined in src/components.json

Refers to dimension.125

Maximum width

List of design token names, values and metadata for width
NameValue
max-width-basenone

Defined in src/application.json

Refers to max-width.100

max-width-button28rem

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`