2.1 #Molecules.LabelInput LabelInput
Wrapper class for input with label
Example
Markup
<div class="LabelInput">
<label>The Label</label>
<input class="Input" type="text">
</div>
Source:
components/molecules/label-input.less
, line 3
2.2 #Molecules.Modal Modal
Modal for displaying information in an overlay. Always hidden by default.
Examples
Default styling
Modal header
Modal content
.is-shown
when displayed
Modal header
Modal content
Markup
<div class="Modal [modifier class]">
<div class="Modal-header">
<h1>Modal header</h1>
</div>
<div class="Modal-body">
<div class="Modal-content"><p>Modal content</p></div>
</div>
<div class="Modal-footer">
<p>Modal footer</p>
</div>
</div>
Source:
components/molecules/modal.less
, line 3
2.3 #Molecules.Table Table
Table layout.
Examples
Default styling
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--scedule
schedule layout
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--inline
no padding
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--inverted
bold body content instead of header
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--compact
less padding between cells
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--striped
striped table rows
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
.Table--bordered
bordered table
Header 1 | Header 2 | Header 3 |
---|---|---|
Row col 1 | Row col 2 | Row col 3 |
Row col 1 | Row col 2 | Row col 3 |
Markup
<table class="Table [modifier class]">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row col 1</td>
<td>Row col 2</td>
<td>Row col 3</td>
</tr>
<tr>
<td>Row col 1</td>
<td>Row col 2</td>
<td>Row col 3</td>
</tr>
</tbody>
</table>
Source:
components/molecules/table.less
, line 5