Page Header

The page header component.

Basic

The basic page header with title and text.

                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm">
                            <h2 class="page-header-title">Users</h2>
                            <p class="page-header-text">This is a description text.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->
                    
                  

Reset

Use .page-header-reset to remove border and padding spaces.

                    
                      <!-- Page Header -->
                      <div class="page-header page-header-reset">
                        <div class="row align-items-center">
                          <div class="col-sm">
                            <h2 class="page-header-title">Users</h2>
                            <p class="page-header-text">This is a description text.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->
                    
                  

Button

                    
                      <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col-sm mb-2 mb-sm-0">
                            <h2 class="page-header-title">Users</h2>
                          </div>

                          <div class="col-sm-auto">
                            <a class="btn btn-sm btn-primary" href="javascript:;">
                              <i class="fas fa-user-plus mr-1"></i> Invite users
                            </a>
                          </div>
                        </div>
                      </div>
                      <!-- End Page Header -->