Titles

Documentation about how to use a multiple titles styles for delimiting a page's sections.

Examples

You have multiple styles and alignment options to choose from. Use text utilities to left (default), center or right align a section title: .text-center or .text-right.

Default styles

Section title

Each title can be added on a section with light or dark background. For dark backgrounds you just need to apply the .section-title-inverse modifier class.

Section title

You can easily change the title's font size by using one of the pre-defined classes for heading (heading-1, heading-2 to heading-6). Replace thea heading's value with the one you need.

Section title

Start building fast, beautiful and modern looking websites in no time using our theme.

Example


<!-- Section title -->
<div class="section-title section-title--style-1 text-center">
    <h3 class="section-title-inner heading-2 strong-400">
        <span>Section title</span>
    </h3>
</div>

<!-- Section title with lead text -->
<div class="section-title section-title--style-1 text-center mb-0">
    <h3 class="section-title-inner heading-2 strong-400">
        <span>Section title</span>
    </h3>
</div>

<div class="fluid-paragraph fluid-paragraph-sm c-gray-light strong-300 text-center">
    Start building fast, beautiful and modern looking websites in no time using our theme.
</div>

Title decorations

Section title with delimiter

Start building fast, beautiful and modern looking websites in no time using our theme.

Section title with delimiter

Start building fast, beautiful and modern looking websites in no time using our theme.

Example


<div class="section-title section-title--style-1 text-center mb-4">
    <h3 class="section-title-inner heading-2 strong-400">
        <span>Section title with delimiter</span>
    </h3>
    <span class="section-title-delimiter clearfix"></span>
</div>

<div class="fluid-paragraph fluid-paragraph-sm c-gray-light strong-300 text-center">
    Start building fast, beautiful and modern looking websites in no time using our theme.
</div>

Section title with focus

Start building fast, beautiful and modern looking websites in no time using our theme.

Section title with focus

Start building fast, beautiful and modern looking websites in no time using our theme.

Example


<div class="section-title section-title--style-2 text-center mb-4">
    <h3 class="section-title-inner heading-2 strong-400">
        <span>Section title with focus</span>
    </h3>
</div>

<div class="fluid-paragraph fluid-paragraph-sm c-gray-light strong-300 text-center">
    Start building fast, beautiful and modern looking websites in no time using our theme.
</div>