kengai

Alerts

<div class="alert alert-warning">
  A helpful, actionable message.
</div>

alert alert-success

alert alert-info

alert alert-warning

alert alert-error

<div class="{{modifier_class}}">{{modifier_class}}</div>

Add the avatar class to a <figure> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

For users who don't have profile pictures, you may use their initials for avatars. Add the avatar class and avatar size class to <div> or <figure> element. The data-initial attribute is the name appear inside the avatar.

<figure class="avatar avatar-xl">
  <img src="https://www.fillmurray.com/75/75" alt="...">
</figure>

<figure class="avatar avatar-xl" data-initial="AZ"></figure>
<figure class="avatar avatar-lg" data-initial="RS"></figure>
<figure class="avatar avatar-sm" data-initial="DS"></figure>
<figure class="avatar avatar-xs" data-initial="CO"></figure>

Badges

Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

Notifications Notifications

<span class="badge">
  Notifications
</span>

<span class="badge" data-badge="8">
  Notifications
</span>

<button class="btn badge" data-badge="8">
  Button
</button>

<figure class="avatar badge" data-badge="8" data-initial="YZ"></figure>

Bars

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.

15%

<div class="bar bar-sm">
  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="pad-1-2"></div>

<div class="bar">
  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
  <div class="bar-item" style="width:15%;background:#6cc4e3;">15%</div>
</div>

Breadcrumbs

Breadcrumbs are used as navigational hierarchies to indicate current location. Use when you have a nest of 3+ navigation systems, and use links in each breadcrumb section so users can find their way out of the tree.

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Settings</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Edit Profile</a>
  </li>
</ul>

Breadcrumbs with Tooltips

Add tooltips to breadcrumb-item elements to help users understand navigation names.

<ul class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#" class="tooltip" data-tooltip="Account">ACME</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#" class="tooltip" data-tooltip="Cluster">ACME_production</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#" class="tooltip" data-tooltip="Tenant Cluster">First tenant</a>
  </li>
</ul>

Cards

Use cards to create slightly differentiated content. Add a container element with the card class. And add child elements with the card-image, card-header, card-body and/or card-footer classes. The card-image can be placed in any position.

Card Title

this is the subtitle

Cards are flexible content containers.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Card Title</h3>
    <div class="card-subtitle text-gray">this is the subtitle</div>
  </div>
  <div class="card-body">
    Cards are flexible content containers.
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Card Action!</button>
  </div>
</div>

Chips

Tiny pieces of content, usually short strings, that may be clearable

a chipppp

clearable chip

Penelope Quix

<div class="chip">
  a chipppp
</div>

<div class="chip">
  clearable chip
  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</div>

<div class="chip">
  <figure class="avatar avatar-sm" data-initial="PQ"></figure>
  Penelope Quix
  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</div>

Dropdown

Dropdown menus component is built entirely in CSS. It is triggered by :focus event.

Add a container element with the dropdown class. And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it. You also need to add tabindex to make the buttons focusable.

If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.

Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown container.

<div class="dropdown">
  <a href="" class="btn btn-link dropdown-toggle" tabindex="0">
    dropdown menu <i class="icon icon-caret"></i>
  </a>
  <ul class="menu">
    <li class="menu-item">
      <a href="">
        <i class="fal fa-users"></i> &nbsp;
        Users
      </a>
    </li>
    <li class="menu-item">
      <a href="">
        <i class="fal fa-cog"></i> &nbsp;
        Accounts
      </a>
    </li>
    <li class="menu-item">
      <a href="">
        <i class="fal fa-money-bill-wave"></i> &nbsp;
        Billing
      </a>
    </li>
  </ul>
</div>

Empty states

Empty states/blank slates are used as placeholders for first time use, empty data and error screens.

An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

You have no new messages

Click the button to start a conversation.

<div class="empty">
  <div class="empty-icon">
    <i class="icon icon-people"></i>
  </div>
  <p class="empty-title h5">You have no new messages</p>
  <p class="empty-subtitle">Click the button to start a conversation.</p>
  <div class="empty-action">
    <button class="btn btn-primary">Send a message</button>
  </div>
</div>

Labels

Labels are formatted text tags for highlighted, informative information.

<span class="label">default label</span>
<span class="label label-primary">primary label</span>

