+ Documentation +
+Page Headers
+Paweł Kuna
+<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">
+ <!-- SVG icon code -->
+ <a href="#" class="text-reset">UI Designer at Tabler</a>
+ </div>
+ <div class="col-auto">
+ <!-- SVG icon code -->
+ <a href="#" class="text-reset">194 friends</a>
+ </div>
+ <div class="col-auto text-success">
+ <!-- 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">
+ <!-- SVG icon code -->
+ Send message
+ </a>
+ </div>
+ </div>
+</div>
+ Improve cards with no border
+ +<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">
+ <!-- SVG icon code -->
+ Edit
+ </a>
+ <a href="#" class="btn btn-white d-none d-md-inline-flex">
+ <!-- SVG icon code -->
+ Subscribe
+ </a>
+ </div>
+ </div>
+ </div>
+</div>
+ + Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. +
+<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">
+ <!-- SVG icon code -->
+ Edit
+ </a>
+ <a href="#" class="btn btn-primary">
+ Publish
+ </a>
+ </div>
+ </div>
+ </div>
+</div>
+ + Dashboard +
+<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">
+ <!-- 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">
+ <!-- SVG icon code -->
+ </a>
+ </div>
+ </div>
+ </div>
+</div>
+