Typography

The typography components are really just convenient helpers for text styling. When used within Alert or Dialog components, they automatically get used as aria labels and descriptions too. Hooray for accessibility!

Links

Use <ui:link> to create an <a> tag with some default styling. You may use the when property to control whether the href attribute is included or not. This can be very useful for labels and other conditionally-linked parts of your application. There are two main benefits to using this component over the native <a> tag:

It allows you to have consistent styling for links without using global anchor tag styles.
It provides the convenient when property that only applies the href attribute when true.

Link

Copied!

This is a an unbearable link to something.

1This is a <ui:link href="#this-page-lol">an unbearable link</ui:link> to something.

This is a <ui:link href="#this-page-lol">an unbearable link</ui:link> to something.1This is a <ui:link href="#this-page-lol">an unbearable link</ui:link> to something.

This is a <ui:link href="#this-page-lol">an unbearable link</ui:link> to something.

The `when` Property

The when property is a boolean that controls whether the href attribute is included or not. This is sometimes useful for labels and other conditionally-linked parts of your application.

Conditional Link

Copied!

This is a an unbearable link... but it doesn't link since "when" is false.

1This is a <ui:link :when="false" href="#this-page-lol">an unbearable link</ui:link>... but it doesn't link since "when" is <span class="font-mono text-sm font-medium text-primary-600 dark:text-primary-400">false</span>.

This is a <ui:link :when="false" href="#this-page-lol">an unbearable link</ui:link>... but it doesn't link since "when" is <span class="font-mono text-sm font-medium text-primary-600 dark:text-primary-400">false</span>.1This is a <ui:link :when="false" href="#this-page-lol">an unbearable link</ui:link>... but it doesn't link since "when" is <span class="font-mono text-sm font-medium text-primary-600 dark:text-primary-400">false</span>.

This is a <ui:link :when="false" href="#this-page-lol">an unbearable link</ui:link>... but it doesn't link since "when" is <span class="font-mono text-sm font-medium text-primary-600 dark:text-primary-400">false</span>.

Heading & Subheading

Heading & Subheading Sizes

Copied!

Grizzly Business: Headings

Bear with me, this is important.

Grizzly Business: Headings

Bear with me, this is important.

Grizzly Business: Headings

Bear with me, this is important.

Grizzly Business: Headings

Bear with me, this is important.

 1<div class="p-5 space-y-16">
 2    <div class="before:content-['BASE'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
 3        <ui:heading tag="h4" size="base">Grizzly Business: Headings</ui:heading>
 4        <ui:subheading size="base">Bear with me, this is important.</ui:subheading>
 5    </div>
 6 
 7    <div class="before:content-['MD'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
 8        <ui:heading tag="h4" size="md">Grizzly Business: Headings</ui:heading>
 9        <ui:subheading size="md">Bear with me, this is important.</ui:subheading>
10    </div>
11 
12    <div class="before:content-['LG'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
13        <ui:heading tag="h4" size="lg">Grizzly Business: Headings</ui:heading>
14        <ui:subheading size="lg">Bear with me, this is important.</ui:subheading>
15    </div>
16 
17    <div class="before:content-['XL'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
18        <ui:heading tag="h4" size="xl">Grizzly Business: Headings</ui:heading>
19        <ui:subheading size="xl">Bear with me, this is important.</ui:subheading>
20    </div>
21</div>

<div class="p-5 space-y-16">
    <div class="before:content-['BASE'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="base">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="base">Bear with me, this is important.</ui:subheading>
    </div>

    <div class="before:content-['MD'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="md">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="md">Bear with me, this is important.</ui:subheading>
    </div>

    <div class="before:content-['LG'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="lg">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="lg">Bear with me, this is important.</ui:subheading>
    </div>

    <div class="before:content-['XL'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="xl">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="xl">Bear with me, this is important.</ui:subheading>
    </div>
