---
description: Work in progress...
---

# Typography

### Link underline

If somewhere on the page animated underline doesn't work then you can use a dedicated class.

```
<a href="#" class="underline--anim">Link</a>
```

### Lead

_lead-1, lead-2, lead-3, lead-4_

![](https://2934894637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbCvyqQFWjULWnGrw3L3Z%2Fuploads%2FCQfMKoaJqgRD0kHnzvha%2Flead-typo.jpg?alt=media\&token=ba3dfcea-5d68-43a6-9770-6ce1d7112d9c)

```html
<p class="lead-1">Lead #1</p>
<div class="lead-2">Lorem ipsum dolar set</div>
```

### Display

_display-1, display-2, display-3, display-4_

![](https://2934894637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbCvyqQFWjULWnGrw3L3Z%2Fuploads%2F9q9lJLRF61D4I5QwAW0q%2Fdisplay-typo.jpg?alt=media\&token=9b9dd662-a4b7-49be-99d9-b86fa84f724a)

```html
<p class="display-1">Display #1</p>
```

### Small

_small, text-small_

```html
<span class="small">Small text</span>
<span class="text-small">Small text</span>
```

![](https://2934894637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbCvyqQFWjULWnGrw3L3Z%2Fuploads%2FqG1T5v1U32XtRB3G5j24%2Fsmall.jpg?alt=media\&token=549aa7e0-284a-4716-8a5f-7672f32728ee)

### Modified

_modified_

```html
<span class="modified">August 20, 2020</span>
```

![](https://2934894637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbCvyqQFWjULWnGrw3L3Z%2Fuploads%2FrpiL3FV4702JzstoDi6o%2Fmodified.jpg?alt=media\&token=f69c6ac8-e082-4a74-b1e9-b1886fde5a51)
