Components

Badges

Simple

badge 
<span class="badge">badge</span>

Badge

title 
<a class="i-badge">
	<div class="i-badge-content">
		<span class="i-badge-title">title</span>
	</div>
</a>

With Value

5 title 
<a class="i-badge">
	<div class="i-badge-content">
		<span class="i-badge-value" data-value="5">5</span>
		<span class="i-badge-title">title</span>
	</div>
</a>

With Legend

The legend of the badge can either go on the left or on the right side.

legend
title
legend
title 
<a class="i-badge">
	<div class="i-badge-legend">
		<span class="i-badge-legend-left">legend</span>
	</div>
	<div class="i-badge-content">
		<span class="i-badge-title">title</span>
	</div>
</a>

<a class="i-badge">
	<div class="i-badge-legend">
		<span class="i-badge-legend-right">legend</span>
	</div>
	<div class="i-badge-content">
		<span class="i-badge-title">title</span>
	</div>
</a>

With Icon

legend
title 
<a class="i-badge">
	<div class="i-badge-legend">
		<span class="i-badge-legend-right">legend</span>
	</div>
	<div class="i-badge-content">
		<span class="i-badge-img icon-image"></span>
		<span class="i-badge-title">title</span>
	</div>
</a>

Color Variations

legend
title 
<a class="i-badge i-badge-gray">
	<div class="i-badge-legend">
		<span class="i-badge-legend-right">legend</span>
	</div>
	<div class="i-badge-content">
		<span class="i-badge-title">title</span>
	</div>
</a>

Semantic Badge

disabled
title 
<a class="i-badge i-badge-disabled">
	<div class="i-badge-legend">
		<span class="i-badge-legend-right">disabled</span>
	</div>
	<div class="i-badge-content">
		<span class="i-badge-title">title</span>
	</div>
</a>

Boxes

Simple

content
<div class="i-box">content</div>

Highlighted

title
content
<div class="i-box highlight">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">content</div>
</div>

With Sections

title
content section 1
section 2
content section 2 
<div class="i-box">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">
		content section 1
		<div class="titled-rule">section 2</div>
		content section 2
	</div>
</div>

Only Sections

section 1
content section 1
section 2
content section 2 
<div class="i-box titled">
	<div class="i-box-content">
		<div class="titled-rule">section 1</div>
		content section 1
		<div class="titled-rule">section 2</div>
		content section 2
	</div>
</div>

With Buttons

title
content
<div class="i-box">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
		<div class="i-box-buttons">
			<div class="toolbar">
				<button class="i-button">Button</button>
				<button class="i-button highlight">Button</button>
			</div>
		</div>
	</div>
	<div class="i-box-content">content</div>
</div>

With Metadata

title
label: value
content
<div class="i-box">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
		<div class="i-box-metadata">
			<span class="label">label:</span>
			<span class="content">value</span>
		</div>
	</div>
	<div class="i-box-content">content</div>
</div>

Sortable

title
content
<div class="i-box">
	<div class="ui-i-box-sortable-handle"></div>
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">content</div>
</div>

Empty

No results found
<div class="i-box">
	<div class="empty">No results found</div>
</div>

Header Only

title
<div class="i-box header-only">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
</div>

Action Box

label
description
<div class="action-box">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
		<div class="toolbar">
			<button class="i-button">Button</button>
			<button class="i-button highlight">Button</button>
		</div>
	</div>
</div>

Action Box With Sections

label
description
label
description
<div class="action-box">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

Semantic Action Box

label
description
label
description
label
description
label
description
label
description
label
description
<div class="action-box accept">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

<div class="action-box danger">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

<div class="action-box highlight">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

<div class="action-box warning">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

<div class="action-box disabled">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

<div class="action-box plain">
	<div class="section">
		<span class="icon icon-image"></span>
		<div class="text">
			<div class="label">label</div>
			<div>description</div>
		</div>
	</div>
</div>

Padded Box

box content
<div class="padded-box">
	<div class="padded-box-pad icon-image"></div>
	<div class="padded-box-content">box content</div>
</div>

Timeline Item

