Components

Alerts

Default Alert

Alerts can be used when you need to give more information to the user based on their action or before they take an action. Use .Alert followed by the specific alert modifier. You can use Alert--info, Alert--warning, Alert--error, or Alert--success. If you need to show an alert on a themed background then use the Alert--ghost modifier.

This is an info alert. Use it for displaying information.
This is a warning alert. Use it to warn the user of an action.
This is an error alert. Use it to indicate an error made by the user.
This is a success alert. Use it to indicate a successful action taken by the user.
<div class="border-grey">
	<div class="pa5">
		<div>
			<div class="Alert Alert--info">This is <a class="u-link-natural" href="#">an info alert</a>. Use it for displaying information.</div>
		</div>
		<div class="mt4">
			<div class="Alert Alert--warning">This is <a class="u-link-natural" href="#">a warning alert</a>. Use it to warn the user of an action.</div>
		</div>
		<div class="mt4">
			<div class="Alert Alert--danger">This is <a class="u-link-natural" href="#">an error alert</a>. Use it to indicate an error made by the user.</div>
		</div>
		<div class="mt4">
			<div class="Alert Alert--success">This is <a class="u-link-natural" href="#">a success alert</a>. Use it to indicate a successful action taken by the user.</div>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Ghost Alert

This is an ghost alert. Use it for displaying information.
<!-- Ghost Alert -->
<div class="bg-dark">
	<div class="pa5">
		<div>
			<div class="Alert Alert--ghost">This is <a class="u-link-natural" href="#">an ghost alert</a>. Use it for displaying information.</div>
		</div>
	</div>
</div>
<!-- /Ghost Alert -->

Theme Blue Alert

This is a theme alert. It's actually the same as the ghost alert except the background colour is different. Use it for displaying information.
<!-- Alert Theme Blue -->
<div class="bg-blue-bright">
	<div class="pa5">
		<div class="Alert Alert--ghost">This is <a class="u-link-natural" href="#">a theme alert</a>. It's actually the same as the ghost alert except the background colour is different. Use it for displaying information.</div>
	</div>
</div>
<!-- /Alert Theme Blue -->

Assistant Alert

This is an assistant alert. It's actually the same as the ghost alert except the background colour is different. Use it for displaying information in the assistant format.
<!-- Alert Assistant -->
<div class="bg-grey">
	<div class="pa5">
		<div class="Alert Alert--assistant">This is <a class="u-link-natural" href="#">an assistant alert</a>. It's actually the same as the ghost alert except the background colour is different. Use it for displaying information in the assistant format.</div>
	</div>
</div>
<!-- /Alert Assistant -->

Avatars

Avatar Square

Avatars display an image if the user has uploaded one but if not, initials are shown instead. The background color is chosen randomly for each user and can be set inline on .Avatar. The image URL is set inline on .Avatar--img. Additionally, each avatar should have a title attribute with the user's name.

Basic Structure

T
T

Avatar Sizes

Square avatars are used for company logos. There are 4 different sizes you can use .Avatar--s, .Avatar--m, .Avatar--l, .Avatar--xl.

T
T
T
T
T
<h4 class="mt5">Basic Structure</h4>

<div class="border-grey mt4">
	<div class="pa5">
		<div>
			<!-- Medium -->
			<div class="Avatar Avatar--square Avatar--m" style="background: #556BCC;" title="Tribely">
				<div class="Avatar--initials">T</div>
				<div class="Avatar--img Avatar--square" style="background-image: url('assets/toolkit/images/tribely.png')"></div>
			</div>
		</div>
		<div class="mt2">
			<!-- Medium -->
			<div class="Avatar Avatar--square Avatar--m" style="background: #556BCC;" title="Tribely">
				<div class="Avatar--initials">T</div>
				<div class="Avatar--img"></div>
			</div>
		</div>
	</div>
</div>
<!-- /Square Avatar -->

<!-- Square Avatar -->
<h4 class="mt5">Avatar Sizes</h4>

<p class="mt5">Square avatars are used for company logos. There are 4 different sizes you can use <code>.Avatar--s</code>, <code>.Avatar--m</code>, <code>.Avatar--l</code>, <code>.Avatar--xl</code>.</p>
<div class="border-grey mt4">
	<div class="pa4">
		<div>
			<!-- Extra Large -->
			<div class="Avatar Avatar--square Avatar--xl" style="background: #556BCC;" title="Tribely">
				<div class="Avatar--initials">T</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Large -->
			<div class="Avatar Avatar--square Avatar--l" style="background: #31708F;" title="Tribely">
				<div class="Avatar--initials">T</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Medium -->
			<div class="Avatar Avatar--square Avatar--m" style="background: #55A0CC;" title="Tribely">
				<div class="Avatar--initials">T</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Small -->
			<div class="Avatar Avatar--square Avatar--s" style="background: #55C6CC;" title="Tribely">
				<div class="Avatar--initials">T</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Extra Small -->
			<div class="Avatar Avatar--square Avatar--xs" style="background: #2D72EB;" title="Tribely">
				<div class="Avatar--initials">T</div>
			</div>
		</div>
	</div>
