tuix-text

tuix-text applies one of the design system's text styles to its slotted content. It renders inline, so it wraps a word as happily as a paragraph.

Loading the components…

The type scale

Headings run from xxl down to xs, all at weight 600.

Loading the components…

Body and field styles are lighter, for everything that is not a heading.

Loading the components…

xxl (6rem) is the hero style, and bullet_list, link and button exist so lists, links and button labels stay on the same scale; the components already use them.

Semantic colours

Loading the components…

API

Properties

Property	Attribute	Type	Default	Description
`size`	`size`	`TextSize`	`body1`	The text style: size, weight and line height
`color`	`color`	`TextVariant`	`primary`	A semantic colour, resolved against the light or dark palette
`dark`	`dark`	`boolean`	`false`	Resolve `color` against the dark palette

Sizes

TextSize values and their desktop metrics. All of them shrink at the tablet and mobile breakpoints, except field_title and field_description: those two keep the values below at every width.

Value	Attribute	Size / line height	Weight	Use
`TextSize.XXL`	`xxl`	6rem / 6.25rem	600	Hero
`TextSize.XL`	`xl`	3.375rem / 3.688rem	600	Page title
`TextSize.L`	`l`	2.813rem / 3.375rem	600	Section title
`TextSize.M`	`m`	2.313rem / 2.75rem	600	Subsection
`TextSize.S`	`s`	1.938rem / 2.313rem	600	Card title
`TextSize.XS`	`xs`	1.313rem / 1.563rem	600	Small heading
`TextSize.Body1`	`body1`	1.125rem / 1.688rem	300	Body copy
`TextSize.Body2`	`body2`	0.938rem / 1.313rem	300	Secondary copy
`TextSize.BulletList`	`bullet_list`	1.125rem / 1.375rem	300	List items
`TextSize.Link`	`link`	1rem / 1.25rem	400	Link label
`TextSize.Button`	`button`	1rem / 1.25rem	400	Button label
`TextSize.FieldPlaceholder`	`field_placeholder`	1rem / 1.25rem	300	Field value and placeholder
`TextSize.FieldTitle`	`field_title`	0.75rem / 0.875rem	300	Field label
`TextSize.FieldDescription`	`field_description`	0.75rem / 0.875rem	300	Field helper text

Colours

TextVariant is semantic: the same value resolves to a different hex in dark mode. See Enums for the full mapping.

Value	Attribute	Light	Dark
`PRIMARY`	`primary`	`BLACK`	`PRIMARY_50`
`SECONDARY`	`secondary`	`WHITE`	`BLACK`
`MAIN`	`main`	`MAIN`	dark `MAIN`
`DARK_MAIN`	`dark_main`	`DARK_MAIN`	dark `NEUTRAL_600`
`GREY`	`grey`	`NEUTRAL_600`	dark `NEUTRAL_600`
`LIGHT_GREY`	`light_grey`	`NEUTRAL_200`	`NEUTRAL_200`
`DISABLED`	`disabled`	`PRIMARY_100`	`PRIMARY_200`
`VALIDATION`	`validation`	`VALIDATION`	dark `VALIDATION`
`ERROR`	`error`	`ERROR`	dark `ERROR`
`SUCCESS`	`success`	`SUCCESS`	dark `SUCCESS`
`LIGHT`	`light`	`WHITE`	`PRIMARY_50`
`DARK`	`dark`	`BLACK`	`BLACK`
`DARK_BLUE`	`dark_blue`	`DARK_MAIN`	`PRIMARY_800`
`TITLE_BLUE`	`title_blue`	`DARK_MAIN`	`PRIMARY_300`
`SECTION`	`section`	`PRIMARY_700`	`PRIMARY_300`
`STROKE`	`stroke`	`PRIMARY_400`	`PRIMARY_400`

Slots

Slot	Content
default	The text. Slotted elements inherit the size and weight, so `<b>` or `<span>` inside keep the style

Notes

Inside tuix-link the colour is overridden by the link, which sets the --t-link-text-color custom property the text reads first.
The other components use tuix-text internally for their labels, so their typography follows this scale automatically.

tuix-text

On this page