Blocks
Banner
<div
class="banner">
<h1>Full Stack Web
Development</h1>
<h5>Become a better version
of yourself in only 6 months.</h5>
<button
class="button button--success">Apply now</button>
</div>
Tab Group
<div
class="tabs-group">
<button
class="tab">Tab</button>
<button
class="tab">Tab</button>
<button
class="tab tab--active">Active Tab</button>
<button
class="tab">Tab</button>
<button
class="tab">Tab</button>
</div>
Vertical List
<div
class="list-vertical">
<li
class="list-item">Item</li>
<li
class="list-item">Item</li>
<li
class="list-item list-item--active">Item</li>
<li
class="list-item">Item</li>
<li
class="list-item">Item</li>
</div>
Card
Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed ultrices erat, non accumsan ex. Suspendisse potenti. Aenean venenatis risus vitae arcu ultrices, id convallis turpis sodales.
<div
class="card">
<div
class="card__image"></div>
<div
class="card__text">
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris sed ultrices erat, non
accumsan ex. Suspendisse potenti. Aenean venenatis risus vitae
arcu ultrices, id convallis turpis sodales.</p>
<button
class="button button--success">Button</button>
</div>
</div>
Form
<form
class="form">
<h3
class="h3">Update your
profile</h3>
<div
class="input_text">
<label
for=""
>Name</label>
<input
id=""
placeholder="Placeholder"
/>
</div>
<div
class="input_text">
<label
for=""
>Email</label>
<input
id=""
placeholder="Placeholder"
/>
</div>
<p
class="p">Gender</p>
<div
class="radio-button_group">
<input
type="radio"
id=""/>
<label
for="">Female</label>
<input
type="radio"
id=""/>
<label
for="">Male</label>
<input
type="radio"
id=""/>
<label
for="">Other</label>
</div>
<p
class="p">Country</p>
<select
name=""
id="">
<option
value=""
disabled
selected>Select your option</option>
<option
value="">Option 1</option>
<option
value="">Option 2</option>
<option
value="">Option 3</option>
</select>
<p
class="p">Favorite languages</p>
<div
class="checkbox_group">
<input
type="checkbox"
id=""/>
<label
for="">Ruby</label>
<input
type="checkbox"
id=""/>
<label
for="">JS</label>
<input
type="checkbox"
id=""/>
<label
for="">Python</label>
</div>
<div
class="form__buttons">
<button
class="button button--primary">Submit</button>
<button
class="button button--secundary">Cancel</button>
</div>
</form>
Table
| Name | Code | Phone | Status |
|---|---|---|---|
| Some Name | N01 | +51 123456789 | Active |
| Other Name | N02 | +51 123456789 | Active |
| One More | N03 | +51 123456789 | Active |
| Last One | N04 | +51 123456789 | Active |
<table
class="table">
<thead
class="table__heading">
<tr>
<th>Name</th>
<th>Name</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody
class="table__body">
<tr>
<td>Some Name</th>
<td>N01</td>
<td>+51 123456789</td>
<td>Active</td>
</tr>
<tr
class="stripped">
<td>Other Name</th>
<td>N02</td>
<td>+51 123456789</td>
<td>Active</td>
</tr>
<tr>
<td>One More</th>
<td>N03</td>
<td>+51 123456789</td>
<td>Active</td>
</tr>
<tr
class="stripped">
<td>Last One</th>
<td>N04</td>
<td>+51 123456789</td>
<td>Active</td>
</tr>
</tbody>
</table>