#### Limitless - Page Header

##### Page header component

Page header - component that displays page title and optional custom components. Depending on the layout variation, page header can have transparent, white, dark, custom light and dark colors. By default, page header supports title with or without icon, subtitle and optional components that appear on the right side of the header area.

All optional components are available in both card header and page header components and use same markup, all of them are adapted to any height of the headers and always vertically centered. Mobile layout varies: visible inline, visible stacked, hidden and collapsible.

Component | Description
--- | ---
Buttons | All button options, including floating buttons
Button dropdowns | Button dropdowns with all available options
Labeled buttons | Transparent buttons with icon and text label
Outlined buttons | Transparent buttons with custom border and text colors
Input fields | All available input fields with options
Input groups | Input groups with all available options
Checkboxes, radios | Unstyled, styles, switchery toggles and Bootstrap switches
Selects | Default, styled, Select2, Bootstrap multiselect and custom BS selects
File input | Single file input, styled and unstyled
Tabs | Tabs nav, available in panel header only
Pills | Pills nav, available in panel header only
Text, links | Text with links, all possible options
Badges | Badges and badge pills in all variations
Icons | Single and multiple icons list
Pagination | Pagination and pager components in 3 sizes
Date picker | Date range picker attached to the button and with custom display format

###### Page header markup

Page header markup is identical in all layouts, but in some layouts default page header classes can be different. This was made to reduce number of classes in markup if default page header style is different. Default page header markup is:

    <!-- Page header -->
    <div class="page-header page-header-light">

    	<!-- Page header content -->
    	<div class="page-header-content header-elements-md-inline">

    		<!-- Page title -->
    		<div class="page-title">
    			<h4><i class="icon-arrow-left52 mr-2"></i> Page Title</h4>
    		</div>
    		<!-- /page title -->

    		<!-- Header elements -->
    		<div class="header-elements">
    			...
    		</div>
    		<!-- /header elements -->

    	</div>
    	<!-- /page header content -->

    </div>
    <!-- /page header -->

###### Page header elements

The table above demonstrates what components can be ised in page header area. All these components are completely optional. All components are hidden on mobiles and tablets and can be reached by clicking toggle button on the right side of the header area, all components are displayed as block elements and appear below the page header. In future releases header components list will be extended with new components according to the functionality additions.

Example of page header components:

    <!-- Page header -->
    <div class="page-header page-header-light">

    	<!-- Header content -->
    	<div class="page-header-content header-elements-md-inline">

    		<!-- Header title -->
    		<div class="page-title d-flex">
    			<h4><i class="icon-arrow-left52 mr-2"></i> Page title</h4>
    			<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
    		</div>
    		<!-- /header title -->

    		<!-- Header elements -->
    		<div class="header-elements d-none">
    			<div class="d-flex justify-content-center">
    				<a href="#" class="btn btn-link btn-float text-default">
    					<i class="icon-bars-alt text-primary"></i>
    					<span>Statistics</span>
    				</a>
    				<a href="#" class="btn btn-link btn-float text-default">
    					<i class="icon-calculator text-primary"></i>
    					<span>Invoices</span>
    				</a>
    				<a href="#" class="btn btn-link btn-float text-default">
    					<i class="icon-calendar5 text-primary"></i>
    					<span>Schedule</span>
    				</a>
    			</div>
    		</div>
    		<!-- /header elements -->

    	</div>
    	<!-- /header content -->

    </div>
    <!-- /page header -->