Code Club Style Guide

Hero Blocks

An Overview

Hero blocks sit at the top of some pages across our websites. They act as a way to introduce the content below. Hero blocks can vary from a simple block colour to an image background, they can also include buttons and download resources (for pages that contain projects).

These blocks are full width, and will always center their content. These examples are width-limited to the size of their parent element, but check the example pages to see how they should be used in the context of a full page.

For countries, a hero block can be made up from the following elements:

Example

Page Title Goes Here

<div class="o-hero">
<div class="o-hero__bg c-grid c-grid--h-center c-grid--v-center">
<div class="c-col--12">
<div class="o-hero__body">
<h1 class="o-hero__title">Page Title Goes Here</h1>
</div>
</div>
</div>
</div>

There is also an optional style for if your page title is slightly more sentence-like in structure:

Example

A nationwide network of volunteer-led after
school coding clubs for children aged 9–11

<div class="o-hero">
<div class="o-hero__bg c-grid c-grid--h-center c-grid--v-center">
<div class="c-col--12">
<div class="o-hero__body">
<h1 class="o-hero__title o-hero__title--sentence">
A nationwide network of volunteer-led after<br>
school coding clubs for children aged 9–11
</h1>
</div>
</div>
</div>
</div>

Hero With Top Navigation

Example
<div class="o-hero">
<div class="c-grid">
<div class="c-col--12">
<div class="o-hero__nav">
<div class="o-hero__nav-left">
<a href="#" class="o-hero__nav-link">This is a link</a>
<a href="#" class="o-hero__nav-link">So is this</a>
<a href="#" class="o-hero__nav-link">Here's another</a>
</div>
<div class="o-hero__nav-right">
<a href="#" class="o-hero__nav-link">Some Other Link</a>
</div>
</div>
</div>
</div>
<div class="o-hero__bg c-grid c-grid--h-center c-grid--v-center">
<div class="c-col c-col--8">
<div class="o-hero__body">
<h1 class="o-hero__title">Page Title Goes Here</h1>
</div>
</div>
</div>
</div>

Hero With Background Image

Example

Page Title Would Go Here

This hero block has a brief sentence which is great for introducing the content that will feature on the below page.

<div class="o-hero">
<div class="o-hero__bg c-grid c-grid--h-center c-grid--v-center">
<div class="c-col c-col--8">
<div class="o-hero__body">
<h1 class="o-hero__title">Page Title Would Go Here</h1>
<p class="o-hero__subtitle">This hero block has a brief sentence which is great for introducing the content that will feature on the below page.</p>
<ul class="o-hero__list">
<li class="o-hero__item"><a href="#" class="c-button c-button--hollow c-button--white">A download</a></li>
<li class="o-hero__item"><a href="#" class="c-button c-button--hollow c-button--white">A link to a PDF</a></li>
</ul>
</div>
</div>
</div>
</div>