1.1 #Components.Buttons Buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Base class for buttons. All majority of buttons in the site are built from the same base class.

Examples
Default styling
:hover
Highlight the button text when hovered
:focus
Highlight the button when focused
:disabled
Make the button change appearance to reflect it being disabled
.Button--inverted
Inverted button
.Button--large
Larger button
.Button--expand
Round expand button
.Button--expand:focus
Focus expand button
Markup
<button class="Button [modifier class]">Button</button>
Source: components/atoms/button.less, line 9
Examples
Default styling
:disabled
Disabled checkbox
:checked
Checked checkbox
:focus
Focused checkbox
:checked:disabled
Checked and disabled
Markup
<span class="Checkbox">
 <input id="cb11" type="checkbox" name="cb" class="Checkbox-input [modifier class]">
 <label for="cb11" class="Checkbox-label">Check me</label>
</span>
Source: components/atoms/check-box.less, line 6
Examples
Default styling
:hover
Hightlight on hover.
:focus
Highlight on focus.
:disabled
Style as disabled.
Markup
<span class="Select">
 <select class="Select-input [modifier class]">
     <option>Select an option</option>
     <option>Question</option>
     <option>Emergency</option>
     <option>Other</option>
 </select>
</span>
Source: components/atoms/select.less, line 3
Examples
Default styling
.Icon--inverted
inverted color
.Icon--small
small size
.Icon--large
large size
Markup
<div style="padding: 10px; background-color: #d6d6d6;">
<div class="Icon Icon--social-facebook [modifier class]"></div>
</div>
Source: components/atoms/icon.less, line 1

1.5 #Components.Images Images

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Base class for images. Comes with some different shape modifiers, and a special placeholder class for lazy-loading blur effect.

Examples
Default styling
.Image-circle
circle mask
.Image-hexagon
hexagon mask
Markup
<figure class="Image [modifier class]">
  <img src="https://lorempixel.com/270/300/cats/">
</figure>
Source: components/atoms/image.less, line 1
Examples
Default styling
.Input-quantity
quantity input field (should set type="number")
Markup
<input type="type" class="Input [modifier class]" />
Source: components/atoms/input.less, line 3

1.8 #Components.Lists List

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Listing content in either horizontal or vertical direction, while supporting all gutter sizes. It is often used in combination with a UL/OL tag but it is not required.

Examples
Default styling
  • Item 1
  • Item 2
  • Item 3
.List--center
center align list items
  • Item 1
  • Item 2
  • Item 3
.List--right
right align list items
  • Item 1
  • Item 2
  • Item 3
.List--bordered
list with a border
  • Item 1
  • Item 2
  • Item 3
.List--striped
striped list
  • Item 1
  • Item 2
  • Item 3
.List--horizontal
horizontal list
  • Item 1
  • Item 2
  • Item 3
Markup
<ul class="List [modifier class]">
    <li class="List-item">Item 1</li>
    <li class="List-item">Item 2</li>
    <li class="List-item">Item 3</li>
</ul>
Source: components/atoms/list.less, line 8