CodexSize
Size
The size tokens are used to define the size of elements, applied for example on the width and height properties.
| Name | Value |
|---|---|
| size-0 | 0 Defined in Refers to |
| size-6 | 0.0625em Defined in Refers to Refers to |
| size-12 | 0.125em Defined in Refers to Refers to |
| size-25 | 0.25em Defined in Refers to Refers to |
| size-50 | 0.5em Defined in Refers to Refers to |
| size-75 | 0.75em Defined in Refers to Refers to |
| size-100 | 1em Defined in Refers to Refers to |
| size-125 | 1.25em Defined in Refers to Refers to |
| size-150 | 1.5em Defined in Refers to Refers to |
| size-200 | 2em Defined in Refers to Refers to |
| size-250 | 2.5em Defined in Refers to Refers to |
| size-275 | 2.75em Defined in Refers to Refers to |
| size-300 | 3em Defined in Refers to Refers to |
| size-400 | 4em Defined in Refers to Refers to |
| size-800 | 8em Defined in Refers to Refers to |
| size-1600 | 16em Defined in Refers to Refers to |
| size-2400 | 24em Defined in Refers to Refers to |
| size-2800 | 28em Defined in Refers to Refers to |
| size-3200 | 32em Defined in Refers to Refers to |
| size-5600 | 56em Defined in Refers to Refers to |
| size-absolute-1 | 1px Defined in Refers to |
| size-absolute-9999 | 9999px Defined in Refers to |
| size-third | 33.33% Defined in Refers to |
| size-half | 50% Defined in Refers to |
| size-full | 100% Defined in Refers to |
| size-double | 200% Defined in Refers to |
| size-viewport-width-full | 100vw Defined in Refers to |
| size-viewport-height-full | 100vh Defined in Refers to |
| size-search-figure | 2.5em Defined in Refers to Refers to Alias for use in TypeaheadSearch and Thumbnail components for the same purpose and for better code readability. |
| size-icon-x-small | 0.75em Defined in Refers to Refers to |
| size-icon-small | 1em Defined in Refers to Refers to |
| size-icon-medium | 1.25em Defined in Refers to Refers to |
Minimum size
| Name | Value |
|---|---|
| min-size-base | 32px Defined in Refers to Refers to TODO: Deprecate key and change to `min-size-component`? |
| min-size-search-figure | 40px Defined in Refers to Refers to 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 Refers to Refers to |
| min-size-icon-small | 16px Defined in Refers to Refers to |
| min-size-icon-medium | 20px Defined in Refers to Refers to |
| min-size-toggle-switch-grip | 20px Defined in Refers to Refers to |
Maximum width
| Name | Value |
|---|---|
| max-width-base | none Defined in Refers to |
| max-width-button | 28em Defined in Refers to Refers to 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.
| Name | Value |
|---|---|
| size-base deprecated | 32px Defined in Refers to Deprecated: Use `size-200` instead. |
| size-icon deprecated | 20px Defined in Refers to Deprecated: Use `size-icon-medium` instead. |
| size-indicator deprecated | 12px Defined in Refers to Deprecated: Use `size-icon-x-small` instead. |
| Name | Value |
|---|---|
| min-size-icon deprecated | 20px Defined in Refers to Deprecated: Use `min-size-icon-medium` instead. |
| min-size-indicator deprecated | 12px Defined in Refers to Deprecated: Use `min-size-icon-x-small` instead. |