---
layout: docs
title: Display Title
description: null
---

## Example

<h1 class="display-title">Display Title</h1>

### HTML

```html
<h1 class="display-title">...</h1>
```

### CSS

```scss
--display-title-margin: 0.125em 0;
--display-title-font-family: inherit;
--display-title-font-weight: var(--font-weight-bold);
--display-title-font-size: 1.5rem;
--display-title-font-style: normal;
--display-title-color: inherit;
--display-title-line-height: var(--line-height-xxs);
--display-title-text-transform: none;
--display-title-letter-spacing: 0;
```

## Sizes

<h1 class="display-title display-title-xxl">Display Title XXL</h1>
<h1 class="display-title display-title-xl">Display Title XL</h1>
<h1 class="display-title display-title-l">Display Title L</h1>
<h1 class="display-title">Display Title M</h1>
<h1 class="display-title display-title-s">Display Title S</h1>
<h1 class="display-title display-title-xs">Display Title XS</h1>
<h1 class="display-title display-title-xxs">Display Title XXS</h1>

### HTML

```html
<h1 class="display-title display-title-xxl">...</h1>
<h1 class="display-title display-title-xl">...</h1>
<h1 class="display-title display-title-l">...</h1>
<h1 class="display-title">...</h1>
<h1 class="display-title display-title-s">...</h1>
<h1 class="display-title display-title-xs">...</h1>
<h1 class="display-title display-title-xxs">...</h1>
```

### CSS

```scss
--display-title-xxl-font-size: 2.5rem;
--display-title-xl-font-size: 2rem;
--display-title-l-font-size: 1.75rem;
--display-title-s-font-size: 1.25rem;
--display-title-xs-font-size: 1.125rem;
--display-title-xxs-font-size: 1rem;
```