J
John Doe performed this action
content
<div class="i-timeline-item">
	<div class="i-timeline-item-label avatar-placeholder" style="background-color: #aed581;">J</div>
	<div class="i-timeline-item-box header-indicator-left">
		<div class="i-box-header">
			<strong>John Doe</strong> performed this action
			<time>20 Jun 2017</time>
		</div>
		<div class="i-box-content">content</div>
	</div>
</div>

Timeline Item Bottom

J
John Doe performed this action
timeline item title
content
<div class="i-timeline-item">
	<div class="i-timeline-item-label avatar-placeholder" style="background-color: #aed581;">J</div>
	<div class="flexrow i-timeline-item-content">
		<div class="i-timeline-item-metadata">
			<div class="f-self-stretch">
				<strong>John Doe</strong> performed this action
				<time>20 Jun 2017</time>
			</div>
			<div>
				<a href="#">link</a>
			</div>
		</div>
		<div class="i-timeline-item-box header-indicator-top">
			<div class="i-box-header flexrow">
				<span class="f-self-stretch">timeline item title</span>
				<a class="i-link icon-edit" href="#"></a>
			</div>
			<div class="i-box-content js-form-container">content</div>
		</div>
	</div>
</div>

Timeline Item Header Only

J
John Doe performed this action 
<div class="i-timeline-item">
	<div class="i-timeline-item-label avatar-placeholder" style="background-color: #aed581;">J</div>
	<div class="i-timeline-item-box header-indicator-left header-only">
		<div class="i-box-header">
			<strong>John Doe</strong> performed this action
			<time>20 Jun 2017</time>
		</div>
	</div>
</div>

Timeline Item Content Only

content
<div class="i-timeline-item">
	<div class="i-timeline-item-label action icon-image"></div>
	<div class="i-timeline-item-box content-indicator-left">
		<div class="i-box-content">content</div>
		<div class="i-box-footer hidden-if-empty"></div>
	</div>
</div>

Buttons

Button

The i-button class can be applied to either a button or an a tag.

<button class="i-button">Button</button>

Semantic Button

<button class="i-button accept">accept</button>
<button class="i-button danger">danger</button>
<button class="i-button highlight">highlight</button>
<button class="i-button warning">warning</button>

Text Color Button

<button class="i-button text-color accept">accept</button>
<button class="i-button text-color danger">danger</button>
<button class="i-button text-color highlight">highlight</button>
<button class="i-button text-color warning">warning</button>

Text Color On Hover

<button class="i-button text-color color-on-hover accept">accept</button>
<button class="i-button text-color color-on-hover danger">danger</button>
<button class="i-button text-color color-on-hover highlight">highlight</button>
<button class="i-button text-color color-on-hover warning">warning</button>

Outline Buttons

<button class="i-button text-color outline">button</button>
<button class="i-button text-color outline accept">accept</button>
<button class="i-button text-color outline danger">danger</button>
<button class="i-button text-color outline highlight">highlight</button>
<button class="i-button text-color outline warning">warning</button>

Dashed Buttons

<button class="i-button text-color dashed">button</button>
<button class="i-button text-color outline dashed">button</button>
<button class="i-button text-color outline dashed accept">accept</button>
<button class="i-button text-color outline dashed danger">danger</button>
<button class="i-button text-color outline dashed highlight">highlight</button>
<button class="i-button text-color outline dashed warning">warning</button>

Subtle Buttons

The subtle class will remove both background and borders as long as the button is not on :hover nor :active. Combine it with the dashed and outline classes to get different effects when on :hover or :active

<button class="i-button text-color subtle">button</button>
<button class="i-button text-color subtle accept">accept</button>
<button class="i-button text-color subtle outline danger">danger</button>
<button class="i-button text-color subtle dashed highlight">highlight</button>
<button class="i-button text-color subtle outline dashed warning">warning</button>

Borderless Buttons

<button class="i-button text-color borderless">button</button>
<button class="i-button text-color borderless accept">accept</button>
<button class="i-button text-color borderless danger">danger</button>
<button class="i-button text-color borderless highlight">highlight</button>
<button class="i-button text-color borderless warning">warning</button>

