Elements

There are a few different elements here:

Typography

Different types of typography as below

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

		<div>
          <h1>H1 Heading</h1>
          <h2>H2 Heading</h2>
          <div>Hello</div>
        </div>

Paragraphs

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, eum architecto corporis aperiam, fugiat cum exercitationem cupiditate, facere molestiae expedita repellat alias quis neque. Libero atque voluptatum earum ut soluta.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil ratione nostrum hic quod soluta sint rerum, ipsam, deserunt consequatur suscipit nemo minus iste illo accusamus repudiandae assumenda corrupti dolorum consectetur.

		<p>Lorem...</p>
        <p>Lorem...</p>

Links

Links inline are like this. And muted ones are like this.

		<p>Links inline are like <a href="#">this</a>. And muted ones are like <a href="#" class="link--muted">this</a></p>

Buttons

The different buttons available

Button Button Default Button Transparent Button Link Button Success Button Warning Button Danger

		<button class="btn">Button</button>
        <button class="btn btn--default">Button Default</button>
        <button class="btn btn--transparent">Button Transparent</button>
        <button class="btn btn--link">Button Link</button>
        <button class="btn btn--success">Button Success</button>
        <button class="btn btn--warning">Button Warning</button>
        <button class="btn btn--danger">Button Danger</button>

Disabled states

Button Button Default Button Transparent Button Link Button Success Button Warning Button Danger

		<button class="btn btn--default" disabled>Button Default</button>
        <button class="btn btn--default disabled">Button Default</button>

Sizes

These are the different sizes available for the buttons.

Button Small Button Button Large

		<button class="btn btn--sm">Button Small</button>
        <button class="btn">Button</button>
        <button class="btn btn--lg">Button Large</button>

Button Groups

You can group buttons together, commonly used in choosing the type of list. You can just wrap multiple buttons inside a <div class="btn-group">[buttons]</div>.

Add the class btn-group--vertical to the group to create a vertical button group.

Action Buttons

For certain actions, these are the action buttons

		<button class="btn btn--action"><i class="redeye-cross"></i></button>
        <button class="btn btn--action btn--default"><i class="redeye-cross"></i></button>
        <button class="btn btn--action btn--lg"><i class="redeye-cross"></i></button>

Basic Forms

A basic form field has a floating label and the input field

You can add an action link or a hint for the form, as well as a prefix or suffix.

		<div class="form">
          <div class="form__input">
            <span class="form__prefix">$</span>
            <input id="input-example" type="text" placeholder="placeholder">
            <span class="form__suffix">mm</span>
            <label for="input-example" class="form__label">Label</label>
            <div class="form__line"></div>
            <a href="#" class="form__action">Action</a>
          </div>
          <label class="form__hint">This is a hint</label>
        </div>

There are different states that the forms can be in on top of its standard state. Just add the form--error or form--success class to the container group. This will then change the border color and add a validation icon at the end of the input box

Input Types

Listed below are the different HTML5 input types

Checkboxes and radios

		<div class="form">
          <div class="form__checkbox">
            <label for="" class="form__label">This is a Checkbox</label>
            <label class="form__option">
              <input type="checkbox">
              <i class="form__option__icon redeye-check"></i>
              Something Awesome
            </label>
            <label class="form__option">
              <input type="checkbox">
              <i class="form__option__icon redeye-check"></i>
              Something Not Awesome
            </label>
          </div>
        </div>
        
        <div class="form">
          <div class="form__radio">
            <label for="" class="form__label">This is a radio</label>
            <label class="form__option">
              <input type="radio" name="testradio[]">
              <i class="form__option__icon"></i>
              Something Awesome
            </label>
            <label class="form__option">
              <input type="radio" name="testradio[]">
              <i class="form__option__icon"></i>
              Something Not Awesome
            </label>
          </div>
        </div>

		<div class="form form--inline">
          <div class="form__radio form__radio--group">
            <label for="" class="form__label">This is a radio group</label>
            <label class="form__option">
              <input type="radio" name="test123[]" value="1">
              <span class="form__option-label">All</span>
            </label>
            <label class="form__option">
              <input type="radio" name="test123[]" value="2">
              <span class="form__option-label">Templates</span>
            </label>
            <label class="form__option">
              <input type="radio" name="test123[]" value="3">
              <span class="form__option-label">Template Sets</span>
            </label>
          </div>
        </div>

Range Input

		<div class="form">
          <div class="form__range">
            <button class="btn btn--transparent btn--link"><i class="form__range-icon redeye-chevron-left"></i></button>
            <input type="range" name="" id="" min="0" max="100" step="1">
            <button class="btn btn--transparent btn--link"><i class="form__range-icon redeye-chevron-right"></i></button>
          </div>
          <div class="form__range-value">50 / 100mm</div>
        </div>

Select Dropdown Input

		<div class="form">
          <div class="form__input">
            <select name="" id="" class="form__select" value="def">
              <option value="def" disabled>Choose an option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
            <div class="form__line"></div>
          </div>
        </div>

Search/Filter Forms

For simple search with suggestions, we have the following styling

For the advanced search/filtering, we have a different set of styling.

		<div class="form-filter">
          <input type="text" class="form-filter__search" placeholder="Search Title, Number, Groups & Metadata">
          <i class="redeye-search form-filter__icon"></i>
        </div>
        
        <div class="form-filter-advanced">
          <select name="type" class="form-filter-advanced__dropdown">
            <option value="Tag">Tag</option>
            <option value="Title">Title</option>
            <option value="Location">Location</option>
          </select>
          <select name="verb" class="form-filter-advanced__dropdown">
            <option value="Is">Is</option>
            <option value="Starts with">Starts with</option>
            <option value="Ends with">Ends with</option>
          </select>
          <input type="text" class="form-filter-advanced__search">
          <button class="btn btn--transparent"><i class="redeye-cross"></i></button>
          <button class="btn btn--transparent"><i class="redeye-cross"></i></button>
        </div>

Tags

Below are some tags that can be used.

Tag Tag Default Tag Transparent Tag Success Tag Warning Tag Danger

		<label class="tag">Tag</label>
        <label class="tag tag--default">Tag Default</label>
        <label class="tag tag--transparent">Tag Transparent</label>
        <label class="tag tag--success">Tag Success</label>
        <label class="tag tag--warning">Tag Warning</label>
        <label class="tag tag--danger">Tag Danger</label>