Code Club Style Guide

Page Blocks

What are they?

Page blocks help to introduce some structure to your pages by breaking content into separate chunks. They are used to create the layered content you can see on the example pages.

Please note: for the purposes of illustration these block examples contain center aligned text, but that is not the default style for text in these blocks.

Example

HERO

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

Page Block Example

<header class="o-hero">
<h4 class="u-text--center">HERO</h4>
</header>
<nav class="o-nav-horiz">
<h4>NAV</h4>
</nav>
<div class="c-page-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--alt-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--alt-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--alt-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--action-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--action-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--action-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--alt-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--alt-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>
<div class="c-page-block c-page-block--action-block">
<h4 class="u-text--center">Page Block Example</h4>
</div>

Page Block Variants

Alternative Background Color

This performs exactly the same function as the regular content block, except the background is white and it has no borders. It's a little difficult to see in this example, but you can see one illustrated on the example pages.

Example

Alternative Page Block Example

Scelerisque a a sit ac tellus dignissim porta dis ac scelerisque et phasellus vel a sapien a dapibus inceptos phasellus consectetur felis. Suspendisse volutpat dui adipiscing adipiscing adipiscing ultrices tortor nostra a vehicula eros quisque euismod iaculis a urna amet a a in parturient cubilia elementum.

<div class="c-page-block c-page-block--alt-block">
<div class="c-grid c-grid--h-center">
<div class="c-col c-col--8 u-text--center">
<h4>Alternative Page Block Example</h4>
<p>
Scelerisque a a sit ac tellus dignissim porta dis ac scelerisque et phasellus vel a sapien a
dapibus inceptos phasellus consectetur felis. Suspendisse volutpat dui adipiscing adipiscing
adipiscing ultrices tortor nostra a vehicula eros quisque euismod iaculis a urna amet a a in
parturient cubilia elementum.
</p>
</div>
</div>
</div>

Page Block Variants

Action Blocks

Use the action block once per page to feature an action that a user may take, i.e. "Sign up for our newsletter" or "Register interest".

Also worth noting is the special .c-button--action-button in this block. Use that extra class for any button in an action block.

Example

Action Block Example

These are great if there's something at the bottom of the page you want the user to do, like sign up for your newsletter.

Sign up

<div class="c-page-block c-page-block--action-block">
<div class="c-grid c-grid--h-center">
<div class="c-col c-col--8 u-text--center">
<h2>Action Block Example</h2>
<p>
These are great if there's something at the bottom of the page you want the user to do,
like sign up for your newsletter.
</p>
<p class="u-text--center">
<a class="c-button c-button--action-button" href="#">Sign up</a>
</p>
</div>
</div>
</div>

Partners Block

Example

Our Partners

<div class="c-page-block u-text--center">
<h2>Our Partners</h2>
<div class="c-grid c-grid--h-center c-grid--v-center">
<div class="c-col c-col--2">
<img alt="" class="c-sponsor-logo" src="/assets/code-club/images/code-club-logo.svg">
</div>
<div class="c-col c-col--2">
<img alt="" class="c-sponsor-logo" src="/assets/code-club/images/code-club-logo.svg">
</div>
<div class="c-col c-col--2">
<img alt="" class="c-sponsor-logo" src="/assets/code-club/images/code-club-logo.svg">
</div>
</div>
</div>