Code Club Style Guide

Club List

Use this module when you want to show a user a list of clubs that they are involved with, either as a host or a volunteer.

Example
  • Knavesmire Primary School Trafalgar Street, York, York, Yorkshire and Humber, YO23 1HY
    Active View Club
  • Knavesmire Primary School Trafalgar Street, York, York, Yorkshire and Humber, YO23 1HY
    Active View Club
  • Knavesmire Primary School Trafalgar Street, York, York, Yorkshire and Humber, YO23 1HY
    Active View Club
<ul class="o-club-list">
<li class="o-club-list__item">
<div class="o-club-list__title">
Knavesmire Primary School
<span class="o-club-list__meta c-meta">Trafalgar Street, York, York, Yorkshire and Humber, YO23 1HY</span>
</div>
<span class="o-club-list__badge c-badge c-badge--green">Active</span>
<a href="#" class="o-club-list__button c-button c-button--hollow c-button--green">View Club</a>
</li>
<li class="o-club-list__item">
<div class="o-club-list__title">
Knavesmire Primary School
<span class="o-club-list__meta c-meta">Trafalgar Street, York, York, Yorkshire and Humber, YO23 1HY</span>
</div>
<span class="o-club-list__badge c-badge c-badge--green">Active</span>
<a href="#" class="o-club-list__button c-button c-button--hollow c-button--green">View Club</a>
</li>
<li class="o-club-list__item">
<div class="o-club-list__title">
Knavesmire Primary School
<span class="o-club-list__meta c-meta">Trafalgar Street, York, York, Yorkshire and Humber, YO23 1HY</span>
</div>
<span class="o-club-list__badge c-badge c-badge--green">Active</span>
<a href="#" class="o-club-list__button c-button c-button--hollow c-button--green">View Club</a>
</li>
</ul>