Page headers Dashkit only

The page header component that can be easily extended with other Bootstrap and Dashkit components.

Basic

The basic page header with a preheading and a heading.

Members

Dianna Smiley

<div class="header">
  <div class="header-body">

    <h6 class="header-pretitle">
      Members
    </h6>
    
    <h1 class="header-title">
      Casey Fyfe
    </h1>

  </div>
</div>

Button

The basic page header extended with a button.

Members

Dianna Smiley

Subscribe
<div class="header">
  <div class="header-body">
    <div class="row align-items-center">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>
        
        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">

        <a href="#" class="btn btn-primary">
          Subscribe
        </a>

      </div>
    </div>

  </div>
</div>

Nav

The basic page header extended with a tabbed navigation.

Members

Dianna Smiley

<div class="header">
  <div class="header-body">
    <div class="row align-items-end">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>

        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">

        <ul class="nav nav-tabs header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link text-center active">
              Daily
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Weekly
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Monthly
            </a>
          </li>
        </ul>

      </div>
    </div> 

  </div>
</div>

Button + nav

The basic page header extended with a button and a tabbed navigation.

Members

Dianna Smiley

Subscribe
<div class="header">
  <div class="header-body">
    <div class="row align-items-end">
      <div class="col">

        <h6 class="header-pretitle">
          Members
        </h6>

        <h1 class="header-title">
          Casey Fyfe
        </h1>
        
      </div>
      <div class="col-auto">
        
        <a href="#" class="btn btn-primary">
          Subscribe
        </a>

      </div>
    </div>
    <div class="row">
      <div class="col-12">

        <ul class="nav nav-tabs header-tabs">
          <li class="nav-item">
            <a href="#" class="nav-link text-center active">
              Daily
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Weekly
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link text-center">
              Monthly
            </a>
          </li>
        </ul>
      
      </div>
    </div>
  </div>
</div>

Avatar + nav

The basic page header extended with an avatar group and a tabbed navigation.

...
Projects

Homepage

... ... ... ...
+
<div class="header">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Avatar -->
          <div class="avatar avatar-lg avatar-4by3">
            <img src="{{webRoot}}/{{webRoot}}/assets/img/avatars/projects/project-1.jpg" alt="..." class="avatar-img rounded">
          </div>

        </div>
        <div class="col ms-n3 ms-md-n2">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Projects
          </h6>

          <!-- Title -->
          <h1 class="header-title">
            Homepage
          </h1>

        </div>
        <div class="col-12 col-md-auto mt-3 mt-md-0">

          <!-- Avatar group -->
          <div class="avatar-group">
            <a href="profile-posts.html" class="avatar">
              <img src="{{webRoot}}/{{webRoot}}/assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar">
              <img src="{{webRoot}}/{{webRoot}}/assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar">
              <img src="{{webRoot}}/{{webRoot}}/assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar">
              <img src="{{webRoot}}/{{webRoot}}/assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
          </div>

          <!-- Button -->
          <a href="#modalMembers" class="btn btn-lg btn-rounded-circle btn-white lift" data-bs-toggle="modal">
            +
          </a>

        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="project-overview.html" class="nav-link active">
                Overview
              </a>
            </li>
            <li class="nav-item">
              <a href="project-files.html" class="nav-link">
                Files
              </a>
            </li>
            <li class="nav-item">
              <a href="project-reports.html" class="nav-link">
                Reports
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</div> <!-- / .header -->

Cover image

A complex page header variation with an image, avatar and other optional components.

...
...
Members

Dianna Smiley

Subscribe
<div class="header">

  <!-- Image -->
  <img src="{{webRoot}}/{{webRoot}}/assets/img/covers/profile-cover-1.jpg" class="header-img-top" alt="...">

  <!-- Body -->
  <div class="container-fluid">
    <div class="header-body mt-n5 mt-md-n6">
      <div class="row align-items-end">
        <div class="col-auto">

          <!-- Avatar -->
          <div class="avatar avatar-xxl header-avatar-top">
            <img src="{{webRoot}}/{{webRoot}}/assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle border border-4 border-card">
          </div>

        </div>
        <div class="col mb-3 ms-n3 ms-md-n2">

          <!-- Pretitle -->
          <h6 class="header-pretitle">
            Members
          </h6>

          <!-- Title -->
          <h1 class="header-title">
            Dianna Smiley
          </h1>

        </div>
        <div class="col-12 col-md-auto mt-2 mt-md-0 mb-md-3">

          <!-- Button -->
          <a href="#!" class="btn btn-primary d-block d-md-inline-block">
            Subscribe
          </a>

        </div>
      </div> <!-- / .row -->
      <div class="row align-items-center">
        <div class="col">

          <!-- Nav -->
          <ul class="nav nav-tabs nav-overflow header-tabs">
            <li class="nav-item">
              <a href="profile-posts.html" class="nav-link">
                Posts
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-groups.html" class="nav-link active">
                Groups
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-projects.html" class="nav-link">
                Projects
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-files.html" class="nav-link">
                Files
              </a>
            </li>
            <li class="nav-item">
              <a href="profile-subscribers.html" class="nav-link">
                Subscribers
              </a>
            </li>
          </ul>

        </div>
      </div>
    </div> <!-- / .header-body -->
  </div>
  
</div>

Chart

A complex page header variation with a tabbed navigation and a chart.

Annual

Audience

<div class="header bg-dark pb-5">
  <div class="container-fluid">

    <!-- Body -->
    <div class="header-body">
      <div class="row align-items-end">
        <div class="col">

          <!-- Pretitle -->
          <h6 class="header-pretitle text-secondary">
            Annual
          </h6>

          <!-- Title -->
          <h1 class="header-title text-white">
            Audience
          </h1>

        </div>
        <div class="col-auto">

          <!-- Nav -->
          <ul class="nav nav-tabs header-tabs">
            <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="0">
              <a href="#" class="nav-link text-center active" data-bs-toggle="tab">
                <h6 class="header-pretitle text-secondary">
                  Users
                </h6>
                <h3 class="text-white mb-0">
                  73.2k
                </h3>
              </a>
            </li>
            <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="1">
              <a href="#" class="nav-link text-center" data-bs-toggle="tab">
                <h6 class="header-pretitle text-secondary">
                  Sessions
                </h6>
                <h3 class="text-white mb-0">
                  92.1k
                </h3>
              </a>
            </li>
            <li class="nav-item" data-toggle="chart" data-target="#audienceChart" data-trigger="click" data-action="toggle" data-dataset="2">
              <a href="#" class="nav-link text-center" data-bs-toggle="tab">
                <h6 class="header-pretitle text-secondary">
                  Bounce
                </h6>
                <h3 class="text-white mb-0">
                  50.2%
                </h3>
              </a>
            </li>
          </ul>

        </div>
      </div> <!-- / .row -->
    </div> <!-- / .header-body -->

    <!-- Footer -->
    <div class="header-footer">

      <!-- Chart -->
      <div class="chart">
        <canvas id="audienceChart" class="chart-canvas"></canvas>
      </div>

    </div>

  </div>
</div> <!-- / .header -->