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.

icon

General system alert.

icon
icon

You have successfully completed an action.

icon
icon

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

icon
icon

Oh snap! Something went wrong.

icon
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.

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" /> 

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.

  <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>

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.

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.

icon

Need help with something? Read this message for more details about the feature / issue.

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.

  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 3
  • 3
  • 3
  • 3
  • 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.

  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 4 Lg / 3 Md
  • 4 Lg / 3 Md
  • 6 Lg / 2 Sm
  • 6 Lg / 2 Sm
  <!-- 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>

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 Down

  • Arrow Up

    Arrow Up

  • Bell

    Bell

  • Calendar

    Calendar

  • Chart

    Chart

  • Checkmark

    Checkmark

  • Close

    Close

  • Error

    Error

  • Graph

    Graph

  • Grid

    Grid

  • Help

    Help

  • Inbox

    Inbox

  • List

    List

  • Menu

    Menu

  • Navigation

    Navigation

  • Picture

    Picture

  • Search

    Search

  • Select

    Select

  • Success

    Success

  • User

    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" />