> 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-LuqyD7kwdl1_MukH0Px%2Fimage.png?alt=media\&token=49df500a-f69b-4aea-a1cb-3b80a1084b1d)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-LuqySCmne9JvCJb2N_6%2Fimage.png?alt=media\&token=f1f2a730-cc7c-4dd2-a75f-8746a40280a8)
{% 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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-LuqyqTqd1hS1emv0oTt%2Fimage.png?alt=media\&token=8e6f597b-e4b6-43d3-8e16-518f32f28869)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-Luqz55G4JeE2Olk6-Cu%2Fimage.png?alt=media\&token=15f9f0ee-744a-4b58-a066-bb78863464cd)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-LuqzbWmFGCyIw8uu2-Z%2Fimage.png?alt=media\&token=d8162bd5-271e-4865-8937-7fc88971c1b0)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-LuqztniJHoFyTPDGbXp%2Fimage.png?alt=media\&token=2f0b77c4-0e3c-420f-9e86-041b3dd93bb1)

```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" %}
![](https://5259772-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LoOsNUMEOHspaxSUWFG%2F-Luqx8a_HK0V8vboGVhV%2F-Lur-B4P-N2L8pWEAv3F%2Fimage.png?alt=media\&token=ee4f2bc9-0415-48d5-8361-04076dd189c8)

```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 %}