Tabler

Source code Sponsor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Page headers

Page heading examples for Tabler

Simple header

Overview

Dashboard

New view Create new report 
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">
        Overview
      </div>
      <h2 class="page-title">
        Dashboard
      </h2>
    </div>
    <div class="col-auto ms-auto">
      <div class="btn-list">
        <span class="d-none d-sm-inline">
          <a href="#" class="btn btn-white">
            New view
          </a>
        </span>
        <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
          <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
          <!-- SVG icon code -->
          Create new report
        </a>
        <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
          <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
          <!-- SVG icon code -->
        </a>
      </div>
    </div>
  </div>
</div>

With meta, avatar and actions

Paweł Kuna

UI Designer at Tabler
194 friends
Verified
Send message 
<div class="page-header">
  <div class="row align-items-center">
    <div class="col-auto">
      <span class="avatar avatar-md" style="background-image: url(...)"></span>
    </div>
    <div class="col">
      <h2 class="page-title">Paweł Kuna</h2>
      <div class="page-subtitle">
        <div class="row">
          <div class="col-auto">
            <!-- Download SVG icon from http://tabler-icons.io/i/building-skyscraper -->
            <!-- SVG icon code -->
            <a href="#" class="text-reset">UI Designer at Tabler</a>
          </div>
          <div class="col-auto">
            <!-- Download SVG icon from http://tabler-icons.io/i/users -->
            <!-- SVG icon code -->
            <a href="#" class="text-reset">194 friends</a>
          </div>
          <div class="col-auto text-success">
            <!-- Download SVG icon from http://tabler-icons.io/i/check -->
            <!-- SVG icon code with class="text-green" -->
            Verified
          </div>
        </div>
      </div>
    </div>
    <div class="col-auto d-none d-md-flex">
      <a href="#" class="btn btn-primary">
        <!-- Download SVG icon from http://tabler-icons.io/i/message -->
        <!-- SVG icon code -->
        Send message
      </a>
    </div>
  </div>
</div>

With meta, search and actions

Gallery

1-12 of 241 photos
Add photo 
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">Gallery</h2>
      <div class="text-muted mt-1">1-12 of 241 photos</div>
    </div>
    <div class="col-auto ms-auto d-print-none">
      <div class="d-flex">
        <div class="me-3 d-none d-md-block">
          <div class="input-icon">
            <input type="text" class="form-control" placeholder="Search…">
            <span class="input-icon-addon">
              <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
              <!-- SVG icon code -->
            </span>
          </div>
        </div>
        <a href="#" class="btn btn-primary">
          <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
          <!-- SVG icon code -->
          Add photo
        </a>
      </div>
    </div>
  </div>
</div>

Bordered header

Improve cards with no border

#693 opened by Jeffie Lewzey in Calendar Page
Edit Subscribe 
<div class="page-header page-header-border">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">Improve cards with no border</h2>
      <div class="text-muted mt-1">
        <a href="#" class="text-reset">#693</a>
        opened by <a href="#" class="text-body">Jeffie Lewzey</a>
        in <a href="#" class="text-body">Calendar Page</a>
      </div>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn btn-white">
          <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
          <!-- SVG icon code -->
          Edit
        </a>
        <a href="#" class="btn btn-white d-none d-md-inline-flex">
          <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
          <!-- SVG icon code -->
          Subscribe
        </a>
      </div>
    </div>
  </div>
</div>

Header with breadcrumb and actions

  1. Home
  2. Library
  3. Articles

Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.

Edit Publish 
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn btn-white d-none d-md-inline-flex">
          <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
          <!-- SVG icon code -->
          Edit
        </a>
        <a href="#" class="btn btn-primary">
          Publish
        </a>
      </div>
    </div>
  </div>
</div>