Text
Documentation is WIP, check open issues
and start improving!
Text component is a set of properties defining the look of text used across Trafi UI. Currently, Text has several different types:
HeadingTitleBodySubtitleLabelCaptionCaption-small
Preview
Here is the examples for existing types of Text component:
Heading, Akkurat Pro, 18px, 22, Bold, CD1
Title, Akkurat Pro, 16px, 20, Bold, CD1
Body, Akkurat Pro, 16px, 20, Regular, CD1
Subtitle, Akkurat Pro, 14px, 18, Regular, CD2
Label, Akkurat Pro, 14px, 16, Bold, All-caps, CD3
Caption, Akkurat Pro, 14px, 18, Bold, CL1
Caption-small, Akkurat Pro, 10px, 12, Bold, All-caps, CD3
Documentation
Specifications
heading: (
font-size: unit(4.5), // 18px
line-height: unit(5.5), // 22px -> 1.2222222em
color: palette(cd1), // #110711
font-weight: 600, // Bold
),
title: (
font-size: unit(4), // 16px
line-height: unit(5), // 20px -> 1.25em
color: palette(cd1), // #110711
font-weight: 600, // Bold
),
body: (
font-size: unit(4), // 16px
line-height: unit(5), // 20px -> 1.25em
color: palette(cd1), // #110711
font-weight: 400, // Regular
),
subtitle: (
font-size: unit(3.5), // 14px
line-height: unit(4.5), // 18px -> 1.28571428em
color: palette(cd2), // #665F66
font-weight: 400, // Regular
),
label: (
font-size: unit(3.5), // 14px
line-height: unit(4), // 16px -> 1.1428571429em
color: palette(cd3), // #999199
font-weight: 600, // Bold
all-caps: true,
),
caption: (
font-size: unit(3.5), // 14px
line-height: unit(4.5), // 18px -> 1.28571428em
color: palette(cl1), // #FFFFFF
font-weight: 600, // Bold
),
caption-small: (
font-size: unit(2.5), // 10px
line-height: unit(3), // 12px -> 1.2em
color: palette(cd3), // #999199
font-weight: 600, // Bold
all-caps: true,
)
API
| Name | Values | Default |
|---|---|---|
| type | heading / title / body / subtitle / label / caption / caption-small | body |
| color | color | none |