CargoLoop's Pattern Library

Welcome to CargoLoop's pattern library. A component-driven library that's core focus is to provide developers and designers with the necessary pieces to build and maintain the evolving interface. The library consists of four main pieces: elements, components, layout and resources. Similar to CargoLoop's interface, the pattern library will continue to grow and evolve as new elements are needed.

Elements

Colors

The color palette is comprised of 14 core colors. The grays are used for backgrounds, borders and elements that are disabled. The brightest colors in the palette - red, yellow and green - are used to draw attention to a user. Finally, the most dominant colors - orange and blue - are used for navigation and basic interactions. Shades of these colors can be used if needed. It's best to generate them through the lighten() / darken() Sass functions.

Primary Colors

Red Base
- Variable Value: $red-base
- Hex Value: #FF5A4D
- RGBA Value: 255, 90, 77, 1
Blue Light
- Variable Value: $blue-light
- Hex Value: #5CA9FB
- RGBA Value: 92, 169, 251, 1
Green Base
- Variable Value: $green-base
- Hex Value: #47D78D
- RGBA Value: 71, 215, 141, 1

Secondary Colors

Black Base
- Variable Value: $black-base
- Hex Value: #1B2431
- RGBA Value: 27, 36, 49, 1
Yellow Base
- Variable Value: $yellow-base
- Hex Value: #F9B65A
- RGBA Value: 249, 182, 90, 1
Orange Base
- Variable Value: $orange-base
- Hex Value: #FB8948
- RGBA Value: 251, 137, 72, 1
Purple Base
- Variable Value: $purple-base
- Hex Value: #5D62CF
- RGBA Value: 93, 98, 207, 1
Purple Light
- Variable Value: $purple-light
- Hex Value: #CF81C4
- RGBA Value: 207, 129, 196, 1
Blue Base
- Variable Value: $blue-base
- Hex Value: #5D758D
- RGBA Value: 93, 117, 141, 1
Blue Dark
- Variable Value: $blue-dark
- Hex Value: #273142
- RGBA Value: 39, 49, 66, 1

Background / Accent Colors

White Base
- Variable Value: $white-base
- Hex Value: #FFFFFF
- RGBA Value: 255, 255, 255, 1
Grey Light
- Variable Value: $grey-light
- Hex Value: #F5F7F9
- RGBA Value: 245, 247, 249, 1
Grey Base
- Variable Value: $grey-base
- Hex Value: #E1E6EB
- RGBA Value: 225, 230, 235, 1
Grey Dark
- Variable Value: $grey-dark
- Hex Value: #83909A
- RGBA Value: 131, 144, 154, 1
Grey Alt
- Variable Value: $grey-alt
- Hex Value: #737E86
- RGBA Value: 115, 126, 134, 1
Grey Alt 2
- Variable Value: $grey-alt-2
- Hex Value: #313B3F
- RGBA Value: 49, 59, 63, 1

Components

Alerts

Alerts, should be used when the user needs instant feedback on an action they preformed. They are helpful when a user deletes something or when they have successfully saved or created something new.

General system alert.

You have successfully completed an action.

Oh no, something happened, not bad. But not good.

Oh snap! Something went wrong.

Sample Code

<figure class="alert--success">
  <svg width="16" height="16" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="alert__icon"><title>icon</title>
<path d="M14.02 8c0-3.325-2.695-6.02-6.02-6.02-3.325 0-6.02 2.695-6.02 6.02 0 3.325 2.695 6.02 6.02 6.02 3.325 0 6.02-2.695 6.02-6.02zm1.96 0c0 4.407-3.573 7.98-7.98 7.98S.02 12.407.02 8 3.593.02 8 .02 15.98 3.593 15.98 8zM5.693 7.307c-.383-.383-1.003-.383-1.386 0s-.383 1.003 0 1.386l2 2c.345.345.89.384 1.28.09l4-3c.434-.324.522-.938.197-1.37-.325-.434-.94-.522-1.372-.197l-3.32 2.49-1.4-1.4z" fill-rule="nonzero" fill="#ADBEC5" id="app-icon"></path></svg>

  <p class="alert__text">Alert text message goes right here.</p>

