Base

Colors

file icon _config.scss

All colors used in Flywire's apps

Brand Colors

Primary brand colors are used for elements that must reflect Flywire’s brand. Each color has a darker and a lighter shade.

Primary Light
#0090D2
$color-brand-primary-light
Primary
#147BD1
$color-brand-primary
Primary Dark
#0F476B
$color-brand-primary-dark
Gray Colors

Gray colors are used for text, backgrounds, lines and borders. Smoke and Snow have two darker shades, which are used for icons and backgrounds.

Gray Lighter
#eee
$color-gray-lighter
Gray Light
#ccc
$color-gray-light
Gray
#7A8FA2
$color-gray
Gray Dark
#666
$color-gray-dark
UI Colors

The main UI colors are used for action buttons, alert messages, and form elements. Input fields, for example, can get positive and negative feedback, whereas alert messages can have warning feedback.

Info
#008bff
$color-info
Success
#48b985
$color-success
Danger
#d63442
$color-danger
Warning
#edc200
$color-warning

Responsive

Classes and mixins for Responsive Web Design

Basic breakpoints:
$grid-breakpoints: (
  xSmall: 0,
  small: 544px,
  medium: 768px,
  large: 992px,
  xLarge: 1200px
) !default;
Responsive classes

Most classes have responsive variations. We have 5 responsive breakpoints, so there is a separate class for each breakpoint. These classes follow a simple size scale.

To apply a breakpoint to a class, just prefix the class with .fromXSmall- (0px), .fromSmall- (544px), .fromMedium- (768px), .fromLarge- (992px) or .fromXLarge- (1200px).

For example: .fromSmall-textAlign-center, .fromMedium-hidden or .GridRow--fromMedium-6.

Responsive mixins

We have 3 mixins to create media queries with our breakpoints:

media-down($breakpoint)

Creates a media query with max width $breakpoint.

media-up($breakpoint)

Creates a media query with min width $breakpoint.

media-between($breakpoint-from, $breakpoint-to)

Creates a media query with max width $breakpoint-to and min width $breakpoint-from.

.docs-header {
  margin-bottom: 2rem;
  background: #fff;

  @include media-up(medium) {
    height: 120px;
  }
}

Typography

file icon base/typography.scss

Base typography styles for headings and paragraphs.

Those are the default styles for the default typography HTML tags.

Typography Headings

This is a h1

This is a h2

This is a h3

This is a h4

This is a h5
This is a h6

This lead text

This is a regular text

<h1 class="type-h1">This is a h1</h1>
<h2 class="type-h2">This is a h2</h2>
<h3 class="type-h3">This is a h3</h3>
<h4 class="type-h4">This is a h4</h4>
<h5 class="type-h5">This is a h5</h5>
<h6 class="type-h6">This is a h6</h6>
<p class="type-lead">This lead text</p>
<p class="type-regular">This is a regular text</p>

Components

Accordion

file icon components/Accordion

Drawer component to separate content in sections

1. This is the first step
This is content.
2. This is the second section
This is content.
3. This is the third section
This is content. 
<div class="Accordion">
    <section class="Accordion-section has-success">
      <header class="Accordion-sectionHeader" data-js="accordion-trigger">
        <h5 class="display-inlineFlex marginBottom-0"><span class="paddingRight-xs">1.</span> This is the first step</h5>
      </header>
      <div class="Accordion-sectionContentWrapper">
        <div class="Accordion-sectionContent">
          This is content.
        </div>
      </div>
    </section>
    <section class="Accordion-section is-active">
      <header class="Accordion-sectionHeader" data-js="accordion-trigger">
        <h5 class="display-inlineFlex marginBottom-0"><span class="paddingRight-xs">2.</span> This is the second section</h5>
      </header>
      <div class="Accordion-sectionContentWrapper">
        <div class="Accordion-sectionContent">
          This is content.
        </div>
      </div>
    </section>
    <section class="Accordion-section">
      <header class="Accordion-sectionHeader" data-js="accordion-trigger">
        <h5 class="display-inlineFlex marginBottom-0"><span class="paddingRight-xs">3.</span> This is the third section</h5>
      </header>
      <div class="Accordion-sectionContentWrapper">
        <div class="Accordion-sectionContent">
          This is content.
        </div>
      </div>
    </section>
  </div>

Alert

file icon components/Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

<div class="Alert Alert--danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="Alert Alert--success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="Alert Alert--warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="Alert Alert--info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

Autocomplete

file icon components/Dropdow

Autocomplete component with autocomplete.

Autocomplete Closed
<div class='Autocomplete'>
  <input type='text' class='Autocomplete-search' placeholder='Select one option...' />
  <ul class='Autocomplete-options'>
    <li><a href='#'>Opción 1</a></li>
    <li><a href='#'>Opción 1</a></li>
    <li><a href='#'>Opción 1</a></li>
  </ul>
</div>
Autocomplete Opened
  • Opción 1
  • Opción 1
  • Opción 1
  • Opción 1
  • Opción 1
  • Opción 1
  • Opción 1
<div class='Autocomplete is-searching'>
  <input type='text' class='Autocomplete-search' placeholder='Select one option...' value='ción' />
  <ul class='Autocomplete-options'>
    <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
    <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
    <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
    <li class='Autocomplete-option is-active'>Op<span class='is-highlighted'>ción</span> 1</li>
    <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
    <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
    <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
  </ul>
</div>
Autocomplete Validation
  • Opción 1
  • Opción 1
  • Opción 1

This field is required

<div class='FormGroup has-error'>
  <label class='Label' for='dropdown-example-1'>This is a label</label>
  <div class='Autocomplete has-error'>
    <input id='dropdown-example-1' type='text' class='Autocomplete-search' placeholder='Select one option...' />
    <ul class='Autocomplete-options'>
      <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
      <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
      <li class='Autocomplete-option'>Op<span class='is-highlighted'>ción</span> 1</li>
    </ul>
  </div>
  <p class='FormGroup-feedback'>This field is required</p>
</div>
Autocomplete with search disabled

This field is required

<div class='FormGroup'>
  <label class='Label' for='dropdown-example-2'>This is a label</label>
  <div class='Autocomplete Autocomplete--searchDisabled'>
    <input id='dropdown-example-2' readonly type='text' class='Autocomplete-search' placeholder='Select one option...' />
  </div>
  <p class='FormGroup-feedback'>This field is required</p>
</div>

Badge

file icon components/Badge/Badge.scss

Badges can notify you that there are new or unread messages or notifications.

Badges can notify you that there are new or unread messages or notifications.

We are hiring 
<span class="Badge">We are hiring</span>

Buttons

file icon components/Button/Button.scss

Use button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Style variations
<button class="Button Button--primary" type="button">primary</button>
<button class="Button Button--primary" disabled type="button">primary disabled</button>
<button class="Button Button--danger" type="button">danger</button>
<button class="Button Button--warning" type="button">warning</button>
<button class="Button Button--info" type="button">info</button>
<button class="Button Button--success" type="button">success</button>
<button class="Button" type="button">default</button>
<button class="Button" disabled type="button">disabled</button>
Size variations
<button class="Button Button--medium" type="button">medium</button>
Block Button

Create block level buttons—those that span the full width of a parent—by adding .Button--block;

