<!-- BUTTONS -->
<button class="base--button">Button</button>
<!-- SUBMIT AND RESET BUTTONS -->
<button class="base--button base--button_submit" type="submit">Submit Button</button>
<button class="base--button base--button_reset" type="reset">Reset Button</button>
<!-- COLOR BUTTONS -->
<button class="base--button base--button_black">Black Button</button>
<button class="base--button base--button_teal">Teal Button</button>
<div class="tab-panels" role="tabpanel">
<ul class="tab-panels--tab-list" role="tablist">
<li class="tab-panels--tab-list-item base--li" role="presentation">
<a class="tab-panels--tab base--a active" href="#panel1" aria-controls="panel1" role="tab">Tab 1</a>
</li>
<li class="tab-panels--tab-list-item base--li" role="presentation">
<a class="tab-panels--tab base--a" href="#panel2" aria-controls="panel2" role="tab">Tab 2</a>
</li>
</ul>
<div class="tab-panels--tab-content">
<div id="panel1" class="tab-panels--tab-pane active" role="tab-panel">
This is panel 1
</div>
<div id="panel2" class="tab-panels--tab-pane" role="tab-panel">
This is panel 2
</div>
</div>
</div>
<div class="clickable-tab">
Clickable Tab
</div>
<input role="radio" class="base--radio" type="radio" id="tab-1" name="tab-radio" value="1">
<label class="base--inline-label clickable-tab" for="tab-1">
Option 1
</label>
<input role="radio" class="base--radio" type="radio" id="tab-2" name="tab-radio" value="2">
<label class="base--inline-label clickable-tab" for="tab-2">
Option 2
</label>
<div class="metatag">
tag 1
</div>
<div class="metatag">
tag 2
</div>
<div class="loader-container">
<svg viewBox="25 25 50 50" class="loader">
<circle cx="50" cy="50" r="20" class="loader--path"></circle>
</svg>
</div>
<div class="loader-container loader-container_small">
<svg viewBox="25 25 50 50" class="loader">
<circle cx="50" cy="50" r="20" class="loader--path"></circle>
</svg>
</div>
<hr class="base--hr">
<hr class="base--hr base--hr_small">
<input role="checkbox" class="base--checkbox" type="checkbox" id="cb1" name="cb" value="some cb">
<label class="base--inline-label" for="cb1">Option 1</label>
<input role="radio" class="base--radio" type="radio" id="rb1" name="rb" value="">
<label class="base--inline-label" for="rb1">Option 1</label>
<input role="radio" class="base--radio" type="radio" id="rb2" name="rb" value="">
<label class="base--inline-label" for="rb2">Option 2</label>
First Name | Last Name | Role |
Westley | -- | The Man in Black |
Princess | Buttercup | The Princess Bride |
Prince | Humperdinck | The Obnoxious Prince |
Donald | Trump | President |
John | Doe | Placeholder |
<table class="base--table">
<thead class="base--thead">
<tr class="base--tr">
<td class="base--td">First Name</td>
<td class="base--td">Last Name</td>
<td class="base--td">Role</td>
</tr>
</thead>
<tbody class="base--tbody">
<tr class="base--tr">
<td class="base--td">Westley</td>
<td class="base--td">--</td>
<td class="base--td">The Man in Black</td>
</tr>
<tr class="base--tr">
<td class="base--td">Princess</td>
<td class="base--td">Buttercup</td>
<td class="base--td">The Princess Bride</td>
</tr>
<tr class="base--tr">
<td class="base--td">Prince</td>
<td class="base--td">Humperdinck</td>
<td class="base--td">The Obnoxious Prince</td>
</tr>
<tr class="base--tr">
<td class="base--td">Donald</td>
<td class="base--td">Trump</td>
<td class="base--td">President</td>
</tr>
<tr class="base--tr">
<td class="base--td">John</td>
<td class="base--td">Doe</td>
<td class="base--td">Placeholder</td>
</tr>
</tbody>
</table>
<ul class="base--ul">
<li class="base--li">List item 1</li>
<li class="base--li">List item 2</li>
<li class="base--li">List item 3</li>
</ul>
<ul class="base--ul base--ul_inline">
<li class="base--li">List item 1</li>
<li class="base--li">List item 2</li>
<li class="base--li">List item 3</li>
</ul>
<ul class="base--ul base--ul_no-bullets">
<li class="base--li">List item 1</li>
<li class="base--li">List item 2</li>
<li class="base--li">List item 3</li>
</ul>
<textarea class="base--textarea" name="text-area" id="textarea1" cols="30" rows="10"></textarea>
<select name="pick-a-value" id="any-value" class="base--select">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
<input type="" id="input1" class="base--input"></input>
<input type="" id="input2" placeholder="This is placeholder text" class="base--input"></input>
<input type="" id="input3" placeholder="Can't touch this" class="base--input" disabled></input>
<input type="color" id="input4" class="base--color-input" disabled></input>
<input type="date" id="input5" class="base--date-input"></input>
<input type="date" id="input6" placeholder="Can't click me" class="base--date-input" disabled></input>
<input type="datetime-local" id="input7" class="base--datetime-local-input"></input>
<input type="datetime-local" id="input8" placeholder="Can't click me" class="base--datetime-local-input" disabled></input>
<input type="file" id="input12" class="base--file-input"></input>
<input type="file" id="input13" placeholder="This is a placeholder file" class="base--file-input"></input>
<input type="file" id="input14" placeholder="Can't click me" class="base--file-input" disabled></input>
<input type="hidden" id="input15" class="base--hidden-input"></input>
<input type="hidden" id="input16" placeholder="This is placeholder hidden" class="base--hidden-input"></input>
<input type="hidden" id="input17" placeholder="Can't click me" class="base--hidden-input" disabled></input>
<input type="month" id="input18" class="base--month-input"></input>
<input type="month" id="input19" placeholder="Placeholder Month" class="base--month-input" ></input>
<input type="month" id="input20" placeholder="Can't click me" class="base--month-input" disabled></input>
<input type="number" id="input21" class="base--number-input"></input>
<input type="number" id="input22" placeholder="This is placeholder number" class="base--number-input"></input>
<input type="number" id="input23" placeholder="Can't touch this" class="base--number-input" disabled></input>
<input type="password" id="input24" class="base--password-input"></input>
<input type="password" id="input25" placeholder="This is placeholder password" class="base--password-input"></input>
<input type="password" id="input26" placeholder="Can't touch this" class="base--password-input" disabled></input>
<input type="range" id="input27" class="base--range-input"></input>
<input type="range" id="input28" class="base--range-input" disabled></input>
<input type="search" id="input29" class="base--search-input"></input>
<input type="search" id="input30" placeholder="This is placeholder search" class="base--search-input"></input>
<input type="search" id="input31" placeholder="Can't touch this" class="base--search-input" disabled></input>
<input type="tel" id="input32" class="base--tel-input"></input>
<input type="tel" id="input33" placeholder="8882121881" class="base--tel-input"></input>
<input type="tel" id="input34" placeholder="123-343-9938" pattern="\d{3}[\-]\d{3}[\-]\d{4}" class="base--tel-input"></input>
<input type="tel" id="input35" placeholder="8882121881" class="base--tel-input" disabled></input>
<input type="text" id="input36" class="base--text-input"></input>
<input type="text" id="input37" placeholder="This is placeholder text" class="base--text-input"></input>
<input type="text" id="input38" placeholder="Can't touch this" class="base--text-input" disabled></input>
<input type="time" id="input39" class="base--time-input"></input>
<input type="time" id="input40" placeholder="This is placeholder time" class="base--time-input"></input>
<input type="time" id="input41" placeholder="Can't Click me" class="base--time-input" disabled></input>
<input type="url" id="input42" class="base--url-input"></input>
<input type="url" id="input43" placeholder="Placeholder URL" class="base--url-input"></input>
<input type="url" id="input44" placeholder="Placeholder URL" class="base--url-input" disabled></input>
<input type="week" id="input45" class="base--week-input"></input>
<input type="week" id="input46" placeholder="This is placeholder week" class="base--week-input"></input>
<input type="week" id="input47" placeholder="Can't click me" class="base--week-input" disabled></input>