<div class="padding">
  <h6>Basic</h6>
  <div class="row m-b">
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-tool">
          <ul class="nav">
            <li class="nav-item inline">
              <a class="nav-link">
                <i class="material-icons md-18">&#xe863;</i>
              </a>
            </li>
            <li class="nav-item inline dropdown">
              <a class="nav-link" data-toggle="dropdown">
                <i class="material-icons md-18">&#xe5d4;</i>
              </a>
              <div class="dropdown-menu pull-right">
                <a class="dropdown-item" href>Action</a>
                <a class="dropdown-item" href>Another action</a>
                <a class="dropdown-item" href>Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item">Separated link</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header dker">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body dker">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
  </div>
  <h6>Colors</h6>
  <div class="row m-b">
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header {{app.setting.theme.primary}}">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
          <div class="box-tool">
            <ul class="nav">
              <li class="nav-item inline">
                <a class="nav-link">
                  <i class="material-icons md-18">&#xe863;</i>
                </a>
              </li>
              <li class="nav-item inline dropdown">
                <a class="nav-link" data-toggle="dropdown">
                  <i class="material-icons md-18">&#xe5d4;</i>
                </a>
                <div class="dropdown-menu dropdown-menu-scale pull-right">
                  <a class="dropdown-item" href>Action</a>
                  <a class="dropdown-item" href>Another action</a>
                  <a class="dropdown-item" href>Something else here</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item">Separated link</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header {{app.setting.theme.accent}}">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header {{app.setting.theme.warn}}">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body dker">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header indigo">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
          <div class="box-tool">
            <ul class="nav">
              <li class="nav-item inline">
                <a class="nav-link">
                  <i class="material-icons md-18">&#xe863;</i>
                </a>
              </li>
              <li class="nav-item inline dropdown">
                <a class="nav-link" data-toggle="dropdown">
                  <i class="material-icons md-18">&#xe5d4;</i>
                </a>
                <div class="dropdown-menu dropdown-menu-scale pull-right">
                  <a class="dropdown-item" href>Action</a>
                  <a class="dropdown-item" href>Another action</a>
                  <a class="dropdown-item" href>Something else here</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item">Separated link</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="box-body indigo-600">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box purple">
        <div class="box-header">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box blue">
        <div class="box-header">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body b-t">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
  </div>
  <h6>Other options</h6>
  <div class="row m-b">
    <div class="col-sm-4">
      <div class="box-color text-color">
        <div class="box-header">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
          <div class="box-tool">
            <ul class="nav">
              <li class="nav-item inline">
                <a class="nav-link">
                  <i class="material-icons md-18">&#xe863;</i>
                </a>
              </li>
              <li class="nav-item inline dropdown">
                <a class="nav-link" data-toggle="dropdown">
                  <i class="material-icons md-18">&#xe5d4;</i>
                </a>
                <div class="dropdown-menu dropdown-menu-scale pull-right">
                  <a class="dropdown-item" href>Action</a>
                  <a class="dropdown-item" href>Another action</a>
                  <a class="dropdown-item" href>Something else here</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item">Separated link</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="box">
        <div class="box-header light-blue-200">
          <h3>Box Header</h3>
          <small>Sub title goes here with small font</small>
        </div>
        <div class="box-body">
          <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam-0 m-b-smitudin egestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae elementu</p>
        </div>
      </div>
    </div>
  </div>
</div>
