1.2 #Atoms.Checkboxes Checkboxes
Standard look and feel for checkboxes.
Examples
Default styling
:disabled
Disabled checkbox
:checked
Checked checkbox
:focus
Focused checkbox
:checked:disabled
Checked and disabled
Markup
<span class="Checkbox">
<input id="cb11[modifier class]" type="checkbox" name="cb" class="Checkbox-input [modifier class]">
<label for="cb11[modifier class]" class="Checkbox-label">Check me</label>
</span>
Source:
components/atoms/check-box.less
, line 7
1.3 #Atoms.Dropdowns Dropdowns
Custom styling for select dropdowns.
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
1.4 #Atoms.Icons Icons
Custom icons to be used across the application
Examples
Default styling
.Icon--inverted
inverted color
.Icon--small
small size
.Icon--large
large size
Markup
<div class="Icon Icon--social-facebook [modifier class]"></div>
Source:
components/atoms/icon.less
, line 3
1.5 #Atoms.Images Images
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
1.6 #Atoms.Input Input
Custom styling for input fields.
Examples
Default styling
.Input-quantity
quantity input field (should set type="number")
.Input--error
input contains shows an error
.disabled
disabled state (work as well with attribute [disabled])
Markup
<input type="text" placeholder="text here" class="Input [modifier class]" />
Source:
components/atoms/input.less
, line 3
1.7 #Atoms.Links Link
Base class for links. "Link" class without modifiers is default for all links.
Markup
<a href="#" class="Link [modifier class]">A link</a>
Source:
components/atoms/link.less
, line 3
1.8 #Atoms.Lists List
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