Inputs

Input

<input type="text">

Input With Action

<div class="i-has-action">
	<input id="i-has-action" name="i-has-action" type="text" value="i-has-action">
	<button type="button" class="i-button icon-clipboard"></button>
</div>

Textarea

<textarea></textarea>

Textarea With Action

<div class="i-has-action">
	<textarea name="name" rows="10" cols="40"></textarea>
	<button type="button" class="i-button icon-clipboard"></button>
</div>

Select

<select name="select" id="select">
    <option value="option-one">option one</option>
    <option value="option-two">option two</option>
    <option value="option-three">option three</option>
</select>

Radio



<input type="radio" name="option" value="option-one" id="radio-one">
<label for="radio-one">option one</label><br>
<input type="radio" name="option" value="option-two" id="radio-two">
<label for="radio-two">option two</label><br>
<input type="radio" name="option" value="option-three" id="radio-three">
<label for="radio-three">option three</label>

Radio Toolbar

label 
<div class="toolbar">
	<div class="group i-selection">
		<span class="i-button label">label</span>
		<input type="radio" name="option" value="option-one" id="selection-radio-one">
		<label class="i-button" for="selection-radio-one">option one</label>
		<input type="radio" name="option" value="option-one" id="selection-radio-two">
		<label class="i-button" for="selection-radio-two">option two</label>
		<input type="radio" name="option" value="option-one" id="selection-radio-three">
		<label class="i-button" for="selection-radio-three">option three</label>
	</div>
</div>

I Radio

Used by the LinkingWidget field.

static text one
static text two 
<div class="i-radio">
	<input id="i-radio-one" name="i-radio" type="radio" value="i-radio-one">
	<label for="i-radio-one">i-radio one</label>
	<span class="static-text">static text one</span>
</div>

<div class="i-radio">
	<input id="i-radio-two" name="i-radio" type="radio" value="i-radio-two">
	<label for="i-radio-two">i-radio two</label>
	<span class="static-text">static text two</span>
</div>

Checkbox




<input type="checkbox" name="option" value="option-one" id="checkbox-one">
<label for="checkbox-one">option one</label><br>
<input type="checkbox" name="option" value="option-two" id="checkbox-two">
<label for="checkbox-two">option two</label><br>
<input type="checkbox" name="option" value="option-three" id="checkbox-three">
<label for="checkbox-three">option three</label><br>

Checkbox Toolbar

label 
<div class="toolbar">
	<div class="group i-selection">
		<span class="i-button label">label</span>
		<input type="checkbox" id="one">
		<label for="one" class="i-button">one</label>
		<input type="checkbox" id="two">
		<label for="two" class="i-button">two</label>
		<input type="checkbox" id="three">
		<label for="three" class="i-button">three</label>
	</div>
</div>

I Checkbox

Used by the IndicoSelectMultipleCheckboxField field.

<div class="i-checkbox">
	<input id="i-checkbox-one" name="i-checkbox" type="checkbox" value="i-checkbox-one">
	<label for="i-checkbox-one">i-checkbox one</label>
</div>

<div class="i-checkbox">
	<input id="i-checkbox-two" name="i-checkbox" type="checkbox" value="i-checkbox-two">
	<label for="i-checkbox-two">i-checkbox two</label>
</div>

Labels

Label

label 
<span class="i-label">label</span>

Semantic Label

label label label label label 
<span class="i-label accept">label</span>
<span class="i-label danger">label</span>
<span class="i-label highlight">label</span>
<span class="i-label warning">label</span>
<span class="i-label disabled">label</span>

Striped Label

label label label 
<span class="i-label striped">label</span>
<span class="i-label striped highlight">label</span>
<span class="i-label striped disabled">label</span>

Label Modifiers

label 
<span class="i-label small">label</span>

Lists

Ordered List

  • list item title
    list item content title
    list item content data
    list item content
  • list item title
    list item content title
    list item content data
    list item content