<a href="#">
    <svg width="15" height="15" viewbox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" class="alert__trigger"><title>icon</title>
<path d="M.44 2.56l11.998 11.99c.585.587 1.535.586 2.12 0 .586-.586.586-1.535 0-2.12L2.56.44C1.974-.148 1.025-.147.44.44c-.587.586-.586 1.535 0 2.12zM12.438.44L.44 12.43c-.585.585-.586 1.534 0 2.12.585.586 1.535.587 2.12 0l12-11.99c.585-.585.585-1.534 0-2.12-.586-.586-1.536-.587-2.122 0z" fill="#ADBEC5" fill-rule="nonzero" id="app-icon"></path></svg>

</a>
</figure>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create alerts.

Class Name	Usage
.alert--[type]	This should be applied to the element you are styling to look like an alert. It provides the correct styles for the message being returned. The class name should change based on the type of alert being displayed. `<figure class"alert--success"></figure>`
[aria-hidden="true"]	Set this on the alert when it is hidden from the view.
[aria-hidden="false"]	Set this on the alert when it is visible in the view.

Badges

Badges should be used to label new features, items that might be broken, or notify a user of a pending action. They should call just enough attention so a user notices them, but they do not need to be the dominate element on the page.

Badge Text
Badge Text
Badge Text
Badge Text

Sample Code

  <!-- Badge Primary -->
  <div class="badge--primary">Badge Text</div>

  <!-- Badge Active -->
  <div class="badge--active">Badge Text</div>

  <!-- Badge Caution -->
  <div class="badge--caution">Badge Text</div>

  <!-- Badge Warning -->
  <div class="badge--warning">Badge Text</div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create alerts.

Class Name	Usage
.badge--[type]	Add this class to the element you are styling to look like a badge. The styles, including the text color, will then be added. `<div class"badge--primary"></div>`

Buttons

These elements should be used for actions that the user can take. The primary button is labeled primary and is the dominant application color. It should be used in most cases when users are prompted to perform a submission. On the other hand, the danger button should be used for actions that cannot be undone or are final. The button styles can be applied to various elements on the page. As long as it is suppose to act like a button, the styles are OK to use.

Sample Code

  <!-- Button Default -->
  <button class="button--default">Button Text</button>

  <!-- Button Primary -->
  <button class="button--primary">Button Text</button>

  <!-- Button Secondary -->
  <button class="button--secondary">Button Text</button>

  <!-- Button Danger -->
  <button class="button--danger">Button Text</button>

  <!-- Button Orange -->
  <button class="button--orange">Button Text</button>

  <!-- Button Blue Base -->
  <button class="button--blue-base">Button Text</button>

  <!-- Button Disabled -->
  <button class="button--disabled" disabled>Button Text</button>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a button.

Class Name	Usage
.button--[type]	This should be applied to the element you are styling to look like a button. The class name should change based on the type of button being used. `<button class="button--primary">Button Text</button>`
.button--default	Basic button and should be used as a way for user to cancel a request.
.button--primary	Standard button and should be used in almost all cases.
.button--secondary	Button used for in-page actions such as copying text to a user's clipboard.
.button--danger	Only use this button when an action is final and cannot be undone.
.button--disabled	This style of button should be used to notify a user they cannot perform an action because of missing data or there are no changes to be saved.
role="button"	If you style a link to look like a button please add this attribute to maintain a level of semantic markup.
.button--small	Apply this modifier if you want a small button.
.button--tiny	Apply this modifier if you want a tiny button.
.button--full	Apply this modifier if you want a button that takes up 100% of its space.

Cards

Cards are meant to be an universal element that help group similar content together on a page. They can be used within tables, behind forms, to create sections of pages, or just by themselves.

