# Typography

## Headings

Header tags from H1 to H6 are available. You can also use ```.h1``` to ```.h6``` classes.

<div class="docs-demo">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</div>

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<span class="h1">Heading 1</h1>
<span class="h2">Heading 2</h2>
<span class="h3">Heading 3</h3>
<span class="h4">Heading 4</h4>
<span class="h5">Heading 5</h5>
<span class="h6">Heading 6</h6>
```

-----------

## Text lead

<div class="docs-demo">
    <p class="text-lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

```html
<p class="text-lead">...</p>
```

-----------

## Paragraph

<div class="docs-demo">
    <p>Nam sed ex sit amet metus lacinia posuere. Duis dolor sapien, auctor ac fringilla a, aliquet eget ligula. Proin pretium scelerisque odio, in commodo neque. Curabitur odio nisl, posuere in mauris et, finibus dignissim turpis. Vivamus fringilla leo tellus, vel dignissim ligula accumsan ac. Praesent eu lobortis nisl, et congue elit. Fusce eget sodales mauris. Nulla eu porttitor dui, vitae venenatis odio. Nulla facilisi. Phasellus varius lorem augue, efficitur rhoncus erat luctus sit amet. Nulla lobortis euismod mi id lobortis. Sed laoreet, ante nec varius molestie, odio nibh sollicitudin est, nec scelerisque ex ex ac dui. Phasellus et augue bibendum, pretium orci eu, venenatis massa. Morbi velit lectus, accumsan sed congue quis, fermentum in massa.</p>
</div>

```html
<p>...</p>
```

-----------

## Text styles

### Truncated text

<div class="docs-demo">
    <p class="text-truncate">Truncate text. Nulla eu porttitor dui, vitae venenatis odio. Nulla facilisi. Phasellus varius lorem augue, efficitur rhoncus erat luctus sit amet.</p>
</div>

```html
<p class="text-truncate">...</p>
```

### Text small

<div class="docs-demo">
    <p class="text-small">Nulla eu porttitor dui, vitae venenatis odio. Nulla facilisi. Phasellus varius lorem augue, efficitur rhoncus erat luctus sit amet.</p>
</div>

```html
<p class="text-small">...</p>
```

### Text large

<div class="docs-demo">
    <p class="text-large">Nulla eu porttitor dui, vitae venenatis odio. Nulla facilisi.</p>
</div>

```html
<p class="text-large">...</p>
```

### Text bold

<div class="docs-demo">
    <p class="text-bold">Text bold.</p>
</div>

```html
<p class="text-bold">...</p>
```

### Text italic

<div class="docs-demo">
    <p class="text-italic">Text italic.</p>
</div>

```html
<p class="text-italic">...</p>
```

### Text uppercase

<div class="docs-demo">
    <p class="text-uppercase">Text uppercase</p>
</div>

```html
<p class="text-uppercase">...</p>
```

### Text capitalize

<div class="docs-demo">
    <p class="text-capitalize">Text capitalize</p>
</div>

```html
<p class="text-capitalize">...</p>
```

### Text lowercase

<div class="docs-demo">
    <p class="text-lowercase">Text lowercase</p>
</div>

```html
<p class="text-lowercase">...</p>
```

### Text meta

<div class="docs-demo">
    <p class="text-meta">Nulla eu porttitor dui, vitae venenatis odio.</p>
</div>

```html
<p class="text-meta">...</p>
```

### Text fluid

Apply the ```.text-fluid``` class to make text adaptable according to screen size.

<div class="docs-demo">
    <p class="text-fluid">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

```html
<p class="text-fluid">...</p>
```