<ul class="ordered-list">
	<li>
		<div class="list-item-title">list item title</div>
		<div class="list-item-content">
			<div class="list-item-content-title">list item content title</div>
			<div class="list-item-content-data">list item content data</div>
			<div>list item content</div>
		</div>
	</li>
	<li>
		<div class="list-item-title">list item title</div>
		<div class="list-item-content">
			<div class="list-item-content-title">list item content title</div>
			<div class="list-item-content-data">list item content data</div>
			<div>list item content</div>
		</div>
	</li>
</ul>

Data List

Name
John
Lastname
Doe
Address
123 Main St. Anytown
<dl class="i-data-list dt-select-disabled">
	<dt>Name</dt>
	<dd>John</dd>
	<dt>Lastname</dt>
	<dd>Doe</dd>
	<dt>Address</dt>
	<dd>123 Main St. Anytown</dd>
</dl>

File List

<ul class="file-list">
	<li class="truncate-text">
		<a class="attachment icon-file-image" href="#">
            <span class="title">file title</span>
        </a>
	</li>
	<li class="truncate-text">
		<a class="attachment icon-file-excel" href="#">
            <span class="title">file title</span>
        </a>
	</li>
	<li class="truncate-text">
		<a class="attachment icon-file-pdf" href="#">
            <span class="title">file title</span>
        </a>
	</li>
</ul>

Boxed List

title
  • list item 1
  • list item 2
  • list item 3
<div class="i-box just-group-list">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">
		<ul class="group-list">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
		</ul>
	</div>
</div>

Boxed List With Hover Effect

title
  • list item 1
  • list item 2
  • list item 3
<div class="i-box just-group-list with-hover-effect">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">
		<ul class="group-list">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
		</ul>
	</div>
</div>

Boxed List With Content After

title
  • list item 1
  • list item 2
  • list item 3
content after list 
<div class="i-box">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">
		<ul class="group-list content-after">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
		</ul>
		<span>content after list</span>
	</div>
</div>

Boxed List With Content Before

title

Description of the following list

  • list item 1
  • list item 2
  • list item 3
<div class="i-box">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">
		<p>Description of the following list</p>
		<ul class="group-list">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
		</ul>
	</div>
</div>

Boxed Sortable List

title
  • list item 1
  • list item 2
  • list item 3
<div class="i-box just-group-list">
	<div class="i-box-header">
		<div class="i-box-title">title</div>
	</div>
	<div class="i-box-content">
		<ul class="group-list">
			<li class="ui-sortable">
				<div class="ui-sortable-handle">
					<div class="handle"></div>
				</div>
				<div class="ui-sortable-content">list item 1</div>
			</li>
			<li class="ui-sortable">
				<div class="ui-sortable-handle">
					<div class="handle"></div>
				</div>
				<div class="ui-sortable-content">list item 2</div>
			</li>
			<li class="ui-sortable">
				<div class="ui-sortable-handle">
					<div class="handle"></div>
				</div>
				<div class="ui-sortable-content">list item 3</div>
			</li>
		</ul>
	</div>
</div>

Messages

Corner Message

Wrap the corner message in a container with id corner-message-container in order to position it properly at the bottom of the page.

Do not forget to save your changes!
Save now 
<div class="corner-message">
	<div class="corner-message-text">Do not forget to save your changes!</div>
	<a class="corner-message-action" href="#">Save now</a>
</div>

Semantic Corner Message

Do not forget to save your changes!
Save now
Do not forget to save your changes!
Save now
Do not forget to save your changes!
Save now
Do not forget to save your changes!
Save now 
<div class="corner-message success">
	<div class="corner-message-text">Do not forget to save your changes!</div>
	<a class="corner-message-action" href="#">Save now</a>
</div>
<div class="corner-message warning">
	<div class="corner-message-text">Do not forget to save your changes!</div>
	<a class="corner-message-action" href="#">Save now</a>
</div>
<div class="corner-message error">
	<div class="corner-message-text">Do not forget to save your changes!</div>
	<a class="corner-message-action" href="#">Save now</a>
</div>
<div class="corner-message highlight">
	<div class="corner-message-text">Do not forget to save your changes!</div>
	<a class="corner-message-action" href="#">Save now</a>
</div>

Progress Corner Message

