Lists || WBC GUI

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

Add version

to the Blender

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.

loading example…

<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(WBC)

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.

loading example…

<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(WBC)

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.

loading example…

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(WBC)

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.

loading example…

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(WBC)

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.

loading example…

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(WBC)

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.

loading example…

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(WBC)

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(WBC)

Lists

Add version

to the Blender

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.

loading example…

<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(WBC)

Link list

Use this style when the list items are clickable.

loading example…

<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(WBC)

Tick list

loading example…

<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(WBC)

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.

loading example…

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(WBC)

Link list

Use this style when the list items are clickable.

loading example…

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(WBC)

Tick list

loading example…

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(WBC)

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.

loading example…

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(WBC)

Link list

Use this style when the list items are clickable.

loading example…

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(WBC)

Tick list

loading example…

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(WBC)

List sizing

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

loading example…

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(WBC)

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.

loading example…

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(WBC)

Link list

Use this style when the list items are clickable.

loading example…

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(WBC)

Tick list

loading example…

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(WBC)

List sizing

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

loading example…

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(WBC)

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.

loading example…

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(WBC)

Link list

Use this style when the list items are clickable.

loading example…

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(WBC)

Tick list

loading example…

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(WBC)

List sizing

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

loading example…

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(WBC)

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.

loading example…

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(WBC)

Link list

Use this style when the list items are clickable.

loading example…

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(WBC)

Tick list

loading example…

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(WBC)

List sizing

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

loading example…

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(WBC)

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(WBC)

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(WBC)

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(WBC)

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(WBC)

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(WBC)

# List-Groups

List group

LESS

List group with toggle buttons

LESS

List group

What’s new since v1.0.0

LESS

List group with toggle buttons

What’s new since v1.0.0

LESS

List group

What’s new since v2.0.0

What’s new since v1.0.0

LESS

List group with toggle buttons

What’s new since v2.0.0

What’s new since v1.0.0

LESS

List group

What’s new since v2.0.1

What’s new since v2.0.0

What’s new since v1.0.0

LESS

# Lists

Bullet list

CSS

LESS

Link list

CSS

LESS

Tick list

CSS

LESS

Bullet list

What’s new since v1.0.0

CSS

LESS

Link list

What’s new since v1.0.0

CSS

LESS

Tick list

What’s new since v1.0.0

CSS

LESS

Bullet list

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

Link list

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

Tick list

What’s new since v1.0.0

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

List sizing

What’s new since v1.0.0

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

Bullet list

What’s new since v1.0.2

What’s new since v1.0.0

What’s new since v1.0.1

What’s new since v1.0.0

CSS

LESS

Link list

What’s new since v1.0.2

What’s new since v1.0.0

What’s new since v1.0.1

What’s new since v1.0.0

List-Groups

Lists