Elements
Base Button
<button
class="button">
<i
class=""></i>
Base Button
</button>
Button Types
<button
class="button button--primary">Primary</button>
<button
class="button button--secundary">Secundary</button>
<button
class="button button--success">Success</button>
<button
class="button button--warning">Warning</button>
<button
class="button button--danger">Danger</button>
<button
class="button button--transparent">Transparent</button>
Button Styles
<button
class="button button--primary">Primary</button>
<button
class="button button--primary">
<i
class=""></i>
With Icon
</button>
<button
class="button button--primary"><i
class=""></i></button>
Button Sizes
<button
class="button button--primary">Primary</button>
<button
class="button button--primary button--small">Small</button>
<button
class="button button--primary button--large">Large</button>
Images
<img
class="image"
src="https://via.placeholder.com/100">
<img
class="image"
src="https://via.placeholder.com/100/circle">
<img
class="image"
src="https://via.placeholder.com/100/shadow">
<img
class="image"
src="https://via.placeholder.com/100/circle-shadow">
Tabs
<button
class="tab">Tab</button>
List Items
<li
class="list-item">List Item</li>
Input: Checkbox
<input
type="checkbox"
id=""/>
<label
for="">Checkbox</label>
Checkbox Groups
Choose horizontal options:
* Choose vertical options:
<div
class="checkbox_group">
<input
type="checkbox"
id=""/>
<label
for="">Element 1</label>
<input
type="checkbox"
id=""/>
<label
for="">Element 2</label>
<input
type="checkbox"
id=""/>
<label
for="">Element 3</label>
</div>
Input: Radio Buttons
<input
type="radio"
id=""/>
<label
for="">Radio Button</label>
Radio Button Groups
Choose horizontal options:
* Choose vertical options:
<div
class="radio-button_group">
<input
type="radio"
id=""/>
<label
for="">Element 1</label>
<input
type="radio"
id=""/>
<label
for="">Element 2</label>
<input
type="radio"
id=""/>
<label
for="">Element 3</label>
</div>
Input: text
<input
type="text"
id=""
placeholder=""/>
Input: dropdown
<select
name=""
id="">
<option
value="">Option 1</option>
<option
value="">Option 2</option>
<option
value="">Option 3</option>
</select>
Input Group
With help text
Error message
<div
class="input_group">
<label
for="">Label</label>
<input
type="text"
id=""/>
<label
for="">Inline</label>
<input
type="text"
id=""/>
</div>
Table cells
| Table Head |
|---|
| Table Cell |
| Striped Cell |
<tr>
<th>Table Head</th>
<tr/>
<tr>
<td>Table Cell</td>
<tr/>