People love lists. Lists are legible, intuitive and simple. These styled lists provide a system of contextual options for various types of content.

List-Groups

1.0.0

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. This can also be a list of links if required.

The badges in this example are not included and will have to be added to the blend separately.

<ul class="list-group">
	<li>
		<a class="list-group-item" href="http://YOUR-URL.com.au">
			<span class="list-group-text">YOUR ITEM TEXT</span>

			<span class="list-group-element">
				YOUR ITEM ADDON
			</span>
		</a>
	</li>
	<li>
		<a class="list-group-item" href="http://YOUR-URL.com.au">
			<span class="list-group-text">YOUR ITEM TEXT</span>

			<span class="list-group-element">
				YOUR ITEM ADDON
			</span>
		</a>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)

List group with toggle buttons

Other UI elements can be added. Ideal for settings pages or preferences.

The toggle buttons in this example are not included and will have to be added to the blend separately.

<ul class="list-group">
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Send me sms reminders</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Give me free money</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)
2.0.0

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. This can also be a list of links if required.

The badges in this example are not included and will have to be added to the blend separately.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<ul class="list-group">
	<li>
		<a class="list-group-item" href="http://YOUR-URL.com.au">
			<span class="list-group-text">YOUR ITEM TEXT</span>

			<span class="list-group-element">
				YOUR ITEM ADDON
			</span>
		</a>
	</li>
	<li>
		<a class="list-group-item" href="http://YOUR-URL.com.au">
			<span class="list-group-text">YOUR ITEM TEXT</span>

			<span class="list-group-element">
				YOUR ITEM ADDON
			</span>
		</a>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)

List group with toggle buttons

Other UI elements can be added. Ideal for settings pages or preferences.

The toggle buttons in this example are not included and will have to be added to the blend separately.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<ul class="list-group">
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Send me sms reminders</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Give me free money</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)
2.0.1

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. This can also be a list of links if required.

The badges in this example are not included and will have to be added to the blend separately.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<ul class="list-group">
	<li>
		<a class="list-group-item" href="http://YOUR-URL.com.au">
			<span class="list-group-text">YOUR ITEM TEXT</span>

			<span class="list-group-element">
				YOUR ITEM ADDON
			</span>
		</a>
	</li>
	<li>
		<a class="list-group-item" href="http://YOUR-URL.com.au">
			<span class="list-group-text">YOUR ITEM TEXT</span>

			<span class="list-group-element">
				YOUR ITEM ADDON
			</span>
		</a>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)

List group with toggle buttons

Other UI elements can be added. Ideal for settings pages or preferences.

The toggle buttons in this example are not included and will have to be added to the blend separately.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<ul class="list-group">
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Send me sms reminders</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Give me free money</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)
3.0.0

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. Ideal for settings pages or preferences.

The toggle buttons in this example are not included and will have to be added to the blend separately.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • We removed the list-group links as it wasn’t accessible and never used.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<ul class="list-group">
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Send me sms reminders</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options1">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
	<li>
		<span class="list-group-item">
			<span class="list-group-text">Give me free money</span>

			<span class="list-group-element">
				<span class="btn-group">

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">Yes</span>
					</label>

					<label class="btn-group-item">
						<input class="btn-group-input" type="radio" name="options2">
						<span class="btn-group-text btn btn-hero btn-sm">No</span>
					</label>

				</span>
			</span>
		</span>
	</li>
</ul>

LESS

The main mixin is called: _list-groups(BSA)

Lists

1.0.0

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)
1.0.1

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)
1.0.2

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-lg">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-lg

LESS

The main mixin is called: _lists(BSA)
2.0.0

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-lg">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-lg

LESS

The main mixin is called: _lists(BSA)
2.0.1

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-lg">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-lg

LESS

The main mixin is called: _lists(BSA)
2.0.2

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-lg">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-lg

LESS

The main mixin is called: _lists(BSA)
2.0.3

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-primary
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

Icon lists

You can use any GUI icon in a list if the provided options are not sufficient.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-icon">
	<li>
		<span class="icon icon-padlock" data-grunticon-embed></span>
		YOUR LIST ITEM
	</li>
	<li>
		<span class="icon icon-padlock" data-grunticon-embed></span>
		YOUR LIST ITEM
	</li>
	<li>
		<span class="icon icon-padlock" data-grunticon-embed></span>
		YOUR LIST ITEM
	</li>
</ul>

CSS

Modifier classes:
  • lists-icon

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-lg">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-lg

LESS

The main mixin is called: _lists(BSA)
2.0.4

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-primary
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
	<li><a href="http://YOUR-URL.com.au">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

Icon lists

You can use any GUI icon in a list if the provided options are not sufficient.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-icon">
	<li>
		<span class="icon icon-padlock" data-grunticon-embed></span>
		YOUR LIST ITEM
	</li>
	<li>
		<span class="icon icon-padlock" data-grunticon-embed></span>
		YOUR LIST ITEM
	</li>
	<li>
		<span class="icon icon-padlock" data-grunticon-embed></span>
		YOUR LIST ITEM
	</li>
</ul>

CSS

Modifier classes:
  • lists-icon

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-lg">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-lg

LESS