</div>
<!-- /Square Avatar -->

Avatar Round

Avatars display an image if the user has uploaded one but if not, initials are shown instead. The background color is chosen randomly for each user and can be set inline on .Avatar. The image URL is set inline on .Avatar--img. Additionally, each avatar should have a title attribute with the user's name.

Basic Structure

HC
HC

Avatar Sizes

Round avatars are used for user profiles. There are 4 different sizes you can use .Avatar--s, .Avatar--m, .Avatar--l, .Avatar--xl.

HC
HC
HC
HC
HC
<!-- Round Avatar -->
<h4>Basic Structure</h4>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<!-- Medium -->
			<div class="Avatar Avatar--round Avatar--m" style="background: #556BCC;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
				<div class="Avatar--img Avatar--round" style="background-image: url('assets/toolkit/images/hc.jpg')"></div>
			</div>
		</div>
		<div class="mt2">
			<!-- Medium -->
			<div class="Avatar Avatar--round Avatar--m" style="background: #556BCC;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
				<div class="Avatar--img"></div>
			</div>
		</div>
	</div>
</div>
<!-- /Round Avatar -->

<!-- Round Avatar -->
<h4 class="mt5">Avatar Sizes</h4>

<p class="mt5">Round avatars are used for user profiles. There are 4 different sizes you can use <code>.Avatar--s</code>, <code>.Avatar--m</code>, <code>.Avatar--l</code>, <code>.Avatar--xl</code>.</p>
<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<!-- Extra Large -->
			<div class="Avatar Avatar--round Avatar--xl" style="background: #556BCC;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Large -->
			<div class="Avatar Avatar--round Avatar--l" style="background: #31708F;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Medium -->
			<div class="Avatar Avatar--round Avatar--m" style="background: #55A0CC;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Small -->
			<div class="Avatar Avatar--round Avatar--s" style="background: #55C6CC;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
			</div>
		</div>
		<div class="mt2">
			<!-- Extra Small -->
			<div class="Avatar Avatar--round Avatar--xs" style="background: #2D72EB;" title="Harry Cresswell">
				<div class="Avatar--initials">HC</div>
			</div>
		</div>
	</div>
</div>
<!-- /Square Avatar -->

Button

Primary Regular

Primary buttons are used for the main actions which we want our users to take. Use them sparingly, to draw attention to the most important actions. A primary buttons should not be used alongside another primary button. Use the Button class followed by Button--primary. To disable a button use .is-disabled.

Button Sizes

Define a regular primary button with either of the following size modifiers .Button--s, .Button--m, .Button--l. The .with-100 modifier can be used when a button needs to span the full width of it's container. An example of this would be in a modal.

<!-- Primary Regular Button -->
<h4>Button Sizes</h4>

<p class="mt5">Define a regular primary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>. The <code>.with-100</code> modifier can be used when a button needs to span the full width of it's container.
	An example of this would be in a modal.</p>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--primary Button--l">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--primary Button--m">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--primary Button--s">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--primary Button--s is-disabled">Submit</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Primary Round

Round primary buttons are used as an alternative to the main regular shape. They are most commonly found in modals where the user is given two options. Similarly .is-disabled can be used to disable a button.

Button Sizes

Round buttons should only use the .Button--l size modifier.

<!-- Primary Round Button -->
<h4>Button Sizes</h4>

<p class="mt5">Round buttons should only use the <code>.Button--l</code> size modifier.</p>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--primary Button--round Button--l">Let's do it</button>
		</div>
		<div class="mt3">
			<button class="Button Button--round Button--l is-disabled">Let's do it</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

<!-- /Primary Round Button -->

Primary Floating

Primary buttons are used for the main actions which we want our users to take. Use them sparingly, to draw attention to the most important actions. A primary buttons should not be used alongside another primary button. If a particular pattern requires more than one button then a secondary button should be used with the primary button. .is-disabled can be used to disable a button.

.Button--floating

<!-- Floating Action Button -->
<h4>.Button--floating</h4>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--primary Button--floating"><i class="material-icons">share</i></button>
		</div>
		<div class="mt3">
			<button class="Button Button--primary Button--floating"><i class="material-icons">add</i></button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Floating Action Button -->

Secondary Regular

Secondary buttons contrast primary buttons. Secondary buttons should be used to signify optional, infrequent or subtle actions .is-disabled can be used to disable a button.

Button Sizes

Define a regular secondary button with either of the following size modifiers .Button--s, .Button--m, .Button--l.

<!-- Secondary Regular Button -->
<h4>Button Sizes</h4>

<p class="mt5">Define a regular secondary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>.</p>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--secondary Button--l">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--secondary Button--m">Preview Proposal</button>
		</div>
		<div class="mt3">
			<button class="Button Button--secondary Button--s">Clear Search</button>
		</div>
		<div class="mt3">
			<button class="Button Button--s is-disabled">Clear Search</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Secondary Regular Button -->

Tertiary Regular

Tertairy buttons are useful when you want to use several buttons next to each other. .is-disabled can be used to disable a button.

