Code Club Style Guide

Lists

Default list styles

If you need an unordered, ordered, or definition list for inclusion in your site's regular body copy, then use the <ul>, <ol>, or <dl> elements without any extra HTML classes.

The following list implementations are only to be used in cases where your lists require a little more presentational flair.


Plain Lists

One use for plain lists is to create a series of text links in your page footers.

Example
<ul class="c-list c-list--plain">
<li class="c-list__item c-list__item--plain"><a href="#">Red</a></li>
<li class="c-list__item c-list__item--plain"><a href="#">Blue</a></li>
<li class="c-list__item c-list__item--plain"><a href="#">Turquoise</a></li>
<li class="c-list__item c-list__item--plain"><a href="#">Teal</a></li>
</ul>

Green Bullet Lists

Example
  • Red
  • Blue
  • Turquoise
  • Teal
<ul class="c-list c-list--bulleted">
<li class="c-list__item c-list__item--bulleted">Red</li>
<li class="c-list__item c-list__item--bulleted">Blue</li>
<li class="c-list__item c-list__item--bulleted">Turquoise</li>
<li class="c-list__item c-list__item--bulleted">Teal</li>
</ul>

There is also a larger variant of this bulleted list:

Example
  • Red
  • Blue
  • Turquoise
  • Teal
<ul class="c-list c-list--bulleted c-list--large">
<li class="c-list__item c-list__item--bulleted c-list__item--large">Red</li>
<li class="c-list__item c-list__item--bulleted c-list__item--large">Blue</li>
<li class="c-list__item c-list__item--bulleted c-list__item--large">Turquoise</li>
<li class="c-list__item c-list__item--bulleted c-list__item--large">Teal</li>
</ul>

Horizontal List

Example
  • Red
  • Blue
  • Turquoise
  • Teal
<ul class="c-list c-list--horiz">
<li class="c-list__item c-list__item--horiz">Red</li>
<li class="c-list__item c-list__item--horiz">Blue</li>
<li class="c-list__item c-list__item--horiz">Turquoise</li>
<li class="c-list__item c-list__item--horiz">Teal</li>
</ul>

Horizontal Definition List

Example
Red
Lorem Ipsum Dolor Sit Amet
Blue
Lorem Ipsum Dolor Sit Amet
Turquoise
Lorem Ipsum Dolor Sit Amet
Teal
Lorem Ipsum Dolor Sit Amet
<dl class="c-def-list">
<dt class="c-def-list__term">Red</dt>
<dd class="c-def-list__definition">Lorem Ipsum Dolor Sit Amet</dd>
<dt class="c-def-list__term">Blue</dt>
<dd class="c-def-list__definition">Lorem Ipsum Dolor Sit Amet</dd>
<dt class="c-def-list__term">Turquoise</dt>
<dd class="c-def-list__definition">Lorem Ipsum Dolor Sit Amet</dd>
<dt class="c-def-list__term">Teal</dt>
<dd class="c-def-list__definition">Lorem Ipsum Dolor Sit Amet</dd>
</dl>

Image List

Example
Title one lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo, libero at semper malesuada.
Title two duis mauris libero, commodo vel venenatis at, tempor nec ligula.
Title three duis mauris libero, commodo vel venenatis at, tempor nec ligula.
<div class="c-image-list-item">
<div class="c-image-list--image-area">
<img src="/assets/code-club/images/code-club-logo.svg">
</div>
<div class="c-image-list--text-area">
<span class="c-image-list--title">Title one</span>
lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo, libero at semper malesuada.
</div>
</div>
<div class="c-image-list-item">
<div class="c-image-list--image-area">
<img src="/assets/code-club/images/code-club-logo.svg">
</div>
<div class="c-image-list--text-area">
<span class="c-image-list--title">Title two</span>
duis mauris libero, commodo vel venenatis at, tempor nec ligula.
</div>
</div>
<div class="c-image-list-item">
<div class="c-image-list--image-area">
<img src="/assets/code-club/images/code-club-logo.svg">
</div>
<div class="c-image-list--text-area">
<span class="c-image-list--title">Title three</span>
duis mauris libero, commodo vel venenatis at, tempor nec ligula.
</div>
</div>

Icon List

Each bullet has an accompanying icon, which is specified from the range included in these assets. Name it in your HTML class like this: c-list__item--icon-twitter, where "twitter" is the name of the icon. Change that word to any one of the available icons to customise your list items.

Example
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
  • List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here
<ul class="c-icon-list">
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-down"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-left"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-right"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-up"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-circle-down"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-circle-left"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-circle-right"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-circle-up"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-fill-down"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-fill-left"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-fill-right"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--arrow-fill-up"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--archive"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--calendar"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--close"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--document"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--download"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--email"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--error"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--feedback"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--help"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--info"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--info-fill"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--link"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--location"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--lock"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--note"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--plus"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--plus-circle"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--projects"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--search"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--settings"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--social-facebook"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--social-google"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--social-twitter"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--social-youtube"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--star"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--tick"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--tick-circle"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--video-play"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--volunteers"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
<li class="c-icon-list__item">
<span class="c-icon c-icon--large c-icon--warning"></span>
<span class="c-icon-list__text">List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here List Item Text Goes Here</span>
</li>
</ul>