Markup
<div class="Breadcrumb ">
   <ol class="Breadcrumb-list">
     <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Start</a></li>
     <li class="Breadcrumb-item"><a href="#" class="Breadcrumb-itemLink">Böcker & titlar</a></li>
     <li class="Breadcrumb-item is-active"><a href="#" class="Breadcrumb-itemLink">Puls biologi</a></li>
   </ol>
</div>
Source: components/molecules/breadcrumb.less, line 3
Example
Markup
<div class="LabelInput">
    <label>The Label</label>
    <input class="Input" type="text">
</div>
Source: components/molecules/label-input.less, line 3
Examples
Default styling
.is-shown
when displayed
Markup
<div class="Modal">
  <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
Examples
Default styling
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
.Table--schedule
schedule layout
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
.Table--inline
no padding
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
.Table--inverted
bold body content instead of header
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
.Table--compact
less padding between cells
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
.Table--striped
striped table rows
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
.Table--bordered
bordered table
Header 1 Header 2
Row col 1 Row col 2
Row col 1 Row col 2
Markup
<table class="Table [modifier class]">
<thead>
<tr>
    <th>Header 1</th>
    <th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Row col 1</td>
    <td>Row col 2</td>
</tr>
<tr>
    <td>Row col 1</td>
    <td>Row col 2</td>
</tr>
</tbody>
</table>
Source: components/molecules/table.less, line 5