## Documentation

# Page headers

Page heading examples for Tabler

## Simple header

    <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

    <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

    <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

    <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">
              <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
              <!-- SVG icon code -->
              Edit
            </a>
            <a href="#" class="btn 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

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

##### New report

Name
Report type
Simple Provide only basic data needed for the report
Advanced Insert charts and additional advanced analyses to be inserted in the report
Report url
https://tabler.io/reports/
Visibility
Client name
Reporting period
Additional information