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:
src/components/atoms/checkbox.less
, line 7
1.3 #Atoms.DateBlob DateBlob
A blob with date (or otherwise short) information.
Examples
Default styling
23/5
.DateBlob--dark
Dark background, white text
23/5
Markup
<div style="max-width: 300px;">
<figure class="ProductThumb">
<div class="DateBlob [modifier class]">
<div class="DateBlob-date">23/5</div>
</div>
<img src="https://via.placeholder.com/200x300" class="ProductThumb-image">
</figure>
</div>
Source:
src/components/atoms/date-blob.less
, line 3
1.4 #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:
src/components/atoms/select.less
, line 5
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:
src/components/atoms/image.less
, line 5
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
.is-disabled
disabled state (work as well with attribute [disabled])
Markup
<input type="text" placeholder="text here" class="Input [modifier class]" />
Source:
src/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:
src/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:
src/components/atoms/list.less
, line 8
1.9 #Atoms.Loader Loader
Loading indicator
Example
Markup
<div style="max-width: 300px;">
<div class="Loader">
<div></div><div></div><div></div>
</div>
</div>
Source:
src/components/atoms/loader.less
, line 3
1.10 #Atoms.LoaderBar LoaderBar
Loading indicator, bar style
Examples
Default styling
.is-loading
when loading is active
Markup
<div style="max-width: 300px;">
<div class="LoaderBar [modifier class]">
</div>
</div>
Source:
src/components/atoms/loader.less
, line 51
1.11 #Atoms.Placeholder Placeholder
Placeholder element to show while loading.
Example
Markup
<div style="max-width: 300px;">
<div class="Placeholder">
<div class="Placeholder-item" style="width: 40%;"></div>
<div class="Placeholder-item" style="width: 80%;"></div>
<div class="Placeholder-item" style="width: 80%;"></div>
</div>
Source:
src/components/atoms/placeholder.less
, line 6