Button Sizes

Define a regular tertairy button with either of the following size modifiers .Button--s, .Button--m, .Button--l.

<!-- Tertairy Regular Button -->
<h4>Button Sizes</h4>

<p class="mt5">Define a regular tertairy button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>.</p>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--tertiary Button--l">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--tertiary Button--m">Preview Proposal</button>
		</div>
		<div class="mt3">
			<button class="Button Button--tertiary Button--s">Clear Search</button>
		</div>
		<div class="mt3">
			<button class="Button Button--s is-disabled">Clear Search</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Tertairy Regular Button -->

Secondary Round

Secondary buttons contrast primary buttons. Secondary buttons should be used to signify optional, infrequent or subtle actions .is-disabled can be used to disable a button.

.Button--round

<!-- Secondary Round Button -->
<h4>.Button--round</h4>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--secondary Button--round Button--l">Not right now</button>
		</div>
		<div class="mt3">
			<button class="Button Button--round Button--l is-disabled">Not right now</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Secondary Round Button -->

Secondary Icon

Icon buttons contrast primary buttons. Secondary buttons should be used to signify optional, infrequent or subtle actions .is-disabled can be used to disable a button.

.Button--icon

<!-- Icon Button -->
<h4>.Button--icon</h4>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Icon Icon--s Button Button--secondary"><i class="material-icons md-18">thumb_up</i></button>
			<button class="Icon Icon--s Button Button--secondary Button--icon"><i class="material-icons md-18">thumb_down</i></button>
			<button class="Icon Icon--s Button Button--secondary Button--icon"><i class="material-icons md-18">mail</i></button>
			<button class="Icon Icon--s Button Button--secondary Button--icon"><i class="material-icons md-18">archive</i></button>
			<button class="Icon Icon--s Button Button--secondary Button--icon"><i class="material-icons md-18">star</i></button>
		</div>

		<div class="mt3">
			<button class="Icon Icon--m Button Button--secondary"><i class="material-icons md-18">more_horiz</i></button>
			<button class="Icon Icon--m Button Button--secondary Button--icon"><i class="material-icons md-18">star</i></button>
			<button class="Icon Icon--m Button Button--secondary Button--icon"><i class="material-icons md-18">mail</i></button>
		</div>

		<div class="mt3">
			<button class="Icon Icon--l Button Button--secondary"><i class="material-icons md-24">star</i></button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Icon Button -->

Tertiary Icon

Icon buttons contrast primary buttons. Tertiary buttons should be used to signify optional, infrequent or subtle actions .is-disabled can be used to disable a button.

.Button--icon

<!-- Icon Button -->
<h4>.Button--icon</h4>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Icon Icon--s Button Button--tertiary"><i class="material-icons md-18">thumb_up</i></button>
			<button class="Icon Icon--s Button Button--tertiary Button--icon"><i class="material-icons md-18">thumb_down</i></button>
			<button class="Icon Icon--s Button Button--tertiary Button--icon"><i class="material-icons md-18">mail</i></button>
			<button class="Icon Icon--s Button Button--tertiary Button--icon"><i class="material-icons md-18">archive</i></button>
			<button class="Icon Icon--s Button Button--tertiary Button--icon"><i class="material-icons md-18">star</i></button>
		</div>

		<div class="mt3">
			<button class="Icon Icon--m Button Button--tertiary"><i class="material-icons md-18">more_horiz</i></button>
			<button class="Icon Icon--m Button Button--tertiary Button--icon"><i class="material-icons md-18">star</i></button>
			<button class="Icon Icon--m Button Button--tertiary Button--icon"><i class="material-icons md-18">mail</i></button>
		</div>

		<div class="mt3">
			<button class="Icon Icon--l Button Button--tertiary"><i class="material-icons md-24">star</i></button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Icon Button -->

Ghost Regular

Ghost buttons are used on dark backgrounds or reversed themes. Use the Button--ghost modifier followed by the required size modifier.

Button Sizes

Define a regular secondary button with either of the following size modifiers .Button--s, .Button--m, .Button--l.

<!-- Ghost Regular Button -->
<h4>Button Sizes</h4>

<p class="pt5">Define a regular secondary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>.</p>

<div class="bg-ain-bright mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--ghost Button--l">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--ghost Button--m">Log In</button>
		</div>
		<div class="mt3">
			<button class="Button Button--ghost Button--s">Clear Search</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-ain-bright -->
<!-- /Ghost Regular Button -->

Ghost Round

Ghost buttons are used on dark backgrounds or reversed themes. Use the Button--ghost modifier followed by the required size modifier.

.Button--round

Define a regular secondary button with either of the following size modifiers .Button--s, .Button--m, .Button--l.

<!-- Ghost Round Button -->
<h4>.Button--round</h4>

<p class="mt5">Define a regular secondary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>.</p>

<div class="bg-ain-bright mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--ghost Button--round Button--l">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--ghost Button--round Button--m">Log In</button>
		</div>
		<div class="mt3">
			<button class="Button Button--ghost Button--round Button--s">Clear Search</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-ain-bright -->
<!-- /Ghost Round Button -->

