Code Club Style Guide

Cards

Overview

Cards are devices that link to a piece content or an action. Housed in a neat box-out is a combination of titles, imagery, summary and a direct action links.

Cards will always stretch to fill 100% of their parent container's width. The best way to arrange your cards into columns is by using the grid system provided.


Examples

Cards are largely style-agnostic, relying on standard typographical elements and component styles in order to build up the contents of each.

Basic Cards

There's nothing fancy here. This example shows cards housing standard typographic elements.

Example

Beware of:

  • The dog
  • The lion
  • The hulk

Beware of:

  • The dog
  • The lion
  • The hulk

Beware of:

  • The dog
  • The lion
  • The hulk
<div class="c-grid">
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>Beware of:</h4>
<ul class="c-list c-list--bulleted">
<li class="c-list__item c-list__item--bulleted">The dog</li>
<li class="c-list__item c-list__item--bulleted">The lion</li>
<li class="c-list__item c-list__item--bulleted">The hulk</li>
</ul>
</div>
</div>
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>Beware of:</h4>
<ul class="c-list c-list--bulleted">
<li class="c-list__item c-list__item--bulleted">The dog</li>
<li class="c-list__item c-list__item--bulleted">The lion</li>
<li class="c-list__item c-list__item--bulleted">The hulk</li>
</ul>
</div>
</div>
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>Beware of:</h4>
<ul class="c-list c-list--bulleted">
<li class="c-list__item c-list__item--bulleted">The dog</li>
<li class="c-list__item c-list__item--bulleted">The lion</li>
<li class="c-list__item c-list__item--bulleted">The hulk</li>
</ul>
</div>
</div>
</div>

Optional Footers

Useful for search results where a secondary action is possible, or to convey meta information if a card's body can be omitted.

Example

Ada Lovelace

0.4 miles away

Contact Volunteer

Ada Lovelace

0.4 miles away

Contact Volunteer

Ada Lovelace

0.4 miles away

Contact Volunteer
<div class="c-grid">
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>Ada Lovelace</h4>
<p class="c-meta">0.4 miles away</p>
<a href="#" class="c-button c-button--hollow c-button--green">Contact Volunteer</a>
</div>
<div class="c-card__footer">
<a class="c-card__link" href="#">Add volunteer to club</a>
</div>
</div>
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>Ada Lovelace</h4>
<p class="c-meta">0.4 miles away</p>
<a href="#" class="c-button c-button--hollow c-button--green">Contact Volunteer</a>
</div>
<div class="c-card__footer">
<a class="c-card__link" href="#">Add volunteer to club</a>
</div>
</div>
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>Ada Lovelace</h4>
<p class="c-meta">0.4 miles away</p>
<a href="#" class="c-button c-button--hollow c-button--green">Contact Volunteer</a>
</div>
<div class="c-card__footer">
<a class="c-card__link" href="#">Add volunteer to club</a>
</div>
</div>
</div>
Example

St Mary's Catholic Primary School

0.4 miles away

St Mary's Catholic Primary School

0.4 miles away

St Mary's Catholic Primary School

0.4 miles away

<div class="c-grid">
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>St Mary's Catholic Primary School</h4>
<p class="c-meta">0.4 miles away</p>
</div>
<div class="c-card__footer">
<a class="c-card__link" href="#">Contact Club Host</a>
</div>
</div>
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>St Mary's Catholic Primary School</h4>
<p class="c-meta">0.4 miles away</p>
</div>
<div class="c-card__footer">
<a class="c-card__link" href="#">Contact Club Host</a>
</div>
</div>
<div class="c-card c-col c-col--4">
<div class="c-card__body">
<h4>St Mary's Catholic Primary School</h4>
<p class="c-meta">0.4 miles away</p>
</div>
<div class="c-card__footer">
<a class="c-card__link" href="#">Contact Club Host</a>
</div>
</div>
</div>

Course Cards

This style of card should be used to linking to resources or similar materials. They are one clickable element, with an optional background image and color scheme.