label-primary

label-secondary

label-success

label-warning

label-error

<span class="label {{ modifier_class }}">{{ modifier_class }}</span>

Rounded Labels

Add the label-rounded class to have rounded labels.

default label primary label

<span class="label label-rounded label-default">default label</span>
<span class="label label-rounded label-primary">primary label</span>

Menus

A list of clickable items. Can be used in dropdowns, sidenavs, or larger component navs.

<ul class="menu">
  <li class="menu-item">
    <a href="#" class="active">Thing 1</a>
  </li>
  <li class="divider" data-content="FRUIT"></li>
  <li class="menu-item"><a href="#">Mango</a></li>
  <li class="menu-item"><a href="#">Pineapple</a></li>
  <li class="menu-item"><a href="#">Tomato</a></li>
</ul>

Meters

Credit: CSS-Tricks HTML Meter Element

Meters represent the value within the known range.

<meter class="meter" value="20" min="0" max="100"></meter>
<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>

Modals

Use for displaying an UI mode. Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.

This does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the active class to the modal container.

Open Modal

<a class="btn btn-primary" href="#modal-1">Open Modal</a>

<div class="modal" id="modal-1">
  <a href="#close" class="modal-overlay" aria-label="Close"></a>
  <div class="modal-container">
    <div class="modal-header">
      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
      <div class="modal-title h5">Modal title</div>
    </div>
    <div class="modal-body">
      <div class="content">
      </div>
    </div>
    <div class="modal-footer">
    </div>
  </div>
</div>

Navs

Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

<ul class="nav">
  <li class="nav-item">
    <a href="#">Accounts</a>
  </li>
  <li class="nav-item active">
    <a href="#">Clusters</a>
    <ul class="nav">
      <li class="nav-item">
        <a href="#">Direct</a>
      </li>
      <li class="nav-item">
        <a href="#">Heroku</a>
      </li>
      <li class="nav-item">
        <a href="#">Manifold</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a href="#">Users</a>
  </li>
  <li class="nav-item">
    <a href="#">Stacks</a>
  </li>
  <li class="nav-item">
    <a href="#">Regions</a>
  </li>
</ul>

Pagination

Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled class to the page-item to have unclickable page links.

Previous
1
2
3
...
12
Next

<ul class="pagination">
  <li class="page-item disabled">
    <a href="#" tabindex="-1">Previous</a>
  </li>
  <li class="page-item active">
    <a href="#">1</a>
  </li>
  <li class="page-item">
    <a href="#">2</a>
  </li>
  <li class="page-item">
    <a href="#">3</a>
  </li>
  <li class="page-item">
    <span>...</span>
  </li>
  <li class="page-item">
    <a href="#">12</a>
  </li>
  <li class="page-item">
    <a href="#">Next</a>
  </li>
</ul>

Panels

Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer classes. The panel-body can be auto expanded and vertically scrollable.

This is a panel

Status

Settings

Extras

Panel content

Table panel

Request Type	Request Counts	p99	p50	p25
200	2.6k	140ms	120ms	1400ms
201	10k	400ms	70ms	3200ms
404	334	102ms	10ms	500ms
500	12	10ms	1ms	100ms

<div class="panel">
  <div class="panel-header">
    <div class="panel-title">This is a panel</div>
  </div>
  <div class="panel-nav">
    <div class="tab">
      <div class="tab-item active"><a href="">Status</a></div>
      <div class="tab-item"><a href="">Settings</a></div>
      <div class="tab-item"><a href="">Extras</a></div>
    </div>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">
    <button class="btn btn-block btn-blue">Panel action</button>
  </div>
</div>


<div class="panel">
  <div class="panel-header">Table panel</div>
  <table class="table">
    <thead>
      <th>Request Type</th>
      <th>Request Counts</th>
      <th>p99</th>
      <th>p50</th>
      <th>p25</th>
    </thead>
    <tbody>
      <tr>
        <td>200</td>
        <td>2.6k</td>
        <td>140ms</td>
        <td>120ms</td>
        <td>1400ms</td>
      </tr>
      <tr>
        <td>201</td>
        <td>10k</td>
        <td>400ms</td>
        <td>70ms</td>
        <td>3200ms</td>
      </tr>
      <tr>
        <td>404</td>
        <td>334</td>
        <td>102ms</td>
        <td>10ms</td>
        <td>500ms</td>
      </tr>
      <tr>
        <td>500</td>
        <td>12</td>
        <td>10ms</td>
        <td>1ms</td>
        <td>100ms</td>
      </tr>
    </tbody>
  </table>