Card text goes here.
Card text goes here.
Card text goes here.
Card text goes here.

Sample Code

  <!-- Card Base -->
  <div class="card">Card text goes here.</div>

  <!-- Card Shadow -->
  <div class="card--shadow">Card text goes here.</div>

  <!-- Card Base Medium -->
  <div class="card card--md">Card text goes here.</div>

  <!-- Card Base Small -->
  <div class="card card--sm">Card text goes here.</div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a card.

Class Name	Usage
.card	This should be applied to the element you are styling to look like a card. `<div class="card">Card Text</div>`
.card--shadow	If a card should have a shadow, then simply apply this class name. `<div class="card--shadow">Card Text</div>`
.card--md	Apply this modifier to the card element to change the padding.
.card--sm	Apply this modifier to the card element to change the padding.

Chips

A chip is made up of two things: an image and some content. They are fairly universal and can be used in many situations, but they must contain these two elements.

BS
BS

CargoLoop
BS

CargoLoop

Email: info@cargoloop.com

Sample Code

  <!-- Chip Base -->
  <div class="chip__container">
    <div class="chip__avatar">
      <h5 class="chip__avatar-text">BS</h5>
    </div>
  </div>

  <!-- Chip With Title -->
  <div class="chip__container">
    <div class="chip__avatar">
      <h5 class="chip__avatar-text">BS</h5>
    </div>
    <div class="chip__text-container">
      <p class="chip__text-title">CargoLoop</p>
    </div>
  </div>

  <!-- Chip With Title And Description -->
  <div class="chip__container">
    <div class="chip__avatar">
      <h5 class="chip__avatar-text">MB</h5>
    </div>
    <div class="chip__text-container">
      <p class="chip__text-title">CargoLoop</p>
      <p class="chip__text-description">Email: info@cargoloop.com</p>
    </div>
  </div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a chip.

Class Name	Usage
.chip__container	This should be applied to the element that contains the chip content. `<div class="chip__container"> <!-- Chip Content --> </div>`
.chip__avatar	This is the container class for the avatar.
.card__avatar-text	If a chip does not have a picture, you can use this class to add text that is centered horizontally and vertically in the chip avatar.
.chip__text-container	This class should be applied to the container that wraps the text of a chip element.
.chip__text-title	This class should be applied to title of a chip.
.chip__text-description	This class should be applied to description of a chip.

Form Elements

Form elements can be used for various reasons within the interface. They can be used to collect and store information or they could be used to lookup / search for specific assets. There are several types of form elements and all have been documented below.

Basic Text Input
Disabled Text Input
Error Text Input
Success Text Input
Search Input
Select Input
Radio Label Text
Checkbox Label Text

Sample Code

  <!-- Basic Text Input -->
  <label>Basic Text Input</label>
  <input type="text" placeholder="Placeholder text" />

  <!-- Disabled Text Input -->
  <label>Disabled Text Input</label>
  <input type="text" placeholder="Placeholder text" disabled />

  <!-- Error Text Input -->
  <label class="input--error">Error Text Input</label>
  <input type="text" placeholder="Placeholder text" class="input--error" />

  <!-- Success Text Input -->
  <label class="input--success">Success Text Input</label>
  <input type="text" placeholder="Placeholder text" class="input--success" />

  <!-- Select Input -->
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <!-- Radio Input -->
  <label>
    <input type="radio" />
    Radio Label Text
  </label>

  <!-- Checkbox Input -->
  <label>
    <input type="checkbox" />
    Checkbox Label Text
  </label>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to add inline error messages to form elements.

Class Name	Usage
.input--error	Place this class on the label that corresponds with the input that contains the error. `<label class="form__label input--error">Form Label</label>`
input.input--error	Place this class on the input that contains the error. `<input type="text" placeholder="Placeholder text here" class="input--error" />`
.input--success	Place this class on the label that corresponds with the input that contains the accepted content. `<label class="form__label input--error">Form Label</label>`
input.input--success	Place this class on the input that contains the accepted content. `<input type="text" placeholder="Placeholder text here" class="input--error" />`