Ghost Icon Text

Ghost buttons are used on dark backgrounds or reversed themes. Use the Button--ghost modifier followed by the required size modifier.

Button Sizes

Define a regular secondary button with either of the following size modifiers .Button--m, .Button--l.

<!-- Ghost Icons with text Button -->
<h4>Button Sizes</h4>

<p class="mt5">Define a regular secondary button with either of the following size modifiers <code>.Button--m</code>, <code>.Button--l</code>.</p>

<div class="bg-ain-bright mt5">
	<div class="pa5">
		<div>
			<div class="Flex-row Flex--gutters">
				<div class="Flex-column">
					<button class="Button Button--ghost Button--l width-100">
            <i class="material-icons md-18 pr2">thumb_up</i>
            <span>Like it</span>
          </button>
				</div>
				<div class="Flex-column">
					<button class="Button Button--ghost Button--l width-100">
            <i class="material-icons md-18 pr2">thumb_down</i>
            <span>No Thanks</span>
          </button>
				</div>
			</div>
		</div>
		<div class="mt3">
			<button class="Button Button--ghost Button--m">
        <i class="material-icons md-18 pr2">file_download</i>
        <span>Download PDF</span>
      </button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-ain-bright -->
<!-- /Ghost Icons with text Button -->

Ghost Icon

Icon buttons contrast primary buttons. Secondary buttons should be used to signify optional, infrequent or subtle actions .is-disabled can be used to disable a button.

.Button--ghost

<!-- Ghost Icon Button -->
<h4>.Button--ghost</h4>

<div class="bg-ain-bright mt5">
	<div class="pa5">
		<div>
			<button class="Icon Icon--s Button Button--ghost"><i class="material-icons md-18">thumb_up</i></button>
			<button class="Icon Icon--s Button Button--ghost Button--icon"><i class="material-icons md-18">thumb_down</i></button>
			<button class="Icon Icon--s Button Button--ghost Button--icon"><i class="material-icons md-18">mail</i></button>
			<button class="Icon Icon--s Button Button--ghost Button--icon"><i class="material-icons md-18">archive</i></button>
			<button class="Icon Icon--s Button Button--ghost Button--icon"><i class="material-icons md-18">star</i></button>
		</div>

		<div class="mt3">
			<button class="Icon Icon--m Button Button--ghost"><i class="material-icons md-18">share</i></button>
			<button class="Icon Icon--m Button Button--ghost Button--icon"><i class="material-icons md-18">star</i></button>
			<button class="Icon Icon--m Button Button--ghost Button--icon"><i class="material-icons md-18">mail</i></button>
		</div>

		<div class="mt3">
			<button class="Icon Icon--l Button Button--ghost"><i class="material-icons md-24">star</i></button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.borderain-bright -->
<!-- /Ghost Icon Button -->

Ui Regular

UI buttons are used for the main actions which we want our users to take. Use them sparingly, to draw attention to the most important actions. A primary buttons should not be used alongside another primary button. Use the Button class followed by Button--primary. To disable a button use .is-disabled.

Button Sizes

Define a regular primary button with either of the following size modifiers .Button--s, .Button--m, .Button--l. The .with-100 modifier can be used when a button needs to span the full width of it's container. An example of this would be in a modal.

<!-- UI Primary Regular Button -->
<h4>Button Sizes</h4>

<p class="mt5">Define a regular primary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>. The <code>.with-100</code> modifier can be used when a button needs to span the full width of it's container.
	An example of this would be in a modal.</p>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--positive Button--m">Add</button>
		</div>
		<div class="mt3">
			<button class="Button Button--negative Button--m">Delete</button>
		</div>
		<div class="mt3">
			<button class="Button Button--positive Button--s">Add Booster</button>
		</div>
		<div class="mt3">
			<button class="Button Button--negative Button--s">Delete</button>
		</div>
		<div>
			<div class="mt3">
				<button class="Button Button--negative Button--s is-disabled">Delete</button>
			</div>
		</div>
		<!--/.pa5 -->
	</div>
	<!--/.border-grey -->
	<!-- /UI Primary Regular Button -->

Theme Blue Regular

Blue theme buttons are used exclusively in components and flows which use the blue theme. A primary buttons should not be used alongside another primary button. Use the Button class followed by Button--primary. To disable a button use .is-disabled.

Button Sizes

Define a regular primary button with either of the following size modifiers .Button--s, .Button--m, .Button--l. The .with-100 modifier can be used when a button needs to span the full width of it's container. An example of this would be in a modal.

<!-- Theme Primary Regular Button -->
<h4>Button Sizes</h4>

<p class="mt5"> Define a regular primary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>, <code>.Button--l</code>. The <code>.with-100</code> modifier can be used when a button needs to span the full width of it's container.
	An example of this would be in a modal.</p>

<div class="bg-ain-bright mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--theme-blue Button--l">Find Projects</button>
		</div>
		<div class="mt3">
			<button class="Button Button--theme-blue Button--m">Publish</button>
		</div>
		<div class="mt3">
			<button class="Button Button--theme-blue Button--s">Submit</button>
		</div>
		<div class="mt3">
			<button class="Button Button--theme-blue Button--s is-disabled">Submit</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-ain-bright -->