<button class="Button Button--primary Button--block" type="button">Full width button</button>
Outline styles (black background)
<button class="Button Button--outline" type="button">outline</button>
<button class="Button Button--outlinePrimary" type="button">primary</button>
<button class="Button Button--outlineWhite" type="button">white</button>
<button class="Button Button--outlineDanger" type="button">danger</button>
<button class="Button Button--outlineWarning" type="button">warning</button>
Outline styles (white background)
<button class="Button Button--outline" type="button">outline</button>
<button class="Button Button--outlinePrimary" type="button">primary</button>
<button class="Button Button--outlineInfo" type="button">info</button>
<button class="Button Button--outlineDanger" type="button">danger</button>
<button class="Button Button--outlineSuccess" type="button">success</button>
Disabled Button
<button class="Button Button--primary" type="button" disabled>disabled by attribute</button>
<button class="Button Button--primary Button--disabled" type="button">disabled by class</button>
Active state button
<button class="Button Button--primary is-active" type="button">Active by state</button>
<button class="Button Button--primary Button--active" type="button">Active by class</button>
Button with Icon
<button class="Button Button--primary Button--withIcon">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 490.4 490.4" class="Button-icon">
<path d="M490.4 245.2C490.4 110 380.4 0 245.2 0S0 110 0 245.2s110 245.2 245.2 245.2 245.2-110 245.2-245.2zm-465.9 0c0-121.7 99-220.7 220.7-220.7s220.7 99 220.7 220.7-99 220.7-220.7 220.7-220.7-99-220.7-220.7z"/>
<path d="M253.9 360.4l68.9-68.9c4.8-4.8 4.8-12.5 0-17.3s-12.5-4.8-17.3 0l-48 48V138.7c0-6.8-5.5-12.3-12.3-12.3s-12.3 5.5-12.3 12.3v183.4l-48-48c-4.8-4.8-12.5-4.8-17.3 0s-4.8 12.5 0 17.3l68.9 68.9c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.1 8.7-3.5z"/>
</svg>
<span class="Button-text">Download</span>
</button>

<button class="Button Button--withIcon">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 490.4 490.4" class="Button-icon">
    <path d="M490.4 245.2C490.4 110 380.4 0 245.2 0S0 110 0 245.2s110 245.2 245.2 245.2 245.2-110 245.2-245.2zm-465.9 0c0-121.7 99-220.7 220.7-220.7s220.7 99 220.7 220.7-99 220.7-220.7 220.7-220.7-99-220.7-220.7z"/>
    <path d="M253.9 360.4l68.9-68.9c4.8-4.8 4.8-12.5 0-17.3s-12.5-4.8-17.3 0l-48 48V138.7c0-6.8-5.5-12.3-12.3-12.3s-12.3 5.5-12.3 12.3v183.4l-48-48c-4.8-4.8-12.5-4.8-17.3 0s-4.8 12.5 0 17.3l68.9 68.9c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.1 8.7-3.5z"/>
  </svg>
  <span class="Button-text">Download</span>
</button>

<button class="Button  Button--withIcon">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 490.4 490.4" class="Button-icon">
    <path d="M490.4 245.2C490.4 110 380.4 0 245.2 0S0 110 0 245.2s110 245.2 245.2 245.2 245.2-110 245.2-245.2zm-465.9 0c0-121.7 99-220.7 220.7-220.7s220.7 99 220.7 220.7-99 220.7-220.7 220.7-220.7-99-220.7-220.7z"/>
    <path d="M253.9 360.4l68.9-68.9c4.8-4.8 4.8-12.5 0-17.3s-12.5-4.8-17.3 0l-48 48V138.7c0-6.8-5.5-12.3-12.3-12.3s-12.3 5.5-12.3 12.3v183.4l-48-48c-4.8-4.8-12.5-4.8-17.3 0s-4.8 12.5 0 17.3l68.9 68.9c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.1 8.7-3.5z"/>
  </svg>
  <span class="Button-text">Print Auth Letter and Instruction</span>
</button>

Checkbox

file icon components/FormElements/Checkbox

Custom checkbox

Default checkbox
<div class="FormGroup marginBottom-0">
  <label class="Checkbox">
    <input class="Checkbox-input" name="cb-default" type="checkbox" />
    <span class="Checkbox-label">This is a custom checkbox with a long text to see the behaviour with multiple lines</span>
  </label>
</div>
Disabled checkbox
<div class="FormGroup marginBottom-0">
  <label class="Checkbox">
    <input class="Checkbox-input" disabled name="cb-disabled" type="checkbox" />
    <span class="Checkbox-label">This is a disabled checkbox</span>
  </label>
</div>
Checked disabled checkbox
<div class="FormGroup marginBottom-0">
  <label class="Checkbox">
    <input class="Checkbox-input" disabled checked name="cb-disabledchecked" type="checkbox" />
    <span class="Checkbox-label">This is a checked disabled checkbox</span>
  </label>
</div>
Error checkbox

This is an error

<div class="FormGroup has-error marginBottom-0">
  <label class="Checkbox">
    <input class="Checkbox-input" name="cb-error" type="checkbox" />
    <span class="Checkbox-label">This is a custom checkbox with error</span>
  </label>
  <p class="FormGroup-feedback">This is an error</p>
</div>
Multiple checkboxes
Multiple choices:
Select with errors:

Please select at least one option.

<div class="GridRow GridRow--fromMedium-2">

  <div class="GridColumn FormGroup MultipleCheckbox fromMedium-marginBottom-0">
    <h6>Multiple choices:</h6>
    <label class="Checkbox">
      <input class="Checkbox-input" name="cb-1" type="checkbox" />
      <span class="Checkbox-label">Javascript</span>
    </label>
    <label class="Checkbox">
      <input class="Checkbox-input" name="cb-2" type="checkbox" />
      <span class="Checkbox-label">Python</span>
    </label>
    <label class="Checkbox">
      <input class="Checkbox-input" name="cb-3" type="checkbox" />
      <span class="Checkbox-label">PHP</span>
    </label>
  </div>

  <div class="GridColumn FormGroup has-error MultipleCheckbox marginBottom-0">
    <h6>Select with errors:</h6>
    <label class="Checkbox">
      <input class="Checkbox-input" name="cbe-1" type="checkbox" />
      <span class="Checkbox-label">Javascript</span>
    </label>
    <label class="Checkbox">
      <input class="Checkbox-input" name="cbe-2" type="checkbox" />
      <span class="Checkbox-label">Python</span>
    </label>
    <label class="Checkbox">
      <input class="Checkbox-input" name="cbe-3" type="checkbox" />
      <span class="Checkbox-label">PHP</span>
    </label>
    <p class="FormGroup-feedback">Please select at least one option.</p>
  </div>

</div>

Datepicker

file icon components/Datepicker/Datepicker.scss

Date input with a nice calendar

