> For the complete documentation index, see [llms.txt](https://docs-drift.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-drift.g-axon.work/components/typography.md).

# Typography

### Headings

{% tabs %}
{% tab title="Example 1" %}
![](/files/-LuqyD7kwdl1_MukH0Px)
{% endtab %}

{% tab title="Source Code" %}

```markup
<h1>h1. BootStrap Heading</h1>
<h2>h2. BootStrap Heading</h2>
<h3>h3. BootStrap Heading</h3>
<h4>h4. BootStrap Heading</h4>
<h5>h5. BootStrap Heading</h5>
<h6>h6. BootStrap Heading</h6>
```

{% endtab %}
{% endtabs %}

### Display Headings

{% tabs %}
{% tab title="Example 2" %}
![](/files/-LuqySCmne9JvCJb2N_6)
{% endtab %}

{% tab title="Source Code" %}

```markup
<h1 class="display-1">h1. BootStrap Heading</h1>
<h2 class="display-2">h2. BootStrap Heading</h2>
<h3 class="display-3">h3. BootStrap Heading</h3>
<h4 class="display-4">h4. BootStrap Heading</h4>
<h5 class="display-5">h5. BootStrap Heading</h5>
<h6 class="display-6 mb-0">h6. BootStrap Heading</h6>
```

{% endtab %}
{% endtabs %}

### Paragraph

{% tabs %}
{% tab title="Basic" %}
![](/files/-LuqyqTqd1hS1emv0oTt)

```markup
<p>
    Element for abbreviations and acronyms to show the expanded
    version on hover. Abbreviations have a default underline and gain a
    help cursor to provide additional context on hover and to users of
    assistive technologies.
</p>
```

{% endtab %}

{% tab title="Lead" %}
![](/files/-Luqz55G4JeE2Olk6-Cu)

```markup
<p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
    auctor duis mollis, est non commodo luctus.
</p>
```

{% endtab %}
{% endtabs %}

### Blockquote

{% tabs %}
{% tab title="Start" %}
![](/files/-LuqzbWmFGCyIw8uu2-Z)

```markup
<blockquote class="blockquote">
    <span class="badge badge-light mb-3">Default</span>
    <p class="mb-0">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus
        dolo auctor duis mollis, est non commodo luctus.
    </p>
    <footer class="blockquote-footer">Someone famous with <cite title="Source Title">source title</cite>
    </footer>
</blockquote>
```

{% endtab %}

{% tab title="Center" %}
![](/files/-LuqztniJHoFyTPDGbXp)

```markup
<blockquote class="blockquote text-center">
    <span class="badge badge-light mb-3">Center Aligned</span>
    <p class="mb-0">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus
        dolo auctor duis mollis, est non commodo luctus.
    </p>
    <footer class="blockquote-footer">Someone famous with <cite title="Source Title">source title</cite>
    </footer>
</blockquote>
```

{% endtab %}

{% tab title="End" %}
![](/files/-Lur-B4P-N2L8pWEAv3F)

```markup
<blockquote class="blockquote text-right">
    <span class="badge badge-light mb-3">Right Aligned</span>
    <p class="mb-0">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus
        dolo auctor duis mollis, est non commodo luctus.
    </p>
    <footer class="blockquote-footer">Someone famous with <cite title="Source Title">source title</cite>
    </footer>
</blockquote>
```

{% endtab %}
{% endtabs %}

### List

{% tabs %}
{% tab title="List" %}

{% endtab %}

{% tab title="Source Code" %}

```markup
<ul class="list-unstyled">
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
</ul>
```

{% endtab %}
{% endtabs %}