Links

This component should be used for navigational purposes or appending items to a list. If you want to move a user from one page to the next or load an overlay, then a link is the right way to go. Avoid using links when asking users to submit final actions.

Sample Code

  <!-- Main Link -->
  <a href="#" class="link--primary">Link Text</a>

  <!-- Secondary Link -->
  <a href="#" class="link--secondary">Link Text</a>

  <!-- Warning Link -->
  <a href="#" class="link--warning">Link Text</a>

  <!-- Disabled Link -->
  <a href="#" class="link--disabled" disabled>Link Text</a>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a link.

Class Name	Usage
.link--[type]	This should be applied to the element you are styling as a link. The class name should change based on the type of link being used. `<a href="#" class="link--alpha"></a>`

Loading Indicator

Are you loading a lot of content? Then make sure to throw a loading indicator on the view so the user knows that the page is not broken; it is simply trying to grab all of the elements needed to build it properly.

Loading

Sample Code

<!-- Basic Loading Indicator -->
<div class="loading-indicator__container">
  <div class="loading-indicator">
    <ul class="loading-indicator__icons">
      <li class="loading-indicator__icon--1 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--2 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--3 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--4 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--5 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--6 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--7 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--8 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--9 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--10 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--11 loading-indicator__icon"></li>
      <li class="loading-indicator__icon--12 loading-indicator__icon"></li>
    </ul>
  </div>
  <p class="text--uppercase">
    <small><b>Loading</b></small>
  </p>
</div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a loading indicator.

Class Name	Usage
.loading-indicator__container	Apply this class to parent div so the indicator and text centers within the viewport. `<div class"loading-indicator__container"></div>`
.loading-indicator	This should be applied to the parent element that wraps both the indicator text and animation elements. `<div class"loading-indicator"></div>`
.loading-indicator__icon	Apply this class to 12 empty list items to create the animating dots. `<li class="loading-indicator__icon"></li>`

Modals

Modals are used as a way for the user to interact with the view without leaving it. Modals should be single actions. Never use a modal as a step action or multi-part form.

Sample Code

  <button class="button--primary modal__trigger">Click for Modal</button>
  <div class="modal" aria-hidden="true">
    <div class="modal__overlay">
      <div class="modal__container">
        <div class="modal__body">
          <a href="#" role="button" class="modal__close">
            
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 30"
          width="400px" height="30px"
        >
          <text font-size="16" x="8" y="20" fill="#cc0000">
            Error: 'icons/close-icon.svg' could not be found.
          </text>
          <rect
            x="1" y="1" width="398" height="28" fill="none"
            stroke-width="1" stroke="#cc0000"
          />
        </svg>
      
          </a>
          <header class="modal__header">
            <h3 class="title">Modal Title</h3>
            <p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi  minima.</p>
          </header>
          <div>
            <p class="modal-content">Modal Content goes here.</p>
            <div class="modal__actions">
              <ul class="modal__actions-list">
                <li class="modal__actions-item">
                  <a href="#" class="link--delta">Close</a>
                </li>
                <li class="modal__actions-item">
                  <button class="button--charlie">Button Text</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a modal.

Class Name	Usage
.modal__trigger	Add this class the element that opens or launches the modal. `<button class="button--bravo modal__trigger"></button>`
.modal	Add to element that contains the modal. `<div class="modal"></div>`
.modal__overlay	This class should be added to the first child element of the modal. It should also wrap the modal content. `<div class="modal__overlay"></div>`
.modal__body	Add to the element that contains the content of the modal. `<div class="modal__body"></div>`
.modal__body-header	This class should be added to the header element. The header element should contain a description of what the modal is going to be used for. `<header class="modal__header"></header>`
.modal__body-footer	This class can be applied to the element that contains the modal actions. `<footer class="modal__body-footer"> <!-- Content --> </footer>`
.modal__body-footer-action	This class can be applied to the element that is actionable. `<a class="modal__body-footer-action">Cancel</a>`