Saving...
Saving...
Saving...
Saving...
Saving...
<div class="corner-message progress">
	<div class="corner-message-text">Saving...</div>
</div>
<div class="corner-message progress success">
	<div class="corner-message-text">Saving...</div>
</div>
<div class="corner-message progress warning">
	<div class="corner-message-text">Saving...</div>
</div>
<div class="corner-message progress error">
	<div class="corner-message-text">Saving...</div>
</div>
<div class="corner-message progress highlight">
	<div class="corner-message-text">Saving...</div>
</div>

Error Box

Page not found

The page you are looking for doesn't exist.

Back to the main page 
<div class="error-box">
	<h1>Page not found</h1>
	<p>The page you are looking for doesn't exist.</p>
	<div class="error-box-small">
		<a href="#">Back to the main page</a>
	</div>
</div>

Message Box

You can use the fully customizable message_box macro.

There are no events in this category
<div class="info-message-box">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">There are no events in this category</div>
	</div>
</div>

Bigger Message Box

There are no events in this category
<div class="info-message-box large-icon">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">There are no events in this category</div>
	</div>
</div>

Semantic Message Box

This is the message
This is the message
This is the message
This is the message
This is the message
<div class="highlight-message-box">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">This is the message</div>
	</div>
</div>

<div class="success-message-box">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">This is the message</div>
	</div>
</div>

<div class="warning-message-box">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">This is the message</div>
	</div>
</div>

<div class="error-message-box">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">This is the message</div>
	</div>
</div>

<div class="danger-message-box">
	<div class="message-box-content">
		<span class="icon"></span>
		<div class="message-text">This is the message</div>
	</div>
</div>

Error Message Tag

Invalid 
<span class="error-message-tag">Invalid</span>

Underlined Error Message

Invalid 
<span class="error-message-underline">Invalid</span>

Semantic Message

message
message
message
message
<div class="info-message">message</div>
<div class="error-message">message</div>
<div class="warning-message">message</div>
<div class="success-message">message</div>

Progress Bars

Progress Bar

1 / 4 
<span class="i-progress">
    <span class="i-progress-bar" data-progress="25%" style="width: 25%;"></span>
<span class="i-progress-label">1 / 4</span>
</span>

Steps

Steps

To render the steps use the macros in steps.html

  • top label
    bottom label
  • top label
    bottom label
  • top label
    bottom label
  • top label
    bottom label
<ul class="steps flexrow f-a-start f-j-center">
	<li class="completed">
		<div class="label top">top label</div>
		<div class="horizontal-line"></div>
		<div class="circle flexrow f-j-center"></div>
		<div class="label bottom">bottom label</div>
	</li>
	<li class="current">
		<div class="label top">top label</div>
		<div class="horizontal-line"></div>
		<div class="circle flexrow f-j-center"></div>
		<div class="label bottom">bottom label</div>
	</li>
	<li>
		<div class="label top">top label</div>
		<div class="horizontal-line"></div>
		<div class="circle flexrow f-j-center"></div>
		<div class="label bottom">bottom label</div>
	</li>
	<li>
		<div class="label top">top label</div>
		<div class="horizontal-line"></div>
		<div class="circle flexrow f-j-center"></div>
		<div class="label bottom">bottom label</div>
	</li>
</ul>

Tables

Table

The i-table can be further customized using the classes below:

  • table:
    • .no-margin removes the top margin of the table
  • tr:
    • .selected applies to the tr to mark a row as selected
  • th, td:
    • .thin-column for a thin column
    • .empty to style the placeholder of an empty cell
    • .id-column
Name Lastname
John Doe
Richard Roe 
<table class="i-table">
	<thead>
		<tr class="i-table">
			<th class="i-table">Name</th>
			<th class="i-table">Lastname</th>
		</tr>
	</thead>
	<tbody>
		<tr class="i-table">
			<td class="i-table">John</td>
			<td class="i-table">Doe</td>
		</tr>
		<tr class="i-table">
			<td class="i-table">Richard</td>
			<td class="i-table">Roe</td>
		</tr>
	</tbody>
</table>

Table Widget