</div> 1<div class="p-5 space-y-16">
 2    <div class="before:content-['BASE'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
 3        <ui:heading tag="h4" size="base">Grizzly Business: Headings</ui:heading>
 4        <ui:subheading size="base">Bear with me, this is important.</ui:subheading>
 5    </div>
 6 
 7    <div class="before:content-['MD'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
 8        <ui:heading tag="h4" size="md">Grizzly Business: Headings</ui:heading>
 9        <ui:subheading size="md">Bear with me, this is important.</ui:subheading>
10    </div>
11 
12    <div class="before:content-['LG'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
13        <ui:heading tag="h4" size="lg">Grizzly Business: Headings</ui:heading>
14        <ui:subheading size="lg">Bear with me, this is important.</ui:subheading>
15    </div>
16 
17    <div class="before:content-['XL'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
18        <ui:heading tag="h4" size="xl">Grizzly Business: Headings</ui:heading>
19        <ui:subheading size="xl">Bear with me, this is important.</ui:subheading>
20    </div>
21</div>

<div class="p-5 space-y-16">
    <div class="before:content-['BASE'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="base">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="base">Bear with me, this is important.</ui:subheading>
    </div>

    <div class="before:content-['MD'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="md">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="md">Bear with me, this is important.</ui:subheading>
    </div>

    <div class="before:content-['LG'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="lg">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="lg">Bear with me, this is important.</ui:subheading>
    </div>

    <div class="before:content-['XL'] before:opacity-50 before:text-xs before:uppercase before:block before:mb-6 before:pb-2.5 before:border-b before:border-white/10">
        <ui:heading tag="h4" size="xl">Grizzly Business: Headings</ui:heading>
        <ui:subheading size="xl">Bear with me, this is important.</ui:subheading>
    </div>
</div>

Both typography components share the size property, but only the heading component has the tag property.

Property	Type	Default	Description
`tag` (heading only)	`string`	`h2`	The HTML tag to use for the heading. Typically `h1` through `h4`.
`size`	`string`	`base`	The size of the heading or description.

Size

The font size and weight. Supported sizes are base, md, lg, and xl. Also affects the vertical spacing when heading and subheading components are used as siblings.

Bear With Me, This Is Important

Copied!

Bear With Me, This Is Important

Fur real, this is important

1<ui:heading size="md" tag="h4">Bear With Me, This Is Important</ui:heading>
2<ui:subheading size="md">Fur real, this is important</ui:subheading>

<ui:heading size="md" tag="h4">Bear With Me, This Is Important</ui:heading>
<ui:subheading size="md">Fur real, this is important</ui:subheading>1<ui:heading size="md" tag="h4">Bear With Me, This Is Important</ui:heading>
2<ui:subheading size="md">Fur real, this is important</ui:subheading>

<ui:heading size="md" tag="h4">Bear With Me, This Is Important</ui:heading>
<ui:subheading size="md">Fur real, this is important</ui:subheading>

Bearly Bearable Headlines

1<ui:heading tag="h1">Bearly Bearable Headlines</ui:heading>

<ui:heading tag="h1">Bearly Bearable Headlines</ui:heading>1<ui:heading tag="h1">Bearly Bearable Headlines</ui:heading>

<ui:heading tag="h1">Bearly Bearable Headlines</ui:heading>

Getting Started

Components

Typography

Links

Link

The `when` Property

Conditional Link

Heading & Subheading

Heading & Subheading Sizes

Grizzly Business: Headings

Grizzly Business: Headings

Grizzly Business: Headings

Grizzly Business: Headings

Size

Bear With Me, This Is Important

Bear With Me, This Is Important

Tag

Bearly Bearable Headlines

Bearly Bearable Headlines

Getting Started

Components

Typography

Links

Link

The when Property

Conditional Link

Heading & Subheading

Heading & Subheading Sizes

Grizzly Business: Headings

Grizzly Business: Headings

Grizzly Business: Headings

Grizzly Business: Headings

Size

Bear With Me, This Is Important

Bear With Me, This Is Important

Tag

Bearly Bearable Headlines

Bearly Bearable Headlines

The `when` Property