Mo Tu We Th Fr Sa Su
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2 
<div class="FormGroup FormGroup--floatingLabel">
  <label class="Label" for="birthday">Birthday</label>
  <div class="Datepicker is-open">
    <div class="InputGroup">
      <input type="mail" class="Datepicker-input Input InputGroup-input" placeholder="dd/mm/aaaa" id="birthday" />
      <span class="InputGroup-context">
        <span class="Icon Icon--calendar"></span>
      </span>
    </div>
    <div class="Calendar Datepicker-calendar">
      <nav class="Calendar-header">
        <div class="Calendar-header-nav Calendar-header-nav--prev">
          <button class="Button Button--default Calendar-header-navItem" type="button">
            <span class="Icon Icon--arrowLeft Icon--xs"></span>
          </button>
        </div>
        <div class="Calendar-header-nav Calendar-header-nav--month">
          <select class="Select Calendar-header-navItem">
            <option value="01">January</option>
            <option value="02">February</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
          </select>
        </div>
        <div class="Calendar-header-nav Calendar-header-nav--year">
          <select class="Select Calendar-header-navItem">
              <option value="2016">2016</option>
              <option value="2015">2015</option>
          </select>
        </div>
        <div class="Calendar-header-nav Calendar-header-nav--next">
          <button class="Button Button--default Calendar-header-navItem" type="button">
            <span class="Icon Icon--arrowRight Icon--xs"></span>
          </button>
        </div>
      </nav>
      <table class="Calendar-table">
        <thead>
          <tr>
            <th class="Calendar-weekday">Mo</th>
            <th class="Calendar-weekday">Tu</th>
            <th class="Calendar-weekday">We</th>
            <th class="Calendar-weekday">Th</th>
            <th class="Calendar-weekday">Fr</th>
            <th class="Calendar-weekday">Sa</th>
            <th class="Calendar-weekday">Su</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="Calendar-day is-disabled">30</td>
            <td class="Calendar-day is-disabled">31</td>
            <td class="Calendar-day">1</td>
            <td class="Calendar-day">2</td>
            <td class="Calendar-day">3</td>
            <td class="Calendar-day">4</td>
            <td class="Calendar-day">5</td>
          </tr>
          <tr>
            <td class="Calendar-day">6</td>
            <td class="Calendar-day">7</td>
            <td class="Calendar-day">8</td>
            <td class="Calendar-day">9</td>
            <td class="Calendar-day">10</td>
            <td class="Calendar-day">11</td>
            <td class="Calendar-day">12</td>
          </tr>
          <tr>
            <td class="Calendar-day">13</td>
            <td class="Calendar-day">14</td>
            <td class="Calendar-day">15</td>
            <td class="Calendar-day">16</td>
            <td class="Calendar-day is-selected">17</td>
            <td class="Calendar-day">18</td>
            <td class="Calendar-day">19</td>
          </tr>
          <tr>
            <td class="Calendar-day">20</td>
            <td class="Calendar-day">21</td>
            <td class="Calendar-day">22</td>
            <td class="Calendar-day">23</td>
            <td class="Calendar-day">24</td>
            <td class="Calendar-day">25</td>
            <td class="Calendar-day">26</td>
          </tr>
          <tr>
            <td class="Calendar-day">27</td>
            <td class="Calendar-day">28</td>
            <td class="Calendar-day">29</td>
            <td class="Calendar-day">30</td>
            <td class="Calendar-day is-current">31</td>
            <td class="Calendar-day is-disabled">1</td>
            <td class="Calendar-day is-disabled">2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Drawer

file icon components/Drawer

Drawer window allowing inside content

<div class="Drawer isHidden" aria-modal tabIndex="-1" role="dialog">
  <div class="Drawer-overlay"></div>
  <aside class="Drawer-content" role="document">
    <button class="Drawer-close" aria-label="Close">
      <span class="Icon Icon--close Icon--xs margin-0"></span>
    </button>
    <div>
      <p>Drawer content</p>
    </div>
  </aside>
</div>

file icon components/Dropdown

Component to select one option

  • English
  • Español
  • Français
  • 日本語
  • 한국어
  • Português
  • 汉语
<div class="Dropdown is-open">
  <button class="Dropdown-selectedOption">English</button>
  <ul class="Dropdown-options">
      <li class="Dropdown-option is-selected" data-label="English">English</li>
      <li class="Dropdown-option" data-label="Español">Español</li>
      <li class="Dropdown-option" data-label="Français">Français</li>
      <li class="Dropdown-option" data-label="日本語">日本語</li>
      <li class="Dropdown-option" data-label="한국어">한국어</li>
      <li class="Dropdown-option" data-label="Português">Português</li>
      <li class="Dropdown-option" data-label="汉语">汉语</li>
  </ul>
</div>

FileInput

file icon components/FileInput

Input for uploading files

This is the hint content 

<div class="FileInput">
  <input type="file" accept=".png, .jpg" data-qa="fileInput">
  <p class="FileInput-hint" data-qa="hint">
    This is the hint content
  </p>
  <button class="FileInput-submit" data-qa="submitButton">
    Upload a file
  </button>
</div>

<div class="FileInput">
  <input type="file" accept=".png, .jpg" data-qa="fileInput">
  <p class="FileInput-hint" data-qa="hint"></p>
  <button class="FileInput-submit FileInput--uploading" disabled data-qa="submitButton">
    Upload a file
  </button>
</div>

Flags

file icon components/Flag/Flag.scss

i18n flags

i18n flags used in telephone input and country selector. Flag size: 21px x 16px. CSS sprite from flag-sprites.com.

<span class='Flag Flag--ci'></span>
<span class='Flag Flag--ax'></span>
<span class='Flag Flag--mm'></span>
<span class='Flag Flag--as'></span>
<span class='Flag Flag--ad'></span>
<span class='Flag Flag--kr'></span>
<span class='Flag Flag--my'></span>

FlexGrid

file icon components/flexgrid.scss

Responsive grid system

Flystyles includes a mobile-first grid system for building layouts. It’s based on a 12 column layout and has multiple tiers, one for each media query range.

Responsive classes

Start by adding an element with a class of .FlexGridRow. This will create a horizontal block to contain vertical columns. Then add elements with a .FlexGridColumn class within that row. Specify the widths of each column in each media query with the .FlexFlexGridColumn--fromXSmall-*, .FlexFlexGridColumn--fromSmall-*, .FlexFlexGridColumn--fromMedium-*, .FlexFlexGridColumn--fromLarge-* and .FlexFlexGridColumn--fromXSmall-* classes.

Example: Mobile and desktop

Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding FlexGridColumn--fromXSmall-* and .FlexGridColumn--fromMedium-* to your columns. See the example below for a better idea of how it all works.

FlexGridColumn FlexGridColumn--fromXSmall-12 FlexGridColumn--fromMedium-8
FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4
FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4
FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4
FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4
FlexGridColumn FlexGridColumn--fromXSmall-6
FlexGridColumn FlexGridColumn--fromXSmall-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="FlexGridRow">
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-12 FlexGridColumn--fromMedium-8">FlexGridColumn FlexGridColumn--fromXSmall-12 FlexGridColumn--fromMedium-8</div>
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4">FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<div class="FlexGridRow">
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4">FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4</div>
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4">FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4</div>
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4">FlexGridColumn FlexGridColumn--fromXSmall-6 FlexGridColumn--fromMedium-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->

<div class="FlexGridRow">
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-6">FlexGridColumn FlexGridColumn--fromXSmall-6</div>
  <div class="FlexGridColumn FlexGridColumn--fromXSmall-6">FlexGridColumn FlexGridColumn--fromXSmall-6</div>
</div>
Same width columns grid

Add a class of the format .GridRow--[breakpoint]-[columns-per-row] to change the size of all columns within the row. By default, the max number of columns you can use with block grid are $grid-columns.

FlexGridColumn
FlexGridColumn
FlexGridColumn
FlexGridColumn
FlexGridColumn
FlexGridColumn
<div class="FlexGridRow FlexGridRow--fromSmall-1 FlexGridRow--fromMedium-2 FlexGridRow--fromLarge-4">
  <div class="FlexGridColumn">FlexGridColumn</div>
  <div class="FlexGridColumn">FlexGridColumn</div>
  <div class="FlexGridColumn">FlexGridColumn</div>
  <div class="FlexGridColumn">FlexGridColumn</div>
  <div class="FlexGridColumn">FlexGridColumn</div>
  <div class="FlexGridColumn">FlexGridColumn</div>
