Style Guide

1.1 #Base.Button Link Button Link

Example

Button Link

Markup

<a href="#" class="buttonLink">Button Link</a> <button class="buttonLink">Button Link</button>

Source: build/doc/doc.css, line 3540

1.2 #Base.Buttons Button

Examples

Default styling

Button

.button--primary

Primary

Button

.button--action

Action

Button

.button--danger

Danger

Button

.button--bordered

Bordered

Button

:disabled

Disabled

Button

Markup

<a href="#" class="button [modifier class]">Button</a> <button class="button [modifier class]">Button</button>

Source: build/doc/doc.css, line 3210

1.3 #Base.Fake Tables Fake Tables

Example

Cell

Markup

<div class="table">
<div class="table__row table__row--header">
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
<div class="table__cell">Header</div>
</div>
<div class="table__row">
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
<div class="table__cell">Cell</div>
</div>
</div>

Source: build/doc/doc.css, line 4213

1.4 #Base.Lists Lists

Examples

Default styling

List
List
List

.checkList

Checklist

List
List
List

Markup

<ul class="[modifier class]">
<li>List</li>
<li>List</li>
<li>List</li>
</ul>

Source: build/doc/doc.css, line 9927

1.5 #Base.Tables Tables

Example

Header	Header	Header	Header	Header
Cell	Cell	Cell	Cell	Cell

Markup

<table>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>

Source: build/doc/doc.css, line 4155

1 #Base Base

1.1 #Base.Button Link Button Link

1.2 #Base.Buttons Button

1.3 #Base.Fake Tables Fake Tables

1.4 #Base.Lists Lists

1.5 #Base.Tables Tables