<!-- /Theme Primary Regular Button -->

Theme Blue Round

Round primary buttons are used as an alternative to the main regular shape. They are most commonly found in modals where the user is given two options. Similarly .is-disabled can be used to disable a button.

Button Sizes

Round buttons should only use the .Button--l size modifier.

<!-- Theme Primary Round Button -->
<h4>Button Sizes</h4>

<p class="mt5">Round buttons should only use the <code>.Button--l</code> size modifier.</p>

<div class="bg-ain-bright mt5">
	<div class="pa5">
		<div>
			<button class="Button Button--theme-blue Button--round Button--l">Continue</button>
		</div>
		<div class="mt3">
			<button class="Button Button--round Button--l is-disabled">Continue</button>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-ain-bright -->
<!-- /Theme Primary Round Button -->

Button Group

Group Basics

Primary buttons are used for the main actions which we want our users to take. Use them sparingly, to draw attention to the most important actions. A primary buttons should not be used alongside another primary button. Use the Button class followed by Button--primary. To disable a button use .is-disabled.

Button Sizes

Define a regular primary button with either of the following size modifiers .Button--s, .Button--m. The .with-100 modifier can be used when a button needs to span the full width of it's container. An example of this would be in a modal.

<!-- Group Buttons -->
<h4>Button Sizes</h4>

<p class="mt5">Define a regular primary button with either of the following size modifiers <code>.Button--s</code>, <code>.Button--m</code>. The <code>.with-100</code> modifier can be used when a button needs to span the full width of it's container. An example of this
	would be in a modal.</p>

<div class="border-grey mt5">
	<div class="pa5">
		<div>
			<div class="Button-group">
				<button class="Button--primary Button--s">Left</button>
				<button class="Button--primary Button--s">Middle</button>
				<button class="Button--primary Button--s">Right</button>
			</div>
		</div>
		<div class="mt3">
			<div class="Button-group">
				<button class="Button--primary Button--m">Left</button>
				<button class="Button--primary Button--m">Middle</button>
				<button class="Button--primary Button--m">Right</button>
			</div>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->
<!-- /Group Buttons -->

Forms

Text Input

<div class="border-grey mt5">
	<div class="pa5">
		<label class="Form-label" for="textInput">Email Address</label>
		<input class="Input Input--default Input--l" type="text" placeholder="Email address" id="textInput" />
		<div class="mt3">
			<label class="Form-label" for="textInput">Password</label>
			<input class="Input Input--default Input--m" type="password" placeholder="Password" id="textInput" />
		</div>
		<div class="mt3">
			<label class="Form-label" for="textInput">First name</label>
			<input class="Input Input--default Input--s" type="text" placeholder="First Name" id="textInput" />
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Text Input Groups

$
http://
1
£
£ .00
@slack.com 
<div class="border-grey mt5">
	<div class="pa5">
		<div class="Input-group Input-group--l">
			<span class="Input-group__addon">$</span>
			<input class="Input Input--default Input--l" type="text" placeholder="Enter Amount" id="textInput" />
		</div>
		<div class="mt3">
			<div class="Input-group Input-group--m">
				<span class="Input-group__addon">http://</span>
				<input class="Input Input--default Input--m" type="text" placeholder="Enter URL" id="textInput" />
			</div>
		</div>
		<div class="mt3">
			<div class="Input-group Input-group--m">
				<span class="Input-group__addon">1</span>
				<input class="Input Input--default Input--m" type="text" placeholder="Enter Highlight" id="textInput" />
			</div>
		</div>
		<div class="mt3">
			<div class="Input-group Input-group--s">
				<span class="Input-group__addon">£</span>
				<input class="Input Input--default Input--s" type="text" placeholder="Enter Amount" id="textInput" />
			</div>
		</div>
		<div class="mt3">
			<div class="Input-group Input-group--m">
				<span class="Input-group__addon">£</span>
				<input class="Input Input--default Input--m" type="text" placeholder="Enter Amount" id="textInput" />
				<span class="Input-group__addon">.00</span>
			</div>
		</div>
		<div class="mt3">
			<div class="Input-group Input-group--l">
				<input class="Input Input--default Input--l" type="text" placeholder="Enter Amount" id="textInput" />
				<span class="Input-group__addon">@slack.com</span>
			</div>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Textarea

<div class="border-grey mt5">
	<div class="pa5">
		<label for="textArea">Description</label>
		<textarea class="Textarea Textarea--default Textarea--l" name="" placeholder="Start typing..." id="textArea"></textarea>
		<div class="mt3">
			<label for="textArea">Description</label>
			<textarea class="Textarea Textarea--default Textarea--m" name="" placeholder="Start typing..." id="textArea"></textarea>
		</div>
		<div class="mt3">
			<label for="textArea">Description</label>
			<textarea class="Textarea Textarea--default Textarea--s" name="" placeholder="Start typing..." id="textArea"></textarea>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Select

