Page Titles

The page title is the header band that sits directly below the site header on inner pages. It holds the page heading, an optional tagline, and a breadcrumb trail. In Canvas it is a <section class="page-title"> block with several ready to use variants.

Structure

The base markup uses .page-title on the section, a .container, a .page-title-row flex wrapper, a .page-title-content block for the <h1> + <span> tagline, and a Bootstrap .breadcrumb inside a <nav>.

<section class="page-title">
    <div class="container">
        <div class="page-title-row">

            <div class="page-title-content">
                <h1>Page Title</h1>
                <span>A Short Page Title Tagline</span>
            </div>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Templates</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Page Titles</li>
                </ol>
            </nav>

        </div>
    </div>
</section><!-- .page-title end -->

Variants

Add a modifier class alongside .page-title to change the layout. Each variant below is a real class combination shipped in the package.

Centered heading and breadcrumb, transparent background:

<section class="page-title page-title-center bg-transparent">
    <div class="container">
        <div class="page-title-row">
            <div class="page-title-content">
                <h1>Page Title Center</h1>
                <span>A Short Page Title Tagline</span>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Page Titles</li>
                </ol>
            </nav>
        </div>
    </div>
</section>

Right aligned heading:

<section class="page-title page-title-right bg-transparent">
    ...
</section>

Compact mini bar:

<section class="page-title page-title-mini bg-transparent">
    ...
</section>

Dark scheme:

<section class="page-title dark">
    ...
</section>

Parallax background image. Add .page-title-parallax .parallax .scroll-detect .dark and drop a .parallax-bg image as the first child. The heading and tagline can animate in:

<section class="page-title page-title-parallax parallax scroll-detect dark">
    <img src="images/parallax/8.jpg" class="parallax-bg">
    <div class="container">
        <div class="page-title-row">
            <div class="page-title-content">
                <h1 data-animate="fadeInUp">Page Title Parallax</h1>
                <span data-animate="fadeInUp" data-delay="300">A Short Page Title Tagline</span>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Page Titles</li>
                </ol>
            </nav>
        </div>
    </div>
</section>

Options

.page-title-center: centers the heading block and the breadcrumb.
.page-title-right: right aligns the heading.
.page-title-mini: reduced padding compact bar.
.page-title-parallax: pairs with .parallax .scroll-detect and a .parallax-bg image.
.dark: dark color scheme for the band.
.bg-transparent: removes the default background so the page background shows through.

Tips

The <h1> should carry the real page heading for SEO, one per page.
Keep the breadcrumb inside <nav aria-label="breadcrumb"> with an <ol class="breadcrumb"> for accessibility. Mark the current page with .active and aria-current="page".
On the parallax variant, put the <img class="parallax-bg"> as the first child of the section so it fills the band behind the content.
Animations use data-animate with an optional data-delay in milliseconds to stagger the heading and tagline.

Settings

Setting	Description
`Default`	Default Page Title style with Text aligned Left & Breadcrumbs Right. Example: `<section class="page-title"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.page-title-right`	Page Title style with Text aligned Right & Breadcrumbs Left. Example: `<section class="page-title page-title-right"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.page-title-center`	Page Title style with Text & Breadcrumbs aligned Center. Example: `<section class="page-title page-title-center"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.page-title-mini`	Page Title style with Mini Title. Example: `<section class="page-title page-title-mini"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.dark`	Page Title style with Background Color Dark. Example: `<section class="page-title dark"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.bg-transparent`	Page Title style with Background Color Transparent. Example: `<section class="page-title bg-transparent"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.page-title-pattern`	Page Title style with a Background Pattern. Example: `<section class="page-title page-title-pattern"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>`
`.page-title-parallax`	Page Title style with a Parallax Image. Example: <section class="page-title page-title-parallax parallax dark"> <img src="images/parallax/8.jpg" class="parallax-bg"> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1 data-animate="fadeInUp">Page Title Parallax</h1> <span data-animate="fadeInUp" data-delay="300">A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>
`.page-title-video`	Page Title style with a HTML5 Video. Example: <section class="page-title parallax page-title-parallax dark page-title-video include-header"> <div class="video-wrap no-placeholder"> <video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted playsinline class="parallax-bg"> <source src='images/videos/deskwork.mp4' type='video/mp4'> <source src='images/videos/deskwork.webm' type='video/webm'> </video> <div class="video-overlay"></div> </div> <div class="container"> <div class="page-title-row"> <div class="page-title-content"> <h1>Page Title Video</h1> <span>A Short Page Title Tagline</span> </div> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</li> <li class="breadcrumb-item"><a href="#">Templates</li> <li class="breadcrumb-item active" aria-current="page">Page Titles</li> </ol> </nav> </div> </div> </section>

Was this page helpful?