Connected By Water CSS Style Guide

A simple guide to editing content within the CBW Website

Colours

  • #2B6EE3
  • .text-primary
  • .bg-primary
  • #063365
  • .text-secondary
  • .bg-secondary
  • #40D669
  • .text-third
  • .bg-third
  • #F8FBFF
  • .text-fourth
  • .bg-fourth

Examples

<h3 class="text-primary">This is a heading the primary colour</h3>
<h2 class="text-secondary">This is a bigger heading the secondary colour</h2>

Typography

Connected by Water is working across South Yorkshire to increase resilience to flooding and the changing climate.

  • H1
  • Used for all main headlines at the start of a section

Connected by Water is working across South Yorkshire to increase resilience to flooding and the changing climate.

  • H2
  • Used for sub-headings

Connected by Water is working across South Yorkshire to increase resilience to flooding and the changing climate.

  • H3
  • Used for 'Did you know'

Connected by Water is working across South Yorkshire to increase resilience to flooding and the changing climate.

  • H4
  • Used as a sub-heading underneath the main headline

Examples

<h1>This is a main h1 heading size</h1>
<h2>This is the h2 heading size</h2>
<h3>This is the h3 heading size</h3>
<h4>This is the h4 heading size</h4>

Text Colours

Use for when wanting to add a specific colour to some text on a page.

Examples

<h1 class="text-primary">This is a main heading in the primary colour</h1>
<h2 class="text-secondary">This is a main heading in the secondary colour</h2>
<h3 class="text-third">This is a main heading in the Tertiary colour</h3>
<h4 class="text-fourth">This is a main heading in the Fourth colour</h4>

Spacing

If you want to create some spacing in the text you can add the following class from .mt-1 to .mt-20
Add .mt-1 to create spacing at the top of the element
Add .mb-1 to create spacing at the bottom of the element.

Examples

<h1 class="text-primary mt-1">This is a main heading in the primary colour</h1>
This example will have a margin-top of 1rem. 
<h2 class="text-secondary mt-2 mb-2">This is a main heading in the secondary colour</h2>
This example will have a margin-top of 2rem and margin-bottom of 2rem. 
<h3 class="text-third mt-3 mb-1">This is a main heading in the Tertiary colour</h3>
This example will have a margin-top of 3rem and margin-bottom of 1rem. 
<h4 class="text-fourth mt-5 mb-3">This is a main heading in the Fourth colour</h4>
This example will have a margin-top of 5rem and margin-bottom of 3rem.

Buttons

Primary Button Secondary Button Tertiary Button Fourth Button

Examples

<a class="btn btn-primary">Primary Button</a>
<a class="btn btn-secondary">Secondary Button</a>
<a class="btn btn-third">Tertiary Button</a>
<a class="btn btn-fourth">Fourth Button</a>
Note. The same as text styles you can also add spacing around
the buttons by adding .mt-1 or .mb-1

Images

When adding an image to the page its important to adjust the relative width & height to 100% auto to make it fully responsive.
Map of South Yorkshire

Example

<img width="100%" height="auto" src="https://connectedbywater.co.uk/wp-content/uploads/2024/08/image.jpg" alt="Map of South Yorkshire">

Youtube iFrame

When adding a youtube embed always add the class .youtube-video to ensure it formats in the correct ratio

Example

<iframe class="youtube-video" src="https://www.youtube.com/embed/GQbw2IrlBxo" title="Flood risk in South Yorkshire" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>