Page heading examples for Tabler
<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>
<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>
<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>
<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>
<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>