View on GitHub

Dashhead

The dashhead is a component built to house all the textual headings, form controls, buttons, and more that are common for the top of dashboard page.

On this page

Examples

Dashboards

Overview

html

<div class="dashhead">
  <div class="dashhead-titles">
    <h6 class="dashhead-subtitle">Dashboards</h6>
    <h3 class="dashhead-title">Overview</h3>
  </div>

  <div class="dashhead-toolbar">
    <div class="input dashhead-toolbar-item">
      <input type="text" value="01/01/15 - 01/08/15" class="form-control" data-bs-provide="datepicker">
    </div>
    <span class="dashhead-toolbar-divider hidden-xs"></span>
    <div class="btn-group dashhead-toolbar-item btn-group-thirds">
      <button type="button" class="btn btn-outline-primary">Day</button>
      <button type="button" class="btn btn-outline-primary active">Week</button>
      <button type="button" class="btn btn-outline-primary">Month</button>
    </div>
  </div>
</div>

CSS

Sass variables

$dashhead-toolbar-margin-top:            $spacer * .8;
$dashhead-toolbar-icon-width:            $spacer * 11.2;
$dashhead-toolbar-icon-margin-bottom:    0;
$dashhead-toolbar-icon-margin-bottom-sm: $spacer * .6;
$dashhead-toolbar-divider-width:         $border-width;
$dashhead-toolbar-divider-height:        $spacer * 2.1;
$dashhead-toolbar-margin-x:              $spacer * .6;
$dashhead-toolbar-divider-bg:            $gray-200;

$dashhead-subtitle-margin-bottom:        $spacer * .25;
$dashhead-subtitle-color:                $nav-header-color;
$dashhead-subtitle-text-transform:       uppercase;