Popouts

Popouts should be used when you have additional options that could not be displayed on the page properly or if you have secondary actions that are not used as often.

Popout Trigger

Sample Code

  <!-- Popout Basic -->
  <div class="popout__container">
    <a href="#" class="popout__trigger link--primary">Popout Trigger</a>
    <figure class="popout">
      <ul class="popout__list">
        <li class="popout__item">
          <a href="#" class="popout__link">Popout Link</a>
        </li>
        <li class="popout__item">
          <a href="#" class="popout__link">Popout Link</a>
        </li>
        <li class="popout__item">
          <a href="#" class="popout__link">Popout Link</a>
        </li>
      </ul>
    </figure>
  </div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a popout.

Class Name	Usage
.popout__container	The popout container class should be applied to the parent element of the popout. It sets the positioning and creates a wrapper for the popout to display in. `<div class"popout__container"></div>`
.popout__trigger	Apply this class to the element that is being clicked to activate the popout element. This class could be applied to an anchor or button. Depending on the element you apply this class to, you should then use the button or link styles to style the element correctly. `<a href="#" class="popout__trigger link--alpha">Popout Trigger</a>`
.popout	Apply this class to the popout element. It is styled similar to a card and inherits from the card component. `<div class="popout"> <!-- Popout content --> </div>`
.popout__list	Apply to the unordered list element. `<ul class="popout__list"> <!-- Popout list --> </ul>`
.popout__item	Apply to the list element. `<li class="popout__item"> <!-- Popout list --> </li>`
.popout--inverse	Apply this modifier to the popout element to make it appear above the popout trigger rather than below it. `<div class="popout popout--inverse"> <!-- Popout Inverse Content --> </div>`

Tabs

Do you need to split a complex view up to make it more manageable? Just use tabs. This component should be used as an in-page navigation tool. Tabs are meant to split complicated views up into simplified sub-views that allow a user to focus in on one specific task.

Active Customers
Archived Customers

Tab Content 1

Tab Content 2

Sample Code

  <!-- Tab List -->
  <div class="tabs">
    <ul class="tab__list">
      <li class="tab__item is-active" data-tab="tab-1">Edit Scenario</li>
      <li class="tab__item" data-tab="tab-2">Scenario Flow</li>
      <li class="tab__item" data-tab="tab-3">Scenario History</li>
      <li class="tab__item" data-tab="tab-4">Settings</li>
    </ul>
  </div>

  <!-- Tab Panes -->
  <div id="tab-1" class="tab__content is-active">
    Tab Content 1
  </div>
  <div id="tab-2" class="tab__content">
    Tab Content 2
  </div>
  <div id="tab-3" class="tab__content">
    Tab Content 3
  </div>
  <div id="tab-4" class="tab__content">
    Tab Content 4
  </div>
</div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a tab group.

Class Name	Usage
.tabs	This should be applied to the parent element that wraps all of the tabs. `<div class"tabs"></div>`
.tab__list	This should be applied to the unordered list element that contains the tab navigation list. `<ul class"tab__list"></ul>`
.tab__item	This should be applied to the list element that contains the tab navigation link. `<li class"tab__item"></li>`
.tab__content	This should be applied to the element that contains a tab's content. `<div class"tab__content"></p>`
.is-active	This should be applied to the element that is active or displaying. `<div class"tab__content is-active"></p>`

Tooltips

If you need to provide additional information about a feature or form element, a tooltip is a great idea. This component should be used to provide just enough information to help users understand a particular part of the interface. Keep the content inside of the tooltip to a minimum.

Sample Code

  <div class="tooltip__item">
    <label class="tooltip__label label">Need Help</label>
    <svg width="14" height="14" viewbox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" class="tooltip__icon"><title>icon</title>
