> For the complete documentation index, see [llms.txt](https://owwwlab.gitbook.io/chaos-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://owwwlab.gitbook.io/chaos-docs/basics/page-title.md).

# Page Titles

## Default page title

![](/files/-LLV0BW7_bGXveIuE0aE)

The default markup for a typical page title:

```
<div class="page-head">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter">
        <h1 class="title">Default page title</h1>
      </div>
      <div class="breadcrumb-wrapper vcenter">
        // breadcrumbs
      </div>
    </div>
  </div>
</div>
```

And the HTML for the breadcrumbs is:

```
<ul class="breadcrumb">
  <li><a href="#"><i class="oli oli-home"></i></a></li>
  <li><a href="#">publication</a></li>
  <li><a href="#">publication type</a></li>
  <li>learning environment</li>
</ul>
```

In the above code, `.vcenter` class stands to vertically centered, meaning that the two elements with this class will be vertically aligned inside their wrapper which is `.tb-vcenter-wrapper` element.

In addition to `<h1 class="title">Default page title</h1>`, there can be two additional information inside the `.title-wrapper` element. A complete one will be:

```
<div class="title-wrapper vcenter">
  <h4 class="head">Before title</h4>
  <h1 class="title">Page Title</h1>
  <h2 class="description">Some description about the page</h2>
</div>
```

#### Height

The heigh of page title by default is 150px. You can add some assets classes to specify it's height (i.e `.h-500`, `.h-700`) or if you want to use a Revolution slider inside, then you should add `.auto-height` class.

```
/// height auto (the content will set the height)
<div class="page-head auto-height">...</div>
```

```
/// 500px height
<div class="page-head h-500">...</div>
```

```
/// fullscreen
<div class="page-head hvh-100">...</div>
```

#### Background image

Add `.set-bg` class along with `data-img-src` attibute.

```
<div class="page-head set-bg" data-img-src="../../assets/img/backgrounds/02.jpg"></div>
```

#### Parallax

Instead of `.set-bg` you should use `.parallax-layer` class. This will make your background image to act like a parallax background image.

#### Overlay

Adding `.ov-*` classes to the page-head will add specified overlay on your background image. This can be useful to make contrast between text and image.

#### Alignment

Addidn `.center-it` class will brign the title contents to center. Also it will hide the breadcrumbs, if any.

#### Dark & Light

This asset class (`.dark`) will make texts white, so you can use dark background images or overlays without worrying about the contrast.

### Code snippets

![](/files/-LLV0BW9mWyJuJfuzR2a) **Note** to the `.lined` class here

```
<div class="page-head lined set-bg" data-img-src="../../assets/img/tiny_grid.png">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter">
        <h1 class="title">Lined page title</h1>
      </div>
      <div class="breadcrumb-wrapper vcenter">
        ...
      </div>
    </div>
  </div>
</div>
```

![](/files/-LLV0BWBf-jc_620aNLr)

```
<div class="page-head set-bg h-400 center-it ov-dark-alpha-80 dark" data-img-src="../../assets/img/backgrounds/04.jpg">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter">
        <h4 class="head">Never Before</h4>
        <h1 class="title">Customize Darkness</h1>
      </div>
    </div>
  </div>
</div>
```

![](/files/-LLV0BWHq10wK4Cbw_qS)

```
<div class="page-head set-bg h-500 center-it ov-grad2-alpha-90 dark" data-img-src="../../assets/img/backgrounds/04.jpg">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter">
        <h4 class="head">Brand New</h4>
        <h1 class="title">Gradient Overlays</h1>
      </div>
    </div>
  </div>
</div>
```

![](/files/-LLV0BWJuRh2km4AcSo3) This is a fullscreen page title

```
<div class="page-head set-bg hvh-100 center-it ov-light-alpha-60" data-img-src="../../assets/img/backgrounds/02.jpg">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter">
        <h4 class="head">Awesome</h4>
        <h1 class="title">FullScreen Page Title</h1>
        <h2 class="description">With these page titles you ca...</h2>
      </div>
    </div>
  </div>
</div>
```

![](/files/-LLV0BWLLnLMLEp20RA4) In this example we have used `.parallax-layer` class on `.title-wrapper` with `data-parallax-mode="mode-header-content"`

```
<div class="page-head hvh-60 set-bg ov-light-alpha-20" data-img-src="../../assets/img/backgrounds/05.jpg">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter parallax-layer" data-parallax-mode="mode-header-content">
        <h4 class="head">Awesome</h4>
        <h1 class="title">Parallax Title</h1>
        <h2 class="description">With these page titles you can do anything you want! Customize your page titles and give them meanings. We have an awesome documentation on this.</h2>
      </div>
    </div>
  </div>
</div>
```

Another variation to parallax content by adding `data-parallax-mode="mode-title"` to page-head.

```
<div class="page-head hvh-60 ov-light-alpha-20 parallax-layer" data-img-src="../../assets/img/backgrounds/05.jpg" data-parallax-mode="mode-title">
  <div class="container">
    <div class="tb-vcenter-wrapper">
      <div class="title-wrapper vcenter parallax-layer" data-parallax-mode="mode-header-content">
        <h4 class="head">Awesome</h4>
        <h1 class="title">Parallax Background &amp; Title</h1>
        <h2 class="description">With these page titles you can do anything you want! Customize your page titles and give them meanings. We have an awesome documentation on this.</h2>
      </div>
    </div>
  </div>
</div>
```