The main mixin is called: _lists(BSA)
3.0.0

Bullet list

Add these custom symbols to style basic lists. Adding the required modifier classes to each list item allows more flexibility without the need to create specific classes for every scenario.

What’s new since v2.0.3

This version changed: SVG CSS/LESS HTML, but not: JS
  • Changed the lists sizing class to our new naming convention (#380)
  • Updated the lists-tick and lists-linklist icons (to that of Icons v2.0.0) (#345)
  • Bullet, tick and caret icons/graphics now all centred within consistent 16×16px canvas
  • Increased left text padding and lists-icon icon size
  • Reduced CSS specificity (#346)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists [lists-{primary|hero|neutral}]">
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
	<li>Styled bullet list - primary</li>
</ul>

CSS

Modifier classes:
  • lists-primary
  • lists-hero
  • lists-neutral

LESS

The main mixin is called: _lists(BSA)

Link list

Use this style when the list items are clickable.

What’s new since v2.0.3

This version changed: SVG CSS/LESS HTML, but not: JS
  • Changed the lists sizing class to our new naming convention (#380)
  • Updated the lists-tick and lists-linklist icons (to that of Icons v2.0.0) (#345)
  • Bullet, tick and caret icons/graphics now all centred within consistent 16×16px canvas
  • Increased left text padding and lists-icon icon size
  • Reduced CSS specificity (#346)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-linklist">
	<li><a href="{URL}">Styled link list</a></li>
	<li><a href="{URL}">Styled link list</a></li>
	<li><a href="{URL}">Styled link list</a></li>
</ul>

CSS

Modifier classes:
  • lists-linklist

LESS

The main mixin is called: _lists(BSA)

Tick list

What’s new since v2.0.3

This version changed: SVG CSS/LESS HTML, but not: JS
  • Changed the lists sizing class to our new naming convention (#380)
  • Updated the lists-tick and lists-linklist icons (to that of Icons v2.0.0) (#345)
  • Bullet, tick and caret icons/graphics now all centred within consistent 16×16px canvas
  • Increased left text padding and lists-icon icon size
  • Reduced CSS specificity (#346)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-tick">
	<li>Styled tick list</li>
	<li>Styled tick list</li>
	<li>Styled tick list</li>
</ul>

CSS

Modifier classes:
  • lists-tick

LESS

The main mixin is called: _lists(BSA)

Icon lists

You can use any GUI icon in a list if the provided options are not sufficient.

What’s new since v2.0.3

This version changed: SVG CSS/LESS HTML, but not: JS
  • Changed the lists sizing class to our new naming convention (#380)
  • Updated the lists-tick and lists-linklist icons (to that of Icons v2.0.0) (#345)
  • Bullet, tick and caret icons/graphics now all centred within consistent 16×16px canvas
  • Increased left text padding and lists-icon icon size
  • Reduced CSS specificity (#346)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-icon">
	<li>
		<span class="icon icon-{NAME}" [data-grunticon-embed]></span>
		YOUR LIST ITEM
	</li>
	<li>
		<span class="icon icon-{NAME}" [data-grunticon-embed]></span>
		YOUR LIST ITEM
	</li>
	<li>
		<span class="icon icon-{NAME}" [data-grunticon-embed]></span>
		YOUR LIST ITEM
	</li>
</ul>

CSS

Modifier classes:
  • lists-icon

LESS

The main mixin is called: _lists(BSA)

List sizing

Use a larger list when you have interactive elements. This increases the affordance on touch devices.

What’s new since v2.0.3

This version changed: SVG CSS/LESS HTML, but not: JS
  • Changed the lists sizing class to our new naming convention (#380)
  • Updated the lists-tick and lists-linklist icons (to that of Icons v2.0.0) (#345)
  • Bullet, tick and caret icons/graphics now all centred within consistent 16×16px canvas
  • Increased left text padding and lists-icon icon size
  • Reduced CSS specificity (#346)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.3

This version changed: SVG but not: CSS/LESS HTML, JS
  • Remove secondary .symbol-* prefix from linklist bullets (roll with .icon-* prefix for consistency)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • We added some diversity to lists and are proud to introduce you to icon lists. You can now use any icons and add them to your list. PDF lists, padlock lists, star lists, all now possible! (#230)
  • Sometimes you want to list something in order. That’s where the HTML tag ol (ordered list) comes in. When using this tag with the lists class you now get all the benefits of a GUI list without the bullets and the whole shebang. (#248)
  • In link lists the chevron was a little too friendly with the text. We had a long talk about personal space and now we are all cool. More space. (#268)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.2

This version changed: CSS/LESS, SVG but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • All SVGs now come with a unique title ID. That may not sound like much but SVGs are very particular about their individualism. (#204)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • The linklist is now a normal list that can be mixed link and non-link. (#181)
  • The linklist is now powered by an SVG rather than a CSS shape. This looks better on older browsers and low density displays.
  • We introduced a new class for a larger list and aligned the spacing of the default. (#183)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157
<ul class="lists lists-large">
	<li>Large list</li>
	<li>Large list</li>
	<li>Large list</li>
</ul>

CSS

Modifier classes:
  • lists-large

LESS

The main mixin is called: _lists(BSA)