Name Lastname
John Doe
Richard Roe 
<table class="i-table-widget">
	<thead>
		<tr>
			<th>Name</th>
			<th>Lastname</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Doe</td>
		</tr>
		<tr>
			<td>Richard</td>
			<td>Roe</td>
		</tr>
	</tbody>
</table>

Table Widget With Actions

Name Lastname Address Actions
John Doe 123 Main St. Anytown
Richard Roe 125 Main St. Anytown 
<table class="i-table-widget">
	<thead>
		<tr>
			<th class="col-50">Name</th>
			<th>Lastname</th>
			<th>Address</th>
			<th class="action-column">Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Doe</td>
			<td>123 Main St. Anytown</td>
			<td class="action-column">
				<a href="#" class="icon-edit action-icon"></a>
				<a href="#" class="icon-remove action-icon"></a>
			</td>
		</tr>
		<tr>
			<td>Richard</td>
			<td>Roe</td>
			<td>125 Main St. Anytown</td>
			<td class="action-column">
				<a href="#" class="icon-edit action-icon"></a>
				<a href="#" class="icon-remove action-icon"></a>
			</td>
		</tr>
	</tbody>
</table>

Table Widget Only Body

Richard Roe 125 Main St. Anytown
John Doe 123 Main St. Anytown 
<table class="i-table-widget">
	<tbody>
		<tr>
			<td class="i-table id-column">
				<i class="designer-template-type-icon template-icon-badge"></i>
			</td>
			<td>Richard Roe</td>
			<td class="text-superfluous">125 Main St. Anytown</td>
			<td>
				<div class="thin toolbar right">
					<div class="group">
						<a class="i-button icon-edit icon-only text-color borderless" href="#"></a>
						<a class="i-button icon-remove icon-only text-color borderless danger" href="#"></a>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="i-table id-column">
				<i class="designer-template-type-icon template-icon-badge"></i>
			</td>
			<td>John Doe</td>
			<td class="text-superfluous">123 Main St. Anytown</td>
			<td>
				<div class="thin toolbar right">
					<div class="group">
						<a class="i-button icon-edit icon-only text-color borderless" href="#"></a>
						<a class="i-button icon-remove icon-only text-color borderless danger" href="#"></a>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

Tags

Tag

tag 
<span class="i-tag">tag</span>

Semantic Tag

tag tag tag tag tag tag 
<span class="i-tag success">tag</span>
<span class="i-tag error">tag</span>
<span class="i-tag highlight">tag</span>
<span class="i-tag warning">tag</span>
<span class="i-tag visited">tag</span>
<span class="i-tag strong">tag</span>

Outline Tag

The standard i-tag has a transparent background. You can use the .contrast modifier to highlight the tag.

Outline

tag tag tag tag tag tag tag

Contrast outline

tag tag tag tag tag tag tag 
<div class="styleguide-tags-container">
	<h4>Outline</h4>
	<span class="i-tag outline">tag</span>
	<span class="i-tag outline success">tag</span>
	<span class="i-tag outline error">tag</span>
	<span class="i-tag outline highlight">tag</span>
	<span class="i-tag outline warning">tag</span>
	<span class="i-tag outline visited">tag</span>
	<span class="i-tag outline strong">tag</span>

	<h4>Contrast outline</h4>
	<span class="i-tag outline contrast">tag</span>
	<span class="i-tag outline contrast success">tag</span>
	<span class="i-tag outline contrast error">tag</span>
	<span class="i-tag outline contrast highlight">tag</span>
	<span class="i-tag outline contrast warning">tag</span>
	<span class="i-tag outline contrast visited">tag</span>
	<span class="i-tag outline contrast strong">tag</span>
</div>

Dashed Outline Tag

tag tag tag tag tag tag tag 
<span class="i-tag outline dashed">tag</span>
<span class="i-tag outline dashed success">tag</span>
<span class="i-tag outline dashed error">tag</span>
<span class="i-tag outline dashed highlight">tag</span>
<span class="i-tag outline dashed warning">tag</span>
<span class="i-tag outline dashed visited">tag</span>
<span class="i-tag outline dashed strong">tag</span>