# Page Titles

## Default page title

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0BW7_bGXveIuE0aE%2Fpt-1.png?generation=1535987993400769\&alt=media)

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

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0BW9mWyJuJfuzR2a%2Fpt-2.png?generation=1535988003612935\&alt=media) **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>
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0BWBf-jc_620aNLr%2Fpt-3.png?generation=1535988003917483\&alt=media)

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

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0BWHq10wK4Cbw_qS%2Fpt-4.png?generation=1535988004097292\&alt=media)

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

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0BWJuRh2km4AcSo3%2Fpt-5.png?generation=1535988004304701\&alt=media) 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>
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0BWLLnLMLEp20RA4%2Fpt-6.png?generation=1535988011007393\&alt=media) 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>
```