Components

Components are reusable blocks that can be used across any part of a Calcite site. They can be used within patterns or on their own.

Buttons

Buttons are created by adding a class of btn to either a <button> or <a> element. btn-{color} classes can be mixed with btn-{style} classes.

<a href="#" class="btn"> Button </a>
<button class="btn">  Button </button>
<button class="btn btn-red btn-arrow">  Red Button with Arrow </button>

Button Links

Sometimes, the proper semantic element is a button, but you would rather the element look more like a link. In these instances, Calcite Web provides an alternate class btn-link which styles a button element as if it were a simple anchor:

<button class="btn-link">This is a button</button>

Base

.btn

<button class="btn modifier-class"> btn modifier-class </button>

Modifiers

.btn-transparent

.btn-clear

.btn-clear-white

.btn-small

.btn-large

.btn-fill

.btn-half

.btn-disabled

.btn-white

.btn-red

.btn-green

Button Groups

Button groups are ... groups of buttons. The button group allows for sets of buttons to be directly adjacent to each other without borders or margins interfering.

.btn-grouped

<nav class="leader-1">
  <button class="btn btn-grouped">One</button>
  <button class="btn btn-grouped">Two</button>
  <button class="btn btn-grouped">Three</button>
</nav>

Labels

Labels are a way to call attention to a word. The mark element, a notification count, or an important indicator (like marking a technology as 'beta' or 'private') are all use cases for labels.

Labels should be limited to one or two words and should only be used in situations where the content in the label is quite important. Labels are sized in em units, so they will scale up with whatever element they are inside.

Base

beta .label

<mark class="label modifier-class">beta</mark>

Modifiers

beta .label-blue

beta .label-green

beta .label-yellow

beta .label-red

Dropdowns

Dropdowns rely on the calcite-web.js JavaScript library for their functionality. See the JavaScript Documentation for more information.

Dropdowns are good for showing multiple options under a single call to action. For example, if you had a download button, and you needed the user to choose a format for the download, you could put several choices in a dropdown.

Dropdowns differ from select elements in that they don't have a default state or a 'current' state. Instead, they offer a jumping off point for a series of related actions.

Note: Be sure to give the elements inside your dropdown the role of menuitem to ensure they're accessible to screen readers.

Base

.dropdown

<div class="dropdown js-dropdown">
  <!-- extends side-nav -->
  <button class="btn btn-transparent dropdown-btn js-dropdown-toggle" tabindex="0" aria-haspopup="true" aria-expanded="false">
    Dropdown Select
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
  </button>
  <!-- extends side-nav -->
  <nav class="dropdown-menu modifier-class" role="menu">
    <!-- extends side-nav-link -->
    <span class="dropdown-title">Some Options</span>
    <a href="#" class="dropdown-link" role="menuitem">Option 1 that has a really long text.</a>
    <a href="#" class="dropdown-link" role="menuitem">Option 2</a>
    <a href="#" class="dropdown-link" role="menuitem">Option 3</a>
    <span class="dropdown-title">More Options</span>
    <button class="dropdown-link" role="menuitem">Option 4</button>
    <a href="#" class="dropdown-link" role="menuitem">Option 5</a>
  </nav>
</div>

Modifiers

.dropdown-right

Loader

The loader element is a placeholder while content is being retrieved or rendered. By default, the loader is set to display: none; and requires an is-active class to display.

.loader

<div class="loader is-active padding-leader-3 padding-trailer-3">
  <div class="loader-bars"></div>
  <div class="loader-text">Loading...</div>
</div>

Alerts

Alerts are used to inform users of state changes, errors, or successful actions. Alerts are only visible if they have the is-active class. Without as is-active class, the alert will be set to display: none;

Calcite does not manage alert classes by default - you will have to write your own JavaScript handlers for this.

Base

Something Happened!

.alert

<div class="alert modifier-class is-active">
  Something Happened!
  <button class="alert-close">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="svg-icon">
      <path d="M18.404 16l9.9 9.9-2.404 2.404-9.9-9.9-9.9 9.9L3.696 25.9l9.9-9.9-9.9-9.898L6.1 3.698l9.9 9.899 9.9-9.9 2.404 2.406-9.9 9.898z"/>
    </svg>
  </button>
</div>

Modifiers

Something Happened!

.alert-red

Something Happened!

.alert-yellow

Something Happened!

.alert-green

Something Happened!

.alert-full

Panels

Panels are useful to draw attention or contain certain text on a page. They are simple containers, which can be used to help guide users through the visual hierarchy of your design.

Note: be sure to use the link modifier classes to style links within a panel so that they pass WCAG 2.0 accessibility color contrast. For standard light-gray panels, use link-dark-blue.