• Home
  • /Heading Styles and Image Guide

Heading Styles and Image Guide

horizontal break

Examples:

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hyperlink within text aenean ultrices metus in est gravida tincidunt. Proin ipsum lacus, accumsan nec laoreet quis, pretium vel justo. Curabitur aliquam leo eu sem eleifend quis ullamcorper ligula rhoncus. Sed vitae aliquam magna. Net nisl iaculis malesuada placerat ligula imperdiet. Mauris molestie luctus justo, quis mattis nunc laoreet in. Aenean ultrices luctus quam euismod dapibus. Donec gravida sem quis odio sodales in pharetra ante porttitor.

Hyperlink

 

Heading 1 Style <h1></h1>

H1 – Used mainly for Page Titles.
Blackwood Rec’s H1 Headings have a styling script that automatically applies a blue colour to the first word.

 

Heading 2 Style <h2></h2>

H2 – Used for Major headings throughout page content.

 

Heading 3 Style <h3></h3>

H3 — Used for subheadings under H2

 

Heading 4 Style <h4></h4>

H4 — Used for subheadings under H3 and Document download link text.

 

Bold Paragraph Text <p><strong></strong></p>
Bold paragraph text can also be used as secondary subheadings.

 

Normal / Paragraph Text <p></p>

Example – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices metus in est gravida tincidunt. Proin ipsum lacus, accumsan nec laoreet quis, pretium vel justo. Curabitur aliquam leo eu sem eleifend quis ullamcorper ligula rhoncus. Sed vitae aliquam magna. Nullam varius quam et nisl iaculis malesuada placerat ligula imperdiet. Mauris molestie luctus justo, quis mattis nunc laoreet in. Aenean ultrices luctus quam euismod dapibus. Donec gravida sem quis odio sodales in pharetra ante porttitor. Ut enim orci, pharetra eu sodales et, tempor id enim. Nullam venenatis, nulla rutrum blandit rutrum, arcu urna placerat turpis, sit amet lacinia nunc nisl eget lacus. Nullam eget lorem commodo orci facilisis vehicula. Maecenas consequat nulla eu libero facilisis at fermentum metus tincidunt. Integer hendrerit faucibus commodo.

 

Hyperlinks <a></a>
Hyperlink text appears in blue and underlined. The styling will automatically apply when a hyperlink is assigned to the text.

Title text is the text that appears when you hover over a hyperlink, similar to a Tool Tip. This text is also used by some screen readers for the visually impaired. For this reason, it is good practice to include Title text in all hyperlinks and make it descriptive.

Avoid “Click Here”
Avoid “click here” link text. Make your hyperlink text descriptive and concise for accessibility and SEO purposes.

 

List (Visual Composer Element)

Type: Arrow  Color: Blue

  • List Item
  • List Item
  • List Item

 

Image Sizes

All images uploaded to the website should be no more than 72dpi resolution (screen resolution) and web optimised to reduce file size.
To crop, resize and save optimise images use the free online web app Autodesk Pixlr Editor – http://www.pixlr.com/editor/

1) Open image from your Computer
2) Crop using Aspect Ratio constraint setting
3) Resize via Image > Image Size (Constrain proportions – checked)
4) Then Save As Jpeg or Png

Staff Profile Picture (201 x 269px)

Staff Photo (201 x 269px)
 

Small image – 1 Column width (320 x 207px)

Small/Single Column image
 

Large image – 2 Column width (635 x 425px)

Large / 2 Column image
 

Full Width Image (980 x 370px) – Align Centre

(980 x 370)
 

Banner Image; with white footer for banner text (980 x 500px)

(980 x 500)