<div class="border-grey mt5">
	<div class="pa5">
		<div class="Select Select--default Select--l">
			<select>
      					<option value="">Option 1</option>
      					<option value="">Option 2</option>
      					<option value="">Option 3</option>
      					<option value="">Option 4</option>
      					<option value="">Option 5</option>
    				</select>
		</div>
		<!-- /.Select -->
		<div class="mt3">
			<div class="Select Select--default Select--m">
				<select>
          					<option value="">Option 1</option>
          					<option value="">Option 2</option>
          					<option value="">Option 3</option>
          					<option value="">Option 4</option>
          					<option value="">Option 5</option>
        				</select>
			</div>
			<!-- /.Select -->
		</div>
		<div class="mt3">
			<div class="Select Select--default Select--s">
				<select>
          					<option value="">Option 1</option>
          					<option value="">Option 2</option>
          					<option value="">Option 3</option>
          					<option value="">Option 4</option>
          					<option value="">Option 5</option>
        				</select>
			</div>
			<!-- /.Select -->
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Select Groups

£
£
£ 
<div class="border-grey mt5">
	<div class="pa5">
		<div class="Select-group Select-group--l">
			<span class="Input-group__addon">£</span>
			<div class="Select Select--default Select--l">
				<select>
          					<option value="">Option 1</option>
          					<option value="">Option 2</option>
          					<option value="">Option 3</option>
          					<option value="">Option 4</option>
          					<option value="">Option 5</option>
        				</select>
			</div>
			<!-- /.Select -->
		</div>
		<!-- /.Select-group -->
		<div class="mt3">
			<div class="Select-group Select-group--m">
				<span class="Input-group__addon">£</span>
				<div class="Select Select--default Select--m">
					<select>
                        <option value="">Option 1</option>
                        <option value="">Option 2</option>
                        <option value="">Option 3</option>
                        <option value="">Option 4</option>
                        <option value="">Option 5</option>
                    </select>
				</div>
				<!-- /.Select -->
			</div>
			<!-- /.Select-group -->
		</div>
		<div class="mt3">
			<div class="Select-group Select-group--s">
				<span class="Input-group__addon">£</span>
				<div class="Select Select--default Select--s">
					<select>
                        <option value="">Option 1</option>
                        <option value="">Option 2</option>
                        <option value="">Option 3</option>
                        <option value="">Option 4</option>
                        <option value="">Option 5</option>
                    </select>
				</div>
				<!-- /.Select -->
			</div>
			<!-- /.Select-group -->
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Search Input

search
search 
<div class="border-grey mt5">
	<div class="pa5">
		<div class="Search">
			<span class="Search__icon--l"><i class="material-icons">search</i></span>
			<input class="Search__input Input Input--default Input--l" type="search" placeholder="What are you looking for?" id="textInput" />
		</div>
		<div class="mt3">
			<div class="Search">
				<span class="Search__icon--m"><i class="material-icons">search</i></span>
				<input class="Search__input Input Input--default Input--m" type="search" placeholder="What are you looking for?" id="textInput" />
			</div>
		</div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Radio

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

<div class="border-grey">
	<div class="pa5">
		<input class="material-icons" name="radio" type="radio" checked="checked">
		<label for="test">Checked</label>
		</input>

		<input class="material-icons" name="radio" type="radio">
		<label for="test">Unchecked</label>
		</input>

		<input class="material-icons" name="radio" type="radio">
		<label for="test">Disabled</label>
		</input>

		<input class="material-icons" name="radio" type="radio" checked="checked" disabled="disabled">
		<label for="test">Disabled &amp; Checked</label>
		</input>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Checkbox

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.

<div class="border-grey">
	<div class="pa5">
		<input class="material-icons" checked="checked" type="checkbox">
		<label for="test">Checked</label>
		</input>

		<input class="material-icons" type="checkbox">
		<label for="test">Unchecked</label>
		</input>

		<input class="material-icons" disabled="disabled" type="checkbox">
		<label for="test">Disabled</label>
		</input>

		<input class="material-icons" checked="checked" disabled="disabled" type="checkbox">
		<label for="test">Disabled &amp; checked</label>
		</input>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Color Input

<div class="border-grey">
	<div class="pa5">
		<input class="" type="color" placeholder="Email address" id="textInput" />
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Range Input

<div class="border-grey">
	<div class="pa5">
		<input class="" type="range" placeholder="Email address" id="textInput" />
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

File Input

<div class="border-grey">
	<div class="pa5">
		<label class="Input-group Input-group--m">
            <span class="Input Input--default Input--m">
            <input type="file" onchange="parentNode.setAttribute('data-file', this.files[0].name)">
            </span>
            <span class="Button Button--secondary Button--m Input-group__addon">Choose file</span>
        </label>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Form Group

