Skip to content
On this page

Size

Size

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

NameValue
size-00

Defined in src/codex-base.json

Refers to dimension.0

size-60.0625em

Defined in src/codex-base.json

Refers to dimension.6

Refers to unit.system

size-120.125em

Defined in src/codex-base.json

Refers to dimension.12

Refers to unit.system

size-250.25em

Defined in src/codex-base.json

Refers to dimension.25

Refers to unit.system

size-500.5em

Defined in src/codex-base.json

Refers to dimension.50

Refers to unit.system

size-750.75em

Defined in src/codex-base.json

Refers to dimension.75

Refers to unit.system

size-1001em

Defined in src/codex-base.json

Refers to dimension.100

Refers to unit.system

size-1251.25em

Defined in src/codex-base.json

Refers to dimension.125

Refers to unit.system

size-1501.5em

Defined in src/codex-base.json

Refers to dimension.150

Refers to unit.system

size-2002em

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

size-2502.5em

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

size-2752.75em

Defined in src/codex-base.json

Refers to dimension.275

Refers to unit.system

size-3003em

Defined in src/codex-base.json

Refers to dimension.300

Refers to unit.system

size-4004em

Defined in src/codex-base.json

Refers to dimension.400

Refers to unit.system

size-8008em

Defined in src/codex-base.json

Refers to dimension.800

Refers to unit.system

size-160016em

Defined in src/codex-base.json

Refers to dimension.1600

Refers to unit.system

size-240024em

Defined in src/codex-base.json

Refers to dimension.2400

Refers to unit.system

size-280028em

Defined in src/codex-base.json

Refers to dimension.2800

Refers to unit.system

size-320032em

Defined in src/codex-base.json

Refers to dimension.3200

Refers to unit.system

size-560056em

Defined in src/codex-base.json

Refers to dimension.5600

Refers to unit.system

size-absolute-11px

Defined in src/codex-base.json

Refers to dimension.absolute.1

size-absolute-99999999px

Defined in src/codex-base.json

Refers to dimension.absolute.9999

size-third33.33%

Defined in src/codex-base.json

Refers to dimension.third

size-half50%

Defined in src/codex-base.json

Refers to dimension.half

size-full100%

Defined in src/codex-base.json

Refers to dimension.full

size-double200%

Defined in src/codex-base.json

Refers to dimension.double

size-viewport-width-full100vw

Defined in src/codex-base.json

Refers to dimension.viewport.width-full

size-viewport-height-full100vh

Defined in src/codex-base.json

Refers to dimension.viewport.height-full

size-search-figure2.5em

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability.

size-icon-x-small0.75em

Defined in src/codex-components.json

Refers to dimension.75

Refers to unit.system

size-icon-small1em

Defined in src/codex-components.json

Refers to dimension.100

Refers to unit.system

size-icon-medium1.25em

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

Minimum size

NameValue
min-size-base deprecated 32px

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

Deprecated: Use `min-size-interactive-pointer`/`min-size-interactive-touch` instead.

min-size-interactive-pointer32px

Defined in src/codex-base.json

Refers to dimension.200

Refers to unit.system

min-size-interactive-touch44px

Defined in src/codex-base.json

Refers to dimension.275

Refers to unit.system

min-size-search-figure40px

Defined in src/codex-base.json

Refers to dimension.250

Refers to unit.system

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/codex-components.json

Refers to dimension.75

Refers to unit.system

min-size-icon-small16px

Defined in src/codex-components.json

Refers to dimension.100

Refers to unit.system

min-size-icon-medium20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

min-size-input-binary20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

min-size-toggle-switch-grip20px

Defined in src/codex-components.json

Refers to dimension.125

Refers to unit.system

Maximum width

NameValue
max-width-basenone

Defined in src/codex-base.json

Refers to max-width.100

max-width-button28em

Defined in src/codex-components.json

Refers to dimension.2800

Refers to unit.system

Note, that this is a slight amendment from WikimediaUI Base from `28.75em` = `460px` to `448px` – `dimension.2800`

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

NameValue
size-base deprecated 32px

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to size.200

Deprecated: Use `size-200` instead.

size-icon deprecated 20px

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to size.icon-medium

Deprecated: Use `size-icon-medium` instead.

size-indicator deprecated 12px

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to size.icon-x-small

Deprecated: Use `size-icon-x-small` instead.

NameValue
min-size-icon deprecated 20px

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to min-size.icon-medium

Deprecated: Use `min-size-icon-medium` instead.

min-size-indicator deprecated 12px

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to min-size.icon-x-small

Deprecated: Use `min-size-icon-x-small` instead.