Components

Avatars

Avatars are user or organisation profile pictures. User profiles always use the circular avatar, whereas an organisation would use a square avatar.

		<figure class="avatar">
          <img src="assets/avatar.png" alt="...">
        </figure>
        <figure class="avatar" style="background-image: url('assets/avatar.png');"></figure>
        <figure class="avatar" data-initial="YZ"></figure>
        <figure class="avatar avatar--square">
          <img src="assets/avatar.png" alt="...">
        </figure>
        <figure class="avatar avatar--square" data-initial="YZ"></figure>

Badges

Badges can be used to add extra information on certain things, like a number or to indicate that something new has been added. Add the dot class to add the red colour instead of the default grey behaviour.

• Metadata
• Pages

		<ul class="tab">
          <li class="tab__item active badge" data-badge="5">
            <a href="#">Metadata</a>
          </li>
          <li class="tab__item badge" data-badge="3">
            <a href="#">Pages</a>
          </li>
        </ul>
        
        <button class="btn btn--action badge dot btn--lg"><i class="redeye-location"></i></button>
        <button class="btn btn--action badge dot btn--lg" data-badge="5"><i class="redeye-location"></i></button>

Cards

Cards can be used to contain information. Modals also uses cards for its container.

		<div class="card">
          <button class="card__close-button btn btn--action btn--default"><i class="redeye-cross"></i></button>
          <div class="card__header">
            <div class="card__header__icon">
              <figure class="avatar avatar--square avatar--md">
                <img src="assets/avatar.png" alt="...">
              </figure>
            </div>
            <div class="card__header__content">
              <h2>Card Title</h2>
              <p>Some content in here.</p>
            </div>
          </div>
          <div class="divider"></div>
          <div class="card__section">
            <p>Somethingelse</p>
          </div>
        </div>

Adding the modifier card--full-size removes the border and border-radius of the card, as well as any top margins. This is commonly used in the search bar at the top of a page.

		<div class="card card--full-size">
          <h2>Card Title</h2>
          <p>Some content in here.</p>
        </div>

To make certain sections of a card to be scrollable based on the height of the card, add the modifier card--responsive and for the sections you'd like to be scrollable, add the modifier card__section--responsive.

		<div class="card card--responsive">
          <div class="card__section">
            This is the non-scrollversion
          </div>
          <div class="card__section card__section--responsive">
            THIS PART CAN SCROLLY Scroll scroll
          </div>
        </div>

Dropdowns

Dropdowns are used to add extra items to menus, etc.

		<div class="dropdown">
          <a href="javascript:void(0)" class="btn dropdown__toggle" tabindex="0">Dropdown <i class="redeye-chevron-down"></i></a>
          <ul class="dropdown__menu">
            <li class="dropdown__menu-item"><a href="#">Menu 1</a></li>
            <li class="dropdown__menu-item"><a href="#">Menu 2</a></li>
            <li class="dropdown__menu-item"><a href="#">Menu 3</a></li>
          </ul>
        </div>

Add the class dropdown--right to the dropdown container to make the flyout be right aligned.

Add the class dropdown--up to the dropdown container to make the flyout appear on top.

Add the class dropdown--up dropdown--right to the dropdown container to make the flyout appear on top right.

To use control the dropdowns using javascript, just add the modifier dropdown--js-open to the container. And to activate it, just add the modifier dropdown--active using js.

Tabs

Tabs are used as a form of nav for certain things. Add the tab--full-width modifier to set the tabs to go the full-width of the container.

• Music
• Playlists
• Radio
• Connect

		<ul class="tab">
          <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>

Tiles

Tiles are repeatable or embeddable information blocks.

You can add some modifiers to the tile itself --centered to center all contents vertically, --nowrap to make sure every line of content does not wrap, or --loading to show it as a loading state.

When placing them inside a container with the class tile-list, it adds some extra borders in between the tiles. Add the modifier, --hover to give it a hover state.

		<div class="tile-list">
          <div class="tile">
            <div class="tile__icon">
                <img src="assets/avatar.png" alt="...">
            </div>
            <div class="tile__content">
              <p class="tile__title">Title</p>
              <p class="tile__subtitle text-gray">...</p>
            </div>
            <div class="tile__action">
              <button class="btn">Action</button>
            </div>
          </div>
        </div>

Search Results

There are different ways to represent search results. Below are the given lists:

List View

The List view is basically a list tile, with a hover state.

Spreadsheet View

Here is what the spreadhseet view looks like, a standard table view. And you can add a loading state to the row by adding the row--loading class on the tr element.

Grid View

Map View

The map view is basically the list view on the left and a google map object on the right.

Modals

Modals are used to display extra information.

Open Modal

Add the class modal--sm or modal--lg to change the size of the modals.

		<div class="modal modal--active">
          <div class="modal__overlay"></div>
          <div class="modal__container">
            <button class="modal__close-button btn btn--action btn--default"><i class="redeye-cross"></i></button>
            <div class="modal__header">
              <h4>This is the header</h4>
            </div>
            <div class="modal__body">
              <p>Body here</p>
            </div>
            <div class="modal__footer">
              <button class="btn btn--success">Accept</button>
              <button class="btn btn--link btn--transparent">Close</button>
            </div>
          </div>
        </div>

Alerts

Alerts are used to display information and provide user options.

		<div class="tile tile--alert">
          <div class="tile__content">
              <p class="tile__title">The Avengers has requested to connect with your organisation.</p>
              <a>Accept</a>
              <a class="link--muted">Reject</a>
          </div>
        </div>

Toasts

Toasts are used to display the result of an action performed by the user. e.g. A job is created, an issue was added, etc.

Show Toast