<path d="M12.143 7c0-2.84-2.303-5.143-5.143-5.143S1.857 4.16 1.857 7 4.16 12.143 7 12.143 12.143 9.84 12.143 7zm1.714 0c0 3.787-3.07 6.857-6.857 6.857C3.213 13.857.143 10.787.143 7 .143 3.213 3.213.143 7 .143c3.787 0 6.857 3.07 6.857 6.857zM8 10c0 .553-.447 1-1 1-.553 0-1-.447-1-1 0-.553.447-1 1-1 .553 0 1 .447 1 1zm-.143-3c0 .473-.384.857-.857.857S6.143 7.473 6.143 7V4c0-.473.384-.857.857-.857s.857.384.857.857v3z" fill="#ADBEC5" fill-rule="nonzero" id="app-icon"></path></svg>
    <figure class="tooltip">
      <p class="tooltip__text">Need help with something? Read this message for more details.</p>
    </figure>
  </div>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a tooltip.

Class Name	Usage
.tooltip__item	Apply this class to the parent wrapper. `<div class"tooltip__item"></div>`
.tooltip__label	Apply this class to the label that sits inside of the tooltip item. `<label class"tooltip__labe label"> <!-- Label text --> </label>`
.tooltip__icon	Apply this class to the svg so that the icon fill is correct. <svg width="18" height="18" viewbox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" class="tooltip__icon"><title>help-icon</title><path d="M9 0C4.032 0 0 4.032 0 9s4.032 9 9 9 9-4.032 9-9-4.032-9-9-9zm.9 15.3H8.1v-1.8h1.8v1.8zm1.863-6.975l-.81.828C10.305 9.81 9.9 10.35 9.9 11.7H8.1v-.45c0-.99.405-1.89 1.053-2.547L10.27 7.57c.332-.325.53-.775.53-1.27 0-.99-.81-1.8-1.8-1.8s-1.8.81-1.8 1.8H5.4c0-1.99 1.61-3.6 3.6-3.6s3.6 1.61 3.6 3.6c0 .792-.324 1.512-.837 2.025z" fill="#FFFFFF" fill-rule="evenodd" id="app-icon"></path></svg>
.tooltip	Apply this class to the element that wraps the tooltip content. `<figure class="tooltip"> <!-- Tooltip --> </figure>`
.tooltip__text	Apply this class to the element inside the tooltip that contains the tooltip content. `<p class="tooltip__content"> <!-- Tooltip content --> </p>`

Layout

Grid

While the core structure of the site is not built on a grid, interior components use a 12 column grid to create clean, clear spacing. There are four core grid breakpoints: small, medium, large and extra-large. Each is used to dedicate space to elements depending on the viewport's width.

4 Lg / 3 Md
4 Lg / 3 Md
4 Lg / 3 Md

6 Lg / 2 Sm
6 Lg / 2 Sm

Sample Code

  <!-- Varibles -->
  $small: Viewport with min-width of 320px
  $medium: Viewport with min-width of 720px
  $large: Viewport with min-width of 1024px
  $extra-large: Viewport with min-width of 1200px

  $container: Max-width is 1140px
  $gutter: Width is 25px
  $column: Width is 65px

  <!-- Sample 1 -->
  <ul class="row">
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
    <li class="columns-1__l">1</li>
  </ul>

  <!-- Sample 2 -->
  <ul class="row">
    <li class="columns-3__m columns-4__l">4 Lg / 3 Md</li>
    <li class="columns-3__m columns-4__l">4 Lg / 3 Md</li>
    <li class="columns-3__m columns-4__l">4 Lg / 3 Md</li>
  </ul>

  <!-- Sample 3 -->
  <ul class="row">
    <li class="columns-2__s columns-6__l">6 Lg / 2 Sm</li>
    <li class="columns-2__s columns-6__l">6 Lg / 2 Sm</li>
  </ul>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a grid layout.