<div class="border-grey">
	<div class="pa5">
		<form action="#forms">
			<div>
				<label class="Form-label" for="">Name</label>
				<input class="Input Input--default Input--m" type="text" placeholder="Name">
			</div>
			<div class="mt2">
				<label class="Form-label" for="">Email</label>
				<input class="Input Input--default Input--m" type="text" placeholder="Email">
			</div>
			<div class="mt2">
				<input class="material-icons" name="radio" type="radio" checked="checked">
				<label for="test">Checked</label>
				</input>

				<input class="material-icons" name="radio" type="radio">
				<label for="test">Unchecked</label>
				</input>
			</div>
			<div class="mt2">
				<label class="Form-label" for="textArea">Description</label>
				<textarea class="Textarea Textarea--default Textarea--m" name="" placeholder="Start typing..." id="textArea"></textarea>
			</div>
			<div class="mt2">
				<input class="material-icons" type="checkbox">
				<label for="test">Unchecked</label>
				</input>
			</div>
			<div class="mt2">
				<button class="Button Button--primary Button--m">Submit</button>
				<button class="Button Button-link Button--m">Cancel</button>
			</div>
		</form>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Form Hints

Name is invalid.

Email is available.

<div class="border-grey">
	<div class="pa5">
		<form action="#forms">
			<div class="mt2">
				<label class="Form-label" for="">Name</label>
				<input class="Input Input--default Input--m has-danger" type="text" placeholder="Name">
				<p class="Input-hint--danger">Name is invalid.</p>
			</div>
			<div class="mt2 is-success">
				<label class="Form-label" for="">Email</label>
				<input class="Input Input--default Input--m has-success" type="text" placeholder="Email">
				<p class="Input-hint--success">Email is available.</p>
			</div>
		</form>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Tags

Tags are used to filter content. Use the component class .Tag, followed by one of 3 size modifiers; Tag--l, Tag--m, Tag--s. The default Tag shape is regular, however Tags can be modified further with the class .Tag--round.

Tech
Sports & leisure
Robotics
Property
Retail
Agriculture 
<div class="border-grey">
	<div class="pa5">
		<div class="Tag Tag--s">
			<span>Tech</span>
			<button class=""><i class="material-icons md-18">close</i></button>
		</div>
		<div class="Tag Tag--s Tag--round">
			<span>Sports &amp; leisure</span>
			<button class=""><i class="material-icons md-18">close</i></button>
		</div>
		<div class="mt2">
			<div class="Tag Tag--m">
				<span>Robotics</span>
				<button class=""><i class="material-icons md-18">close</i></button>
			</div>
			<div class="Tag Tag--m Tag--round">
				<span>Property</span>
				<button class=""><i class="material-icons md-18">close</i></button>
			</div>
		</div>
		<!-- /.mt2 -->
		<div class="mt2">
			<div class="Tag Tag--l">
				<span>Retail</span>
				<button class=""><i class="material-icons md-24">close</i></button>
			</div>
			<div class="Tag Tag--l Tag--round">
				<span>Agriculture</span>
				<button class=""><i class="material-icons md-24">close</i></button>
			</div>
		</div>
		<!-- /.mt2 -->
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Labels

Labels

Use a span element (to ensure labels displays inline) with the class .Label. This will create a label with default shape. Use modifer classes to set label color, for example Label--success with create a green label.

Default Label

White Dark Default Success Info Brand Warning Danger

Round Label

In certain cases you might need the labels with a rounded radius. In this case use the modifier Label--round.

White Dark Default Success Info Brand Warning Danger 
<h3>Default Label</h3>

<div class="border-grey mt5">
	<div class="pa5">
		<span class="Label Label--white">White</span>
		<span class="Label Label--dark">Dark</span>
		<span class="Label Label--default">Default</span>
		<span class="Label Label--success">Success</span>
		<span class="Label Label--info">Info</span>
		<span class="Label Label--brand">Brand</span>
		<span class="Label Label--warning">Warning</span>
		<span class="Label Label--danger">Danger</span>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

<h3 class="mt5">Round Label</h3>
<p class="mt3">In certain cases you might need the labels with a rounded radius. In this case use the modifier <code>Label--round</code>. </p>

<div class="border-grey mt5">
	<div class="pa5">
		<span class="Label Label--round Label--white">White</span>
		<span class="Label Label--round Label--dark">Dark</span>
		<span class="Label Label--round Label--default">Default</span>
		<span class="Label Label--round Label--success">Success</span>
		<span class="Label Label--round Label--info">Info</span>
		<span class="Label Label--round Label--brand">Brand</span>
		<span class="Label Label--round Label--warning">Warning</span>
		<span class="Label Label--round Label--danger">Danger</span>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Labels With Icon

For labels with an icon replace .Label with .Label--icon. Use Label modifier classes to set label color, and shape.

Whitecheck Darkcheck Defaultcheck Successcheck Brandcheck Warningcheck Dangercheck 
<div class="border-grey mt5">
	<div class="pa5">
		<span class="Label-icon Label-icon--right Label--round Label--white">White<i class="material-icons md-18">check</i></span>
		<span class="Label-icon Label-icon--right Label--round Label--dark">Dark<i class="material-icons md-18">check</i></span>
		<span class="Label-icon Label-icon--right Label--round Label--default">Default<i class="material-icons md-18">check</i></span>
		<span class="Label-icon Label-icon--right Label--round Label--success">Success<i class="material-icons md-18">check</i></span>
		<span class="Label-icon Label-icon--right Label--round Label--brand">Brand<i class="material-icons md-18">check</i></span>
		<span class="Label-icon Label-icon--right Label--round Label--warning">Warning<i class="material-icons md-18">check</i></span>
		<span class="Label-icon Label-icon--right Label--round Label--danger">Danger<i class="material-icons md-18">check</i></span>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Labels Brand