</div>
Offsets

Move columns to the right using .FlexGridColumn–fromMedium-offset-_ classes. These classes increase the left margin of a column by _ columns. For example, .FlexGridColumn–fromMedium-offset-4 moves .FlexGridColumn–fromMedium-4 over four columns.

FlexGridColumn
FlexGridColumn
<div class="FlexGridRow">
  <div class="FlexGridColumn FlexGridColumn--fromMedium-4 FlexGridColumn--fromMedium-offset-2">FlexGridColumn</div>
  <div class="FlexGridColumn FlexGridColumn--fromMedium-4">FlexGridColumn</div>
</div>
Grid Configuration
$grid-columns: 12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);

Forms

file icon components/FormElements/

Inputs, Labels, Selects, ...

Form example

We'll never share your email with anyone else.

Try to use a difficult one.

This is an important decission.

This is an important decission.

Write a long text here, please.

<form>
  <div class="FormGroup">
    <label class="Label" for="exampleInputEmail1">Email address</label>
    <input type="email" class="Input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
    <p class="FormGroup-hint">We'll never share your email with anyone else.</p>
  </div>
  <div class="FormGroup">
    <label class="Label" for="exampleInputPassword1">Password</label>
    <input type="password" class="Input" id="exampleInputPassword1" placeholder="Password">
    <p class="FormGroup-hint">Try to use a difficult one.</p>
  </div>
  <div class="FormGroup">
    <label class="Label" for="exampleSelect1">Example select</label>
    <select class="Select" id="exampleSelect1" required>
      <option value="">Select something</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
    <p class="FormGroup-hint">This is an important decission.</p>
  </div>
  <div class="FormGroup">
    <label class="Label" for="exampleSelect2">Example multiple select</label>
    <select multiple class="Select Select--multiple" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <p class="FormGroup-hint">This is an important decission.</p>
  </div>
  <div class="FormGroup">
    <label class="Label" for="exampleTextarea">Example textarea</label>
    <textarea class="Textarea" id="exampleTextarea" rows="3"></textarea>
    <p class="FormGroup-hint">Write a long text here, please.</p>
  </div>
  <button type="submit" class="Button Button--primary">Submit</button>
</form>
Inline form
<form>
  <div class="GridRow">
  <div class="FormGroup GridColumn GridColumn--fromXSmall-8">
    <input type="text" class="Input" id="inlineField" aria-describedby="emailHelp" placeholder="Inline field" required>
  </div>
  <div class="FormGroup GridColumn GridColumn--fromXSmall-4">
    <button type="button" class="Button Button--primary">Send</button>
  </div>
  </div>
</form>
Readonly & disabled fields
<div class='FormGroup'>
  <label class='Label'>Read only input</label>
  <input type='text' class='Input' value='This is the value' readonly />
</div>

<div class='FormGroup'>
  <label class='Label'>Disabled input</label>
  <input type='text' class='Input' value='This is the value' disabled />
</div>

Validation

Flystyles includes validation styles for danger, warning, and success states on form controls. These styles can be applied either by adding the class has-error or has-success to the parent FormGroup, or adding to the child form element the variation --error or --success.

Success! You've done it.

Example help text that remains unchanged.

Sorry, that username's taken. Try another?

Example help text that remains unchanged.

<div class="FormGroup has-success">
  <label class="Label" for="inputSuccess1">Input with success</label>
  <input type="text" class="Input Input--success" id="inputSuccess1">
  <p class="FormGroup-feedback FormGroup-feedback--success">Success! You've done it.</p>
  <p class="FormGroup-hint">Example help text that remains unchanged.</p>
</div>

<div class="FormGroup has-error">
  <label class="Label" for="inputError1">Input with error</label>
  <input type="text" class="Input Input--error" id="inputError1">
  <p class="FormGroup-feedback FormGroup-feedback--error">Sorry, that username's taken. Try another?</p>
  <p class="FormGroup-hint">Example help text that remains unchanged.</p>
</div>

<div class="FormGroup has-error">
  <label class="Label" for="textAreaError">Textarea with error</label>
  <textarea class="Textarea" id="textAreaError">
  </textarea>
</div>

<div class="FormGroup has-error">
  <label class="Label" for="selectError">Select with error</label>
  <select class="Select" id="selectError">
    <option value="">Select something</option>
    <option value="1">Option 1</option>
  </select>
</div>

Input groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.

http://
@flywire.com
$ .00
@flywire.com 
<div class="FormGroup">
  <label class="Label" for="prefixed">Input with prefix</label>
  <div class="InputGroup">
    <span class="InputGroup-context">http://</span>
    <input type="url" class="Input InputGroup-input" placeholder="Enter your website" id="prefixed" />
  </div>
</div>

<div class="FormGroup">
  <label class="Label" for="sufixed">Input with sufix</label>
  <div class="InputGroup">
    <input type="mail" class="Input InputGroup-input" placeholder="Enter your email" id="sufixed" />
    <span class="InputGroup-context">@flywire.com</span>
  </div>
</div>

<div class="FormGroup">
  <label class="Label" for="sufixed2">Prefixed and sufixed input</label>
  <div class="InputGroup">
    <span class="InputGroup-context">$</span>
    <input type="mail" class="Input InputGroup-input" placeholder="Enter your email" id="sufixed2" />
    <span class="InputGroup-context">.00</span>
  </div>
</div>

<div class="FormGroup">
  <label class="Label" for="sufixed">Input with sufix</label>
  <div class="InputGroup">
    <input type="mail" class="Input Input--xl InputGroup-input" placeholder="Enter your email" id="sufixed" />
    <span class="InputGroup-context">@flywire.com</span>
  </div>
</div>

Forms 2.0

file icon components/FormElements/

Form Element with Material Design like behaviour. Floating labels inside the input field.

Form example

We'll never share your email with anyone else.

This is a required field

This is a required field