Class Name	Usage
.container	This should be applied to the element you want to set the max-width of the view on. Very rarely used in Roundup. `<div class"container"></div>`
.row	This should be applied to the element that contains a column layout. It sets a clearfix on the column layout and forces any content outside of the element below the floating columns. `<div class"row"></div>`
.columns-#{$column}__s	This should be applied to the element you want to take on the small viewport column layout. `<div class"columns-4__s"></div>`
.columns-#{$column}__m	This should be applied to the element you want to take on the medium viewport column layout. `<div class"columns-9__m"></div>`
.columns-#{$column}__l	This should be applied to the element you want to take on the large viewport column layout. `<div class"columns-12__l"></div>`

Offsets

Offsets help to push elements away from one another when extra space or a gap is needed. Offsets are used similar to columns, but they leave a gap between two elements.

4 Lg / 3 Md
4 Lg / 3 Md

6 Lg / 2 Sm
6 Lg / 2 Sm

Sample Code

  <!-- Sample 1 -->
  <ul class="row">
    <li class="columns-1__l offset-1__l">1</li>
    <li class="columns-1__l offset-1__l">1</li>
    <li class="columns-1__l offset-1__l">1</li>
    <li class="columns-1__l offset-1__l">1</li>
    <li class="columns-1__l offset-1__l">1</li>
    <li class="columns-1__l offset-1__l">1</li>
  </ul>

  <!-- Sample 2 -->
  <ul class="row">
    <li class="columns-3__m columns-4__l">4 Lg / 3 Md</li>
    <li class="columns-3__m offset-3__m columns-4__l offset-4__l">4 Lg / 3 Md </li>
  </ul>

  <!-- Sample 3 -->
  <ul class="row">
    <li class="columns-2__s columns-6__l">6 Lg / 2 Sm</li>
    <li class="columns-1__s offset-1__s columns-3__l offset-3__l">3 Lg / 1 Sm</li>
  </ul>

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a grid layout.

Class Name	Usage
.offset-#{$column}__s	This should be applied to the element you want to push away from another small element. `<div class"offset-2__s"></div>`
.offset-#{$column}__m	This should be applied to the element you want to push away from another medium element. `<div class"offset-3__m"></div>`
.offset-#{$column}__l	This should be applied to the element you want to push away from another large element. `<div class"offset-6__l"></div>`

Resources

Functional Icons

These icons should be used throughout the application to show functional actions a user can take. They can also be used as design elements when needed in the interface.

Arrow Down
Arrow Up
Bell
Calendar
Chart
Checkmark
Close
Error
Graph
Grid
Help
Inbox
List
Menu
Navigation
Picture
Search
Select
Success
User

Sample Code

  <!-- Image Icon -->
  <img src="path/to/icons/icons-functional/icon-name.svg" />

HTML Guidelines

This table gives you a quick overview of the HTML that can be applied to use an icon.

Image Name	Usage
icon-#{iconName}	This should be applied using an image tag. `<img src="path/to/icons/icons-functional/icon-name.svg" />`

Colors

Primary Colors

Red Base

Blue Light

Green Base

Secondary Colors

Black Base

Yellow Base

Orange Base

Purple Base

Purple Light

Blue Base

Blue Dark

Background / Accent Colors

White Base

Grey Light

Grey Base

Grey Dark

Grey Alt

Grey Alt 2

Alerts

Sample Code

HTML Guidelines

Badges

Sample Code

HTML Guidelines

Buttons

Sample Code

HTML Guidelines

Cards

Sample Code

HTML Guidelines

Chips

BS

BS

BS

Sample Code

HTML Guidelines

Form Elements

Sample Code

HTML Guidelines

Links

Sample Code

HTML Guidelines

Loading Indicator

Sample Code

HTML Guidelines

Modals

Sample Code

HTML Guidelines

Popouts

Sample Code

HTML Guidelines

Tabs

Sample Code

HTML Guidelines

Tooltips

Sample Code

HTML Guidelines

Grid

Sample Code

HTML Guidelines

Offsets

Sample Code

HTML Guidelines

Functional Icons

Sample Code

HTML Guidelines