Text component

All text variants have a default style and default tag associated with them. Use the Text component's as prop to render text as a different element. This prop is purely semantic and does not alter visual appearance. For example, to render a p tag using the header style, you can do something like this:

<Text as="p" variant="heading-md">heading-md</Text>

Which will result in a p tag with the heading-md style.

heading-md

You can always customise the text style by passing in a className prop.

<Text variant="body-md/500" className="italic underline underline-offset-8">
            body-md/500
          </Text>

Which will result in this:

body-md/500

heading-md

<Text variant="heading-md">heading-md</Text>

default tag: <h1 />
default classes: font-heading font-bold text-[2.5rem] leading-[3rem] tracking-[0.4px]

heading-sm

<Text variant="heading-sm">heading-sm</Text>

default tag: <h2 />
default classes: font-heading font-semibold text-3xl

heading-xs

<Text variant="heading-xs">heading-xs</Text>

default tag: <h3 />
default classes: font-heading font-bold text-2xl

subheading-lg

<Text variant="subheading-lg">subheading-lg</Text>

default tag: <h3 />
default classes: font-body font-medium text-[2rem] leading-normal -tracking-[1.6px]

subheading-md

<Text variant="subheading-md">subheading-md</Text>

default tag: <h4 />
default classes: font-body font-medium text-2xl leading-8 -tracking-[0.96px]

subheading-sm

<Text variant="subheading-sm">subheading-sm</Text>

default tag: <h5 />
default classes: font-body font-medium text-lg -tracking-[0.54px]

body-lg/600

<Text variant="body-lg/600">body-lg/600</Text>

default tag: <p />
default classes: font-body font-semibold text-base

body-lg/500

<Text variant="body-lg/500">body-lg/500</Text>

default tag: <p />
default classes: font-body font-medium text-base

body-lg/400

<Text variant="body-lg/400">body-lg/400</Text>

default tag: <p />
default classes: font-body font-normal text-base

body-md/600

<Text variant="body-md/600">body-md/600</Text>

default tag: <p />
default classes: font-body font-semibold text-sm leading-[1.5rem]

body-md/500

<Text variant="body-md/500">body-md/500</Text>

default tag: <p />
default classes: font-body font-medium text-sm leading-[1.5rem]

body-md/400

<Text variant="body-md/400">body-md/400</Text>

default tag: <p />
default classes: font-body font-normal text-sm leading-[1.5rem]

body-sm/600

<Text variant="body-sm/600">body-sm/600</Text>

default tag: <p />
default classes: font-body font-semibold text-[0.8125rem] leading-[1.5rem]

body-sm/500

<Text variant="body-sm/500">body-sm/500</Text>

default tag: <p />
default classes: font-body font-medium text-[0.8125rem] leading-[1.5rem]

body-sm/400

<Text variant="body-sm/400">body-sm/400</Text>

default tag: <p />
default classes: font-body font-normal text-[0.8125rem] leading-[1.5rem]

caption/600

<Text variant="caption/600">caption/600</Text>

default tag: <span />
default classes: font-body font-semibold text-xs

caption/500

<Text variant="caption/500">caption/500</Text>

default tag: <span />
default classes: font-body font-medium text-xs

caption/400

<Text variant="caption/400">caption/400</Text>

default tag: <span />
default classes: font-body font-normal text-xs

data

<Text variant="data">data</Text>

default tag: <span />
default classes: data-small font-body font-medium text-[10px] leading-[16px] -tracking-[0.5px]