Code Club Style Guide

Example Pages

Stacked Content Page Layout

Content pages on Code Club websites are made from following ingredients:

Layout 01
1 Header
Houses the Code Club logo & primary navigation. Navigation usage & styles
2 Hero block
Sits directly under the Header. Hero block usage & styles
3 Section nav
Optional. Sits directly under the Hero block
4 Content blocks
Used to layout and break up chunks of content. See below for usage & styles.
5 Action block
Optional. Used to feature a pages primary action
6 Footer
Present on every screen, the footer contains useful links, icon links to social media accounts & any official/copyright statements

View example stacked content page


Column Content Page layout

The column layout is useful for sections where there is more user-interaction than content, for example logged-in account pages.

Layout 02
1 Header
Same as content layout
2 Menu items
E.g. Section-specific navigation list, or information panels
3 Content
Stacked boxes of content
4 Footer
Same as content layout

View example column content page


Error Pages

On the error page only use one page block. Please also provide a brief description of the problem and what the user should do. You can find an example of 404 page here.

Please use error-page-illustration.png for illustration.

Example