There are three primary styles for the Scratch, HTML/CSS and Python courses, and one more generic style for any other projects.

Example
Scratch Scratch
Webdev HTML & CSS
Python Python
<div class="c-grid">
<div class="c-card c-card__course c-card__course--scratch c-col c-col--4">
<a class="c-card__course-link" href="#">
<img class="c-card__image" src="/assets/code-club/images/project-cards/scratch.svg" alt="Scratch" />
<span class="c-card__course-title">Scratch</span>
</a>
<div class="c-card__footer">32 projects</div>
</div>
<div class="c-card c-card__course c-card__course--webdev c-col c-col--4">
<a class="c-card__course-link" href="#">
<img class="c-card__image" src="/assets/code-club/images/project-cards/webdev.svg" alt="Webdev" />
<span class="c-card__course-title">HTML & CSS</span>
</a>
<div class="c-card__footer">16 projects</div>
</div>
<div class="c-card c-card__course c-card__course--python c-col c-col--4">
<a class="c-card__course-link" href="#">
<img class="c-card__image" src="/assets/code-club/images/project-cards/python.svg" alt="Python" />
<span class="c-card__course-title">Python</span>
</a>
<div class="c-card__footer">24 projects</div>
</div>
</div>

Generic Course Cards

The following are examples only. The following logos are not included in the downloadable styles.

Example
Course twsu
Course microbit
Course code kingdoms
<div class="c-grid">
<div class="c-card c-card__course c-col c-col--4">
<a href="#"><img class="c-card__image" src="/assets/images/course-twsu.png" alt="Course twsu" /></a>
<div class="c-card__footer">4 projects</div>
</div>
<div class="c-card c-card__course c-col c-col--4">
<a href="#"><img class="c-card__image" src="/assets/images/course-microbit.png" alt="Course microbit" /></a>
<div class="c-card__footer">4 projects</div>
</div>
<div class="c-card c-card__course c-col c-col--4">
<a href="#"><img class="c-card__image" src="/assets/images/course-code-kingdoms.png" alt="Course code kingdoms" /></a>
<div class="c-card__footer">4 projects</div>
</div>
</div>

Project Cards

The following cards are for linking to individual projects within your courses. The biggest difference is that they contain a banner image, but other than that they're assembled in much the same way as basic cards, with the content being comprised of generic typographical elements where possible.

The images used here are for the purposes of this example. They will not be included in the downloadable assets.

Example
Project 123
Project 1
Teaching Turtles

Learn more about drawing with the turtle.

Start
Project turtle
Project 2
Turtles

Learn how to use a turtle to draw awesome shapes and patterns.

Start
Project maze
Project 3
RPG

Design and code your own RPG maze game.

Start
<div class="c-grid">
<div class="c-card c-col c-col--4">
<img class="c-card__image" src="/assets/images/project_123.png" alt="Project 123" />
<div class="c-card__body">
<div class="c-meta">Project 1</div>
<div class="u-h3">Teaching Turtles</div>
<p>Learn more about drawing with the turtle.</p>
<a class="c-button c-button--green c-button--hollow" href="#">Start</a>
</div>
</div>
<div class="c-card c-col c-col--4">
<img class="c-card__image" src="/assets/images/project_turtle.png" alt="Project turtle" />
<div class="c-card__body">
<div class="c-meta">Project 2</div>
<div class="u-h3">Turtles</div>
<p>Learn how to use a turtle to draw awesome shapes and patterns.</p>
<a class="c-button c-button--green c-button--hollow" href="#">Start</a>
</div>
</div>
<div class="c-card c-col c-col--4">
<img class="c-card__image" src="/assets/images/project_maze.png" alt="Project maze" />
<div class="c-card__body">
<div class="c-meta">Project 3</div>
<div class="u-h3">RPG</div>
<p>Design and code your own RPG maze game.</p>
<a class="c-button c-button--green c-button--hollow" href="#">Start</a>
</div>
</div>
</div>