For labels with an icon replace .Label with .Label--icon. Use Label modifier classes to set label color, and shape.

Powered by Seedtribe 
<div class="border-grey mt5">
	<div class="pa5">
		<span class="Label-icon Label-icon--brand Label--round Label--seedtribe"><i class="Icon Icon--xs Icon--seedtribe"></i>Powered by Seedtribe</span>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Marker

<div class="border-grey">
	<div class="pa5">
		<span class="Marker Marker--success mr2"></span>
		<span class="Marker Marker--info mr2"></span>
		<span class="Marker Marker--warning mr2"></span>
		<span class="Marker Marker--danger"></span>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Lists

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<div class="border-grey">
	<div class="pa5">
		<ol>
			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
			<li>Aliquam tincidunt mauris eu risus.</li>
			<li>Vestibulum auctor dapibus neque.</li>
		</ol>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<div class="border-grey">
	<div class="pa5">
		<ul>
			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
			<li>Aliquam tincidunt mauris eu risus.</li>
			<li>Vestibulum auctor dapibus neque.</li>
		</ul>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Loading

<div class="border-grey">
	<div class="pa5">
		<div class="Loading"></div>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Progress

We have 2 styles of Progress bar, ProgressBar with text (inside) used on SeedTribe. And a smaller progess bar which uses .Tooltip to display text. We use this smaller one on AIN. You will need to add the modifier classes .ProgressBar--s and .ProgressBar-success--s to set the smaller size. By default .ProgressBar will fill the parent container. When used in cards give .ProgressBar a container class of .Card-progress, this will position the progress bar correctly — at the bottom of the image.

40% Pledged
40% Complete 
<div class="border-grey">
	<div class="ma6">
		<div class="ProgressBar">
			<div class="ProgressBar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
				<span class="ProgressBar-text">40% Pledged</span>
			</div>
		</div>
		<!-- /.ProgressBar -->
		<div class="mt6">
			<div class="ProgressBar ProgressBar--s">
				<div class="ProgressBar-success ProgressBar-success--s Tooltip" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
					<span class="Tooltip-text Tooltip-text--success Tooltip-text--top">40% Complete</span>
				</div>
			</div>
			<!-- /.ProgressBar -->
		</div>
		<!-- /.mt6 -->
	</div>
</div>
<!--/.border-grey -->

Tabbed Nav

Tabbed Navigation!

<div class="border-grey">
	<div class="ma6">
		<div class="TabWrap">
			<nav class="TabNav">
				<ul class="TabNav-list" role="tablist">
					<li class="TabNav-item" role="tab" data-state="open">Overview</li>
					<li class="TabNav-item" role="tab">Details</li>
					<li class="TabNav-item" role="tab">Directory</li>
					<li class="TabNav-item" role="tab">FAQ</li>
					<li class="TabNav-item" role="tab">Resources</li>
					<li class="TabNav-item" role="tab">FAQ</li>
					<li class="TabNav-item" role="tab">Resources</li>
				</ul>
			</nav>
			<!-- /.TabNav-->
		</div>
		<!-- /.TabWrap-->
	</div>
	<!-- /.mt6 -->
</div>
<!--/.border-grey -->

Tooltips

Tooltips can be used to label actions which may not be obvious. Icon buttons which don't include text is a good example of where a tooltip is necessary. Use .Tooltip on the parent div and create a span with the class Tooltip-text inside. The Tooltip system includes several modifier classes which will help change position and color of the tooltip.

<div class="border-grey">
	<div class="pa5">
		<span class="mr2">
            <button class="Icon Icon--s Button Button--secondary Tooltip">
                <i class="material-icons md-18">thumb_up</i>
                <span class="Tooltip-text Tooltip-text--success Tooltip-text--top">I'm on top</span>
		</button>
		</span>
		<span class="mr2">
            <button class="Icon Icon--s Button Button--secondary Tooltip">
                <i class="material-icons md-18">thumb_up</i>
                <span class="Tooltip-text Tooltip-text--default Tooltip-text--bottom">I'm on the bottom</span>
		</button>
		</span>
		<span class="mr2">
            <button class="Icon Icon--s Button Button--secondary Tooltip">
                <i class="material-icons md-18">thumb_up</i>
                <span class="Tooltip-text Tooltip-text--info Tooltip-text--left">I'm on the left</span>
		</button>
		</span>
		<span class="mr2">
            <button class="Icon Icon--s Button Button--secondary Tooltip">
                  <i class="material-icons md-18">thumb_up</i>
                  <span class="Tooltip-text Tooltip-text--danger Tooltip-text--right">I'm on the right, and longer</span>
		</button>
		</span>
	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->