Logo

Icon fonts

Swatches

Primary Colour

#39abf3

Secondary Colour

#2c2c2c

Tertiary Colour

#c81616

Neutral Colour

#f7f7f7

Headers

The header of this page is a h1 and is 2.25em. This should be reserved for main page titles only.

This is a Header 2 linked

h2 is 1.5em should be used for section titles. They can be used as many times as needed.

This is a Header 3 linked

h3 is 1.125em and should be used for headers that fall below a h2. They can be used as many times as needed.

This is a Header 4 linked

h4 is 0.875em and should be used for any titles that fall below h3 and form titles. They can be used as many times as needed.

This is a Header 5 linked

h5 should be reserved for meta-data eg time and date of content publishing.

Paragraphs

Lead paragraph

He went out tiger hunting with his elephant and gun, in case of accidents he always took his mom, he's the all American bullet-headed Saxon mother's son, all the children sing.

Standard Paragraph

Hey, Bungalow Bill, what did you kill, Bungalow Bill, hey, Bungalow Bill, what did you kill, Bungalow Bill.

Lists

  • This is an unordered list item
  • This is another unordered list item
  • Is there anybody going to listen to my story, all about the girl who came to stay?
  1. This is an ordered list item
  2. This is another ordered list item
  3. This is a third ordered list item

Text-level semantics

Hyperlinks

Lennon's art school friend Stuart Sutcliffe, who had recently sold one of his paintings and purchased a bass guitar, joined in January 1960, and it was he who suggested changing the band's name to Beatles as a tribute to Buddy Holly and the Crickets.

Emphasis

The em element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the i element may be preferable. Example:

The White Album is one of the finest collection of songs every written.

Italicised

The i element is used for text in an alternate voice or mood, or otherwise offset from the normal prose. Examples include taxonomic designations, technical terms, idiomatic phrases from another language, the name of a ship or other spans of text whose typographic presentation is typically italicised. Example:

Released in December, Rubber Soul has been hailed by critics as a major step forward in the maturity and complexity of the band's music.

Strong importance

The strong element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the b element may be preferable. Example:

Northern Songs would be 50% owned by Dick James and his partner Charles Silver, 10% owned by Brian Epstein, 20% owned by Lennon and 20% owned by McCartney. Years later McCartney would explain that they were just too young and naive to know that this was a terrible deal.

Emboldened

The b element is used for text stylistically offset from normal prose without conveying extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typographic presentation is typically emboldened. Example:

Around '66, the Beatles favoured the distortion that was built into the Vox SS amps.

Small copy

The small element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. Example:

Copyright © Lennon McCartney.

Figures

Content that requires captions should be wrapped in figure tags. Captions are nested within and wrapped inside figcaption.

The Beatles posing with instruments in a small back yard.
The Beatles, 1963 (Terry O'Neill, Getty Images). Images are displayed at 16:9, 750x422, and not exceed 50K.
Maxwell the cat under a table.
This is a picture of Maxwell.

Blockquote

"I'm not saying that we're better or greater, or comparing us with Jesus Christ as a person or God as a thing or whatever it is. I just said what I said and it was wrong. Or it was taken wrong. And now it's all this."
John Lennon

Quotes should be contained inside the blockquote and used when quoting from an external source. The source should be contained inside a citation. The entire quote and citation should be contained inside a figure.

Video container

Videos are wrapped in a container with the class .video-container as detailed in this article.

Code

<body>
						<h1>Title</h1>
						<p>This is paragraph</p>

Code examples are contained inside a pre tag, then a code tag. Code examples should be given the class .code-block.