</div>

Popovers

Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use (Cards)[link] component inside the popover-container.

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

We often use popovers with info circle icons to help users with a feature or to clear clutter on the dashboard by moving warnings and alerts into the popover.

Section Title

A Popover within a header!

So neat!

<div class="popover popover-right">
  <button class="btn btn-blue">Generic Popover</button>
  <div class="popover-container">
    <div class="card">
      <div class="card-header">
        <h4>Information!</h4>
      </div>
      <div class="card-body">
        Hey. You're hovering over something for more information.
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-default">Read the docs <i class="fal fa-arrow-right"></i></a>
      </div>
    </div>
  </div>
</div>

<h4>
  Section Title
  <span class="popover popover-right">
    <i class="fal fa-question-circle c-hand"></i>
    <div class="popover-container">
      <div class="card">
        <div class="card-header">
          <h5>A Popover within a header!</h5>
        </div>
        <div class="card-body">
          So neat!
        </div>
      </div>
    </div>
  </span>
</h4>

Progress

Credit: (CSS-Tricks HTML Progress Element)[https://css-tricks.com/html5-progress-element/]

The Progress indicates the progress completion of a task.

<progress class="progress" value="25" max="100"></progress>
<progress class="progress" max="100"></progress>

Sliders

Credit: CSS-Tricks Range inputs

The Sliders are for selecting values from ranges.

You can add the class tooltip to have tooltip labels. If no data-tooltip is set, the value will be used instead.

<input class="slider" type="range" min="0" max="100" value="50">

<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">

Status Dot

A helpful status component

<div class="status-dot"></div>
<div class="status-dot green"></div>
<div class="status-dot yellow"></div>
<div class="status-dot red"></div>

Tabs

Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

<ul class="tab tab">
  <li class="tab-item active">
    <a href="#">Users</a>
  </li>
  <li class="tab-item">
    <a href="#">Clusters</a>
  </li>
  <li class="tab-item">
    <a href="#">Resources</a>
  </li>
  <li class="tab-item">
    <a href="#">Logs</a>
  </li>
</ul>

<ul class="tab tab-block">
  <li class="tab-item active">
    <a href="#">Music</a>
  </li>
  <li class="tab-item">
    <a href="#">Playlists</a>
  </li>
  <li class="tab-item">
    <a href="#">Radio</a>
  </li>
  <li class="tab-item">
    <a href="#">Connect</a>
  </li>
</ul>

Timelines

The Timelines are ordered sequences of activities, perfect for history and messaging.

Thing 1

Thing 2

<div class="timeline">
  <div class="timeline-item" id="timeline-example-1">
    <div class="timeline-left">
      <a class="timeline-icon" href="#timeline-example-1"></a>
    </div>
    <div class="timeline-content">
      Thing 1
    </div>
  </div>

  <div class="timeline-item" id="timeline-example-2">
    <div class="timeline-left">
      <a class="timeline-icon icon-lg" href="#timeline-example-2">
        <i class="icon icon-check"></i>
      </a>
    </div>
    <div class="timeline-content">
      Thing 2
    </div>
  </div>
</div>

Tooltips

Tooltips are tiny text helpers less than 50 characters. Add class tooltip to an element, with a data-tooltip attribute for the helper text.

By default, tooltips display on top of the element. Add class tooltip-right, tooltip-left, or tooltip-bottom for more options.

<span class="tooltip {{modifier_class}}" data-tooltip="{{modifier_class}}">{{modifier_class}}</span>

kengai

Components

Alerts

Avatars

Badges

Bars

Cards

Card Title

Chips

Dropdown

Empty states

Labels

Rounded Labels

Menus

Meters

Modals

Navs

Panels

Popovers

Information!

Section Title

A Popover within a header!

So neat!

A Popover within a header!

Progress

Sliders

Status Dot

Tabs

Timelines

Tooltips

Card Title

Information!

Section Title A Popover within a header! So neat!

A Popover within a header!

Section Title

A Popover within a header!

So neat!