$
$ .00 
<form>

  <div class="FormGroup FormGroup--floatingLabel has-value">
    <input type="email" class="Input" id="exampleInputEmail2" aria-describedby="emailHelp" placeholder="Enter email" value="user@email.com" autocomplete="off" required />
    <label class="Label" for="exampleInputEmail2">Email address</label>
    <p id="emailHelp" class="FormGroup-hint">We'll never share your email with anyone else.</p>
  </div>

  <div style="width: 300px" class="FormGroup FormGroup--floatingLabel">
    <input type="email" class="Input" id="exampleInputEmail3" aria-describedby="emailHelp" placeholder="Enter email" value="user@email.com" autocomplete="off"/>
    <label title="This is a placeholder that does not fit inside their label" class="Label" for="exampleInputEmail3">This is a placeholder that does not fit inside their label</label>
  </div>

  <div class="FormGroup FormGroup--floatingLabel">
    <input type="password" class="Input" id="exampleInputPassword2" placeholder="Password" autocomplete="off" />
    <label class="Label" for="exampleInputPassword2">Password</label>
  </div>

  <div class="FormGroup FormGroup--floatingLabel has-error">
    <input type="email" class="Input" id="errorInput" />
    <label class="Label" for="errorInput">Enter your name</label>
    <p class="FormGroup-feedback">This is a required field</p>
  </div>

  <div class="FormGroup FormGroup--floatingLabel">
    <select class="Select" id="exampleSelect3" required>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label class="Label" for="exampleSelect3">Example select</label>
  </div>

  <div class="FormGroup FormGroup--floatingLabel">
    <label class="Label" for="exampleTextarea2">Example textarea</label>
    <textarea class="Textarea" id="exampleTextarea2" rows="3"></textarea>
  </div>

   <div class="FormGroup FormGroup--floatingLabel has-error">
    <label class="Label" for="exampleTextarea2">Example textarea</label>
    <textarea class="Textarea" id="exampleTextarea2" rows="3"></textarea>
    <p class="FormGroup-feedback">This is a required field</p>
  </div>

  <div class='FormGroup FormGroup--floatingLabel'>
    <label class='Label' for='drowpdown-example-2'>This is a label</label>
    <div class='Autocomplete'>
      <input id='drowdown-example-2' type='text' class='Autocomplete-search' placeholder='Select one option...' value="Spain" />
    </div>
  </div>

  <div class="FormGroup FormGroup--floatingLabel FormGroup--hasPrefix">
    <label class="Label" for="prefixedInput5">Prefixed input</label>
    <div class="InputGroup">
      <span class="InputGroup-context">$</span>
      <input type="mail" class="Input InputGroup-input" placeholder="Enter your email" id="prefixedInput5" required />
    </div>
  </div>

  <div class="FormGroup FormGroup--floatingLabel FormGroup--hasSuffix FormGroup--hasPrefix">
    <label class="Label" for="sufixedInput2">Prefixed and suffixed input</label>
    <div class="InputGroup">
      <span class="InputGroup-context">$</span>
      <input type="mail" class="Input InputGroup-input" placeholder="Enter your email" id="sufixedInput2" required />
      <span class="InputGroup-context">.00</span>
    </div>
  </div>
</form>
Disabled and Read Only Fields
$ .00
$ .00 
<form>
  <div class="FormGroup FormGroup--floatingLabel FormGroup--hasPrefix FormGroup--hasSuffix is-readOnly">
    <label class="Label" for="sufixedReadOnlyInput">Read only input group</label>
    <div class="InputGroup">
      <span class="InputGroup-context">$</span>
      <input type="mail" class="Input InputGroup-input" placeholder="Enter your email" id="sufixedReadOnlyInput" required readonly />
      <span class="InputGroup-context">.00</span>
    </div>
  </div>

  <div class='FormGroup FormGroup--floatingLabel is-readOnly'>
    <label class='Label' for='drowpdown-example-3'>Read only input autocomplete</label>
    <div class='Autocomplete'>
      <input id='drowdown-example-3' type='text' class='Autocomplete-search' placeholder='Select one option...' value="Spain" readonly />
    </div>
  </div>

  <div class="FormGroup FormGroup--floatingLabel is-readOnly">
    <input class="Input" id="exampleInputReadOnly" placeholder="you can't type here" autocomplete="off" readonly />
    <label class="Label" for="exampleInputReadOnly">Read only input</label>
  </div>

  <div class="FormGroup FormGroup--floatingLabel is-disabled">
    <input class="Input" id="exampleInputDisabled" placeholder="you can't type here" autocomplete="off" disabled  />
    <label class="Label" for="exampleInputDisabled">Disabled input</label>
  </div>

  <div class='FormGroup FormGroup--floatingLabel is-disabled'>
    <label class='Label' for='drowpdown-example-4'>Disabled input autocomplete</label>
    <div class='Autocomplete'>
      <input id='drowdown-example-4' type='text' class='Autocomplete-search' placeholder='Select one option...' value="Spain" disabled />
    </div>
  </div>

  <div class="FormGroup FormGroup--floatingLabel FormGroup--hasPrefix is-disabled">
    <label class="Label" for="sufixedDisabledInput">Disabled input group</label>
    <div class="InputGroup">
      <span class="InputGroup-context">$</span>
      <input type="mail" class="Input InputGroup-input" placeholder="Enter your email" id="sufixedDisabledInput" required disabled />
      <span class="InputGroup-context">.00</span>
    </div>
  </div>
</form>

Grid

file icon components/grid.scss

Responsive grid system

Flystyles includes a mobile-first grid system for building layouts. It’s based on a 12 column layout and has multiple tiers, one for each media query range.

Responsive classes

Start by adding an element with a class of .GridRow. This will create a horizontal block to contain vertical columns. Then add elements with a .GridColumn class within that row. Specify the widths of each column in each media query with the .GridColumn--fromXSmall-*, .GridColumn--fromSmall-*, .GridColumn--fromMedium-*, .GridColumn--fromLarge-* and .GridColumn--fromXSmall-* classes.

Example: Mobile and desktop

Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding GridColumn--fromXSmall-* and .GridColumn--fromMedium-* to your columns. See the example below for a better idea of how it all works.

GridColumn GridColumn--fromXSmall-12 GridColumn--fromMedium-8
GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4
GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4
GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4
GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4
GridColumn GridColumn--fromXSmall-6
GridColumn GridColumn--fromXSmall-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="GridRow">
  <div class="GridColumn GridColumn--fromXSmall-12 GridColumn--fromMedium-8">GridColumn GridColumn--fromXSmall-12 GridColumn--fromMedium-8</div>
  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->

<div class="GridRow">
  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4</div>
  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4</div>
  <div class="GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4">GridColumn GridColumn--fromXSmall-6 GridColumn--fromMedium-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->

<div class="GridRow">
  <div class="GridColumn GridColumn--fromXSmall-6">GridColumn GridColumn--fromXSmall-6</div>
  <div class="GridColumn GridColumn--fromXSmall-6">GridColumn GridColumn--fromXSmall-6</div>
</div>
Same width columns grid

Add a class of the format .GridRow--[breakpoint]-[columns-per-row] to change the size of all columns within the row. By default, the max number of columns you can use with block grid are $grid-columns.

GridColumn
GridColumn
GridColumn
GridColumn
GridColumn
GridColumn
<div class="GridRow GridRow--fromSmall-1 GridRow--fromMedium-2 GridRow--fromLarge-4">
  <div class="GridColumn">GridColumn</div>
  <div class="GridColumn">GridColumn</div>
  <div class="GridColumn">GridColumn</div>
  <div class="GridColumn">GridColumn</div>
  <div class="GridColumn">GridColumn</div>
  <div class="GridColumn">GridColumn</div>
</div>
Offsets

Move columns to the right using .GridColumn–fromMedium-offset-_ classes. These classes increase the left margin of a column by _ columns. For example, .GridColumn–fromMedium-offset-4 moves .GridColumn–fromMedium-4 over four columns.

GridColumn
GridColumn
<div class="GridRow">
  <div class="GridColumn GridColumn--fromMedium-4 GridColumn--fromMedium-offset-2">GridColumn</div>
  <div class="GridColumn GridColumn--fromMedium-4">GridColumn</div>
</div>
Grid Configuration
$grid-columns: 12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);

Headings

file icon components/Heading/Heading.scss

Responsive headings

This is a h1

This is a h2

This is a h3

This is a h4

<h1 class="Heading Heading--huge">This is a h1</h1>
<h2 class="Heading Heading--large">This is a h2</h2>
<h3 class="Heading Heading--medium">This is a h3</h3>
<h4 class="Heading Heading--small">This is a h4</h4>

Icons

file icon components/Icon/Icon.scss

SVG Iconset

Flystyles offers a SVG iconset.

Iconset
<span class="Icon Icon--calendar Icon--md margin-md"></span>
<span class="Icon Icon--arrowDown Icon--md margin-md"></span>
<span class="Icon Icon--arrowUp Icon--md margin-md"></span>
<span class="Icon Icon--arrowLeft Icon--md margin-md"></span>
<span class="Icon Icon--arrowRight Icon--md margin-md"></span>
<span class="Icon Icon--success Icon--md margin-md"></span>
<span class="Icon Icon--checkmark Icon--md margin-md"></span>
<span class="Icon Icon--danger Icon--md margin-md"></span>
<span class="Icon Icon--info Icon--md margin-md"></span>
<span class="Icon Icon--warning Icon--md margin-md"></span>
<span class="Icon Icon--close Icon--md margin-md"></span>
Mixins

This icons are embedded in a CSS background-image. The color of the icons can be changed via scss variable:

// src/components/Icon/_config.scss

$icon-calendar-color: $color-gray !default;
$icon-arrow-down-color: $color-gray-light !default;
$icon-arrow-up-color: $color-gray-light !default;
$icon-danger-color: $color-danger !default;
$icon-success-color: $color-success !default;
...

You can use the svg-icon mixin to add background images to your elements.

.Input--succes {
  background-image: svg-icon(success);
  background-repeat: no-repeat;
  background-position: calc(100% - .5rem) center;
  background-size: 1rem;
  border-color: $color-success;
}

file icon components/Modal

Modal window allowing inside content

<div class="Modal Modal--small" tabIndex="-1" role="dialog" data-modal>
  <div class="Modal-dialog">
    <button class="Modal-closeButton" type="button" aria-label="Close">
      <span class="Icon Icon--close Icon--xs margin-0"></span>
    </button>
    <div class="Modal-content" role="document">
      <div>Modal content</div>
    </div>
  </div>
</div>

Phone Number

file icon components/FormElements/PhoneNumber.scss

Special component for typing a Telephone Number. This component is created by a mix of multiple components (FormGroup, Input, Autocomplete, and Flag).

Requires: FormGroup, Input, Autocomplete.

Phone Number Input closed

+ 1684
+ 3
+ 12
+ 366 
<div class="PhoneNumber">
  <div class="FormGroup">
    <label class="Label" for="tel">Default label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>
         + 1684
        </span>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel" type="text" class="Input PhoneNumber-input-inner" />
      </div>
    </div>
  </div>
</div>

<div class="PhoneNumber width-1">
  <div class="FormGroup">
    <label class="Label" for="tel1">Default label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>
          + 3
        </span>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel1" type="text" class="Input PhoneNumber-input-inner" />
      </div>
    </div>
  </div>
</div>

<div class="PhoneNumber width-2">
  <div class="FormGroup FormGroup--floatingLabel">
    <label class="Label" for="tel2">Floating label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>+ 12</span>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel2" type="text" class="Input PhoneNumber-input-inner" />
      </div>
    </div>
  </div>
</div>

<div class="PhoneNumber width-3">
  <div class="FormGroup FormGroup--floatingLabel">
    <label class="Label" for="tel3">Floating label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>
          + 366
        </span>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel3" type="text" class="Input PhoneNumber-input-inner" />
      </div>
    </div>
  </div>
</div>

Phone Number Input opened

+ 355
  • China (中国) + 86
  • Spain (España) + 34
  • Albania + 355
  • Algeria + 213
  • American Samoa + 1684 
<div class="PhoneNumber width-3">
  <div class="FormGroup FormGroup--floatingLabel">
  <label class="Label" for="tel4">Floating label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete is-searching PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>+ 355</span>
        <div class="PhoneNumber-menu-fakeInput"></div>
        <ul class='Autocomplete-options PhoneNumber-menu-options'>
          <li class='Autocomplete-option PhoneNumber-option'>
            <span class='PhoneNumber-option-country'>China (中国)</span>
            <span class='PhoneNumber-option-dial'>+ 86</span>
          </li>
          <li class='Autocomplete-option PhoneNumber-option '>
            <span class='PhoneNumber-option-country'>Spain (España)</span>
            <span class='PhoneNumber-option-dial'>+ 34</span>
          </li>
          <li class='Autocomplete-option PhoneNumber-option is-active'>
            <span class='PhoneNumber-option-country'>Albania</span>
            <span class='PhoneNumber-option-dial'>+ 355</span>
          </li>
           <li class='Autocomplete-option PhoneNumber-option'>
            <span class='PhoneNumber-option-country'>Algeria</span>
            <span class='PhoneNumber-option-dial'>+ 213</span>
          </li>
           <li class='Autocomplete-option PhoneNumber-option'>
            <span class='PhoneNumber-option-country'>American Samoa</span>
            <span class='PhoneNumber-option-dial'>+ 1684</span>
          </li>
        </ul>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel4" type="text" class="Input PhoneNumber-input-inner" value="33333333"/>
      </div>
    </div>
    </div>    
</div>

Phone Input Disabled

+ 86 
<div class="PhoneNumber">
  <div class="FormGroup FormGroup--floatingLabel is-disabled">
    <label class="Label" for="tel5">Floating label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>
          + 86 
        </span>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel5" type="text" class="Input PhoneNumber-input-inner" disabled />
      </div>
    </div>
  </div>
</div>

Phone Input Read Only

+ 86 
<div class="PhoneNumber">
  <div class="FormGroup FormGroup--floatingLabel is-readOnly">
    <label class="Label" for="tel6">Floating label</label>
    <div class="PhoneNumber-field">
      <div class='Autocomplete PhoneNumber-menu'>
        <span class='Autocomplete-search PhoneNumber-menu-input'>
          + 86
        </span>
      </div>
      <div class="PhoneNumber-input">
        <input id="tel6" type="text" class="Input PhoneNumber-input-inner" readonly value="111111111" />
      </div>
    </div>
  </div>
</div>

Radio

file icon components/FormElements/Radio

Custom radio

Default radio
<div class="FormGroup marginBottom-0">
  <label class="Radio">
    <input class="Radio-input" name="rd-default" type="radio" />
    <span class="Radio-label">This is a custom radio with a long text to see the behaviour with multiple lines</span>
  </label>
  <label class="Radio">
    <input class="Radio-input" name="rd-default" type="radio" />
    <span class="Radio-label">This is a custom radio with a long text to see the behaviour with multiple lines</span>
  </label>
</div>
Disabled radio
<div class="FormGroup marginBottom-0">
  <label class="Radio">
    <input class="Radio-input" disabled name="rd-disabled" type="radio" />
    <span class="Radio-label">This is a disabled radio</span>
  </label>
</div>
Error radio

This is an error

<div class="FormGroup has-error marginBottom-0">
  <label class="Radio">
    <input class="Radio-input" name="rd-error" type="radio" />
    <span class="Radio-label">This is a custom radio with error</span>
  </label>
   <label class="Radio">
    <input class="Radio-input" name="rd-error" type="radio" />
    <span class="Radio-label">This is a custom radio with error</span>
  </label>
  <p class="FormGroup-feedback">This is an error</p>
</div>
Multiple radios
Multiple choices:
Select with errors:

Please select at least one option.

<div class="GridRow GridRow--fromMedium-2">
  <div class="GridColumn FormGroup MultipleRadio fromMedium-marginBottom-0">
    <h6>Multiple choices:</h6>
    <label class="Radio">
      <input class="Radio-input" name="rb-1" type="radio" />
      <span class="Radio-label">Javascript</span>
    </label>
    <label class="Radio">
      <input class="Radio-input" name="rb-1" type="radio" />
      <span class="Radio-label">Python</span>
    </label>
    <label class="Radio">
      <input class="Radio-input" name="rb-1" type="radio" />
      <span class="Radio-label">PHP</span>
    </label>
  </div>

  <div class="GridColumn FormGroup has-error MultipleRadio marginBottom-0">
    <h6>Select with errors:</h6>
    <label class="Radio">
      <input class="Radio-input" name="rbe-1" type="radio" />
      <span class="Radio-label">Javascript</span>
    </label>
    <label class="Radio">
      <input class="Radio-input" name="rbe-1" type="radio" />
      <span class="Radio-label">Python</span>
    </label>
    <label class="Radio">
      <input class="Radio-input" name="rbe-1" type="radio" />
      <span class="Radio-label">PHP</span>
    </label>
    <p class="FormGroup-feedback">Please select at least one option.</p>
  </div>

</div>

Rating

file icon components/Rating/Rating.scss

Star rating

Very bad
☆ ☆ ☆ ☆ ☆
Very good
Not likely Very good 
<div class="Rating">
  <span class="textAlign-center fontSize-sm">
    Very bad
  </span>
  <div class="Rating-stars">
    <span data-value="5" class="Star">☆</span>
    <span data-value="4" class="Star">☆</span>
    <span data-value="3" class="Star">☆</span>
    <span data-value="2" class="Star">☆</span>
    <span data-value="1" class="Star">☆</span>
  </div>
  <span class="textAlign-center fontSize-sm">
    Very good
  </span>
</div>
<div class="Rating Rating-huge marginTop-lg">
  <div class="Rating-items">
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="1"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="2"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="3"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="4"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="5"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="6"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="7"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="8"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="9"/>
      <span class="Rating-value"></span>
    </label>
    <label class="Rating-label">
      <input type="radio" class="Rating-input" name="rating" value="10"/>
      <span class="Rating-value"></span>
    </label>
  </div>
  <div class="Rating-hints">
    <span class="Rating-hint">
      Not likely
    </span>
    <span class="Rating-hint">
      Very good
    </span>
  </div>
</div>

Separator

file icon components/Separator/Separator.scss

Creates an horizontal line. It has size variants.

Separator example

<hr class="Separator marginBottom-xxl" />
<hr class="Separator" />

Switch

file icon components/FormElements/Switch

Custom switch

Default switch
<div class="FormGroup marginBottom-0">
  <label class="Switch">
    <input class="Switch-input" name="cb-default" type="checkbox" />
    <span class="Switch-label">This is a custom checkbox with a long text to see the behaviour with multiple lines</span>
  </label>
</div>
Disabled switch
<div class="FormGroup marginBottom-0">
  <label class="Switch">
    <input class="Switch-input" disabled name="cb-disabled" type="checkbox" />
    <span class="Switch-label">This is a disabled checkbox</span>
  </label>
</div>
Checked disabled switch
<div class="FormGroup marginBottom-0">
  <label class="Switch">
    <input class="Switch-input" disabled checked name="cb-disabledchecked" type="checkbox" />
    <span class="Switch-label">This is a checked disabled checkbox</span>
  </label>
</div>
Multiple switchees
Multiple choices:
<div class="GridRow GridRow--fromMedium-2">
  <div class="GridColumn FormGroup MultipleCheckbox fromMedium-marginBottom-0">
    <h6>Multiple choices:</h6>
    <label class="Switch">
      <input class="Switch-input" name="cb-1" type="checkbox" />
      <span class="Switch-label">Javascript</span>
    </label>
    <label class="Switch">
      <input class="Switch-input" name="cb-2" type="checkbox" />
      <span class="Switch-label">Python</span>
    </label>
    <label class="Switch">
      <input class="Switch-input" name="cb-3" type="checkbox" />
      <span class="Switch-label">PHP</span>
    </label>
  </div>
</div>

Tabs

file icon components/Tabs

Tab group allowing different tab content

First option content
<div class="Tabs">
  <nav class="TabList">
    <a class="Tab-link is-active">First Option</a>
    <a class="Tab-link">Second Option</a>
    <a class="Tab-link is-disabled">Disabled Option</a>
  </nav>
  <div class="TabPanels">
    <div class="TabPanel">First option content</div>
  </div>
</div>

Utilities

Background

file icon utilities/background.scss

Background color utilities.

This is white background color

This is brand primary background color

This is success background color

This is warning background color

This is danger background color

This is gray background color

This is gray light background color

This is gray lighter background color

This is gray dark background color

This is gray darker background color

<p class='bg-white'>This is white background color</p>
<p class='bg-primary'>This is brand primary background color</p>
<p class='bg-success'>This is success background color</p>
<p class='bg-warning'>This is warning background color</p>
<p class='bg-danger'>This is danger background color</p>
<p class='bg-gray'>This is gray background color</p>
<p class='bg-grayLight'>This is gray light background color</p>
<p class='bg-grayLighter'>This is gray lighter background color</p>
<p class='bg-grayDark'>This is gray dark background color</p>
<p class='bg-grayDarker'>This is gray darker background color</p>

Borders

file icon utilities/border.scss

Add borders to left or right, .borderLeft or .borderRight.

.borderLeft .borderRight 
<span class='borderLeft'>.borderLeft</span>
<span class='borderRight'>.borderRight</span>

Also we have the resposive version, acording to every breakpoint: .{size}-{borderLeft|borderRight}.

Border left on all viewport sizes Border right on all viewport sizes

Border left from medium size Border right from medium size

Border left from extra-large size Border right from extra-large size 

<p>
    <span class='fromXSmall-borderLeft'>Border left on all viewport sizes</span>
    <span class='fromXSmall-borderRight'>Border right on all viewport sizes</span>
</p>

<p>
    <span class='fromMedium-borderLeft'>Border left from medium size</span>
    <span class='fromMedium-borderRight'>Border right from medium size</span>
</p>

<p>
    <span class='fromXLarge-borderLeft'>Border left from extra-large size</span>
    <span class='fromXLarge-borderRight'>Border right from extra-large size</span>
</p>

Color

file icon utilities/colors.scss

Change color.

This is white color

This is brand primary color

This is success color

This is warning color

This is danger color

This is gray color

This is gray light color

This is gray lighter color

This is gray dark color

This is gray darker color

<p class='color-white bg-black'>This is white color</p>
<p class='color-primary'>This is brand primary color</p>
<p class='color-success'>This is success color</p>
<p class='color-warning'>This is warning color</p>
<p class='color-danger'>This is danger color</p>
<p class='color-gray'>This is gray color</p>
<p class='color-grayLight'>This is gray light color</p>
<p class='color-grayLighter'>This is gray lighter color</p>
<p class='color-grayDark'>This is gray dark color</p>
<p class='color-grayDarker'>This is gray darker color</p>

Display

file icon utilities/display.scss

Set CSS display property.

.display-block {
  display: block !important;
}

.display-inlineBlock {
  display: inline-block !important;
}

.display-inline {
  display: inline !important;
}

.display-table {
  display: table !important;
  width: 100%;
}

.display-table--padded {
  table-layout: fixed;
  border-spacing: $spacer;
  border-collapse: separate;
}

.display-tableCell {
  display: table-cell !important;
}

Float

file icon utilities/float.scss

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system: .{size}-float-{left|none|right}.

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

Float right on viewports sized SM (small) or wider

Float right on viewports sized MD (medium) or wider

Float right on viewports sized LG (large) or wider

Float right on viewports sized XL (extra-large) or wider
<div class="fromXSmall-float-left">Float left on all viewport sizes</div><br>
<div class="fromXSmall-float-right">Float right on all viewport sizes</div><br>
<div class="fromXSmall-float-none">Don't float on all viewport sizes</div><br>

<div class="fromSmall-float-right">Float right on viewports sized SM (small) or wider</div><br>
<div class="fromMedium-float-right">Float right on viewports sized MD (medium) or wider</div><br>
<div class="fromLarge-float-right">Float right on viewports sized LG (large) or wider</div><br>
<div class="fromXLarge-float-right">Float right on viewports sized XL (extra-large) or wider</div>

Helpers

file icon utilities/helpers.scss

Helper classes, not related with a concrete CSS property, for example clearfix.

Clearfix

Clears all floatings and ensure to start in a new line. Yo can use as a CSS class .clearfix or as a mixins @include clearfix.

Justify

file icon utilities/justify.scss

Justify content utilities.

Element Element Element

Element Element Element

Element Element Element

Element Element Element

Element Element Element 

<p class='display-flex justify-around bg-grayLighter'>
<span>Element</span>
<span>Element</span>
<span>Element</span>
</p>
<p class='display-flex justify-between bg-grayLighter'>
<span>Element</span>
<span>Element</span>
<span>Element</span>
</p>
<p class='display-flex justify-center bg-grayLighter'>
<span>Element</span>
<span>Element</span>
<span>Element</span>
</p>
<p class='display-flex justify-end bg-grayLighter'>
<span>Element</span>
<span>Element</span>
<span>Element</span>
</p>
<p class='display-flex justify-start bg-grayLighter'>
<span>Element</span>
<span>Element</span>
<span>Element</span>
</p>

Spacing

file icon utilities/spacing.scss

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

The classes are named using the format: .{property}-{size}.

Where property is one of:

  • margin, marginTop, marginRight, marginBottom, marginLeft: for classes that set margin
  • padding, paddingTop, paddingRight, paddingBottom, paddingLeft: for classes that set padding

And size is 0, xs, sm, md, lg, xl, xxl with this configurable values:

// config.scss
$spacer-xs: .3rem !default;
$spacer-sm: .5rem !default;
$spacer-md: 1rem !default;
$spacer-lg: 1.5rem !default;
$spacer-xl: 2rem !default;
$spacer-xxl: 3rem !default;

For example:

margin-0 padding-xs

margin-sm padding-xxl

marginLeft--xl

<p class="margin-0 padding-xs">margin-0 padding-xs</p>
<p class="margin-sm padding-xxl">margin-sm padding-xxl</p>
<p class="marginLeft-xl">marginLeft--xl</p>
Responsive Spacing classes

Margins and paddings can be applied responsively. For example: .fromSmall-marginTop-0, remove margin top from Small breackpoint (544px). That is, from 544px the element won’t have margin top.

These classes are only available for margin, marginTop, marginBottom, marginLeft, marginRight, padding, paddingTop, paddingBottom, paddingLeft and paddingRight.

margin-0 padding-xs

margin-sm padding-xxl

margin-sm padding-xxl

<p class="marginTop-xxl padding-xxl fromMedium-marginTop-0">margin-0 padding-xs</p>
<p class="margin-sm padding-xxl fromLarge-padding-0">margin-sm padding-xxl</p>
<p class="margin-sm padding-xxl fromLarge-marginRight-xxl">margin-sm padding-xxl</p>

Text

file icon utilities/text.scss

Font Weight

Utility classes to change font weight .fontWeight-{light|normal|semiBold|bold}.

.fontWeight-light

.fontWeight-normal

.fontWeight-semiBold

.fontWeight-bold

<p class='fontWeight-light'>.fontWeight-light</p>
<p class='fontWeight-normal'>.fontWeight-normal</p>
<p class='fontWeight-semiBold'>.fontWeight-semiBold</p>
<p class='fontWeight-bold'>.fontWeight-bold</p>

Based on this config variables:

$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-semi-bold: 600;
$font-weight-bold: 700;
$font-weight-extra-bold: 800;
Font size

Utility classes to change font size .fontSize-{xs|sm|md|lg|xl}.

.fontSize-xs

.fontSize-sm

.fontSize-md

.fontSize-lg

.fontSize-xl

<p class='fontSize-xs'>.fontSize-xs</p>
<p class='fontSize-sm'>.fontSize-sm</p>
<p class='fontSize-md'>.fontSize-md</p>
<p class='fontSize-lg'>.fontSize-lg</p>
<p class='fontSize-xl'>.fontSize-xl</p>

Based on this config variables:

$font-size-xs:  .75rem;
$font-size-sm:  .875rem;
$font-size-md:  1rem;
$font-size-lg:  1.25rem;
$font-size-xl:  1.5rem;
Text Transformation

Change text yo uppercase, lowercase or capitalize first letter. Use: .textTransform-{lowercase|uppercase|capitalize}

LOWERCASE uppercase capitalize 
<span class='textTransform-lowercase'>LOWERCASE</span>
<span class='textTransform-uppercase'>uppercase</span>
<span class='textTransform-capitalize'>capitalize</span>
Text Alignment

Simply set text alignment: textAlign-{left|center|right}.

.textAlign-left

.textAlign-center

.textAlign-right

<p class='textAlign-left'>.textAlign-left</p>
<p class='textAlign-center'>.textAlign-center</p>
<p class='textAlign-right'>.textAlign-right</p>
Responsive Text Alignment

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system: .{size}-textAlign-{left-center-right}.

Center text on all viewport sizes.

Center text on viewports sized MD (medium) or wider.

Center text on viewports sized LG (large) or wider.

Center text on viewports sized XL (extra-large) or wider.

<p class='fromXSmall-textAlign-center'>Center text on all viewport sizes.</p>
<p class='fromMedium-textAlign-center'>Center text on viewports sized MD (medium) or wider.</p>
<p class='fromLarge-textAlign-center'>Center text on viewports sized LG (large) or wider.</p>
<p class='fromXLarge-textAlign-center'>Center text on viewports sized XL (extra-large) or wider.</p>

Typography

file icon utilities/type.scss

Typography helpers

Utility classes simulate headings.

Type h1

Type h2

Type h3

Type h4

Type h5

Type h6

<p class='type-h1'>Type h1</p>
<p class='type-h2'>Type h2</p>
<p class='type-h3'>Type h3</p>
<p class='type-h4'>Type h4</p>
<p class='type-h5'>Type h5</p>
<p class='type-h6'>Type h6</p>

Visibility

file icon utilities/visibility.scss

Visibility classes let you show or hide elements. You can use it from a breakpoint, or up to a breakpoint if you need to hide it based on screen size or device orientation, for example: fromSmall-hidden or upToSmall-hidden.

For example, fromLarge-hidden will hide the element from large size, that is, when the viewport width is bigger than 992px.

You can also use opacity-0 and opacity-1 if you want to show or hide an element regardless of the breakpoints.

Hidden on medium up Hidden on small down Hidden on large up Always shown, change it to 0 to hide it 
<span class='fromMedium-hidden'>Hidden on medium up</span>
<span class='upToSmall-hidden'>Hidden on small down</span>
<span class='fromLarge-hidden'>Hidden on large up</span>
<span class='opacity-1'>Always shown, change it to 0 to hide it</span>