This page is used as a guide to the styles available for use on our website. Pages shouldn't start with a secondary heading and should always have at least an intro paragraph. 

Let's start with headings:

Heading two - Do We Capitalise Headings?
Te reo Māori / translation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

Bullet point list:

• lorem ipsum dolor sit amet
• consectetur adipiscing elit
• in elit enim, molestie eget suscipit et

Numbered list:

1. lorem ipsum dolor sit amet
2. consectetur adipiscing elit
3. in elit enim, molestie eget suscipit et

Heading three
Te reo Māori / translation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

Heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

Hyperlinks

Note: rel="external" for external and PDF/Document urls

Links in content

Lorem ipsum dolor sit amet, in text link. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

Stand-alone links

Find out more »

PDF Document Link - (PDF, 123 KB)

Body button link »

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

"Sed molestie, neque sed gravida ultricies, nisl est egestas nibh, vitae interdum lectus enim a sapien. - A Person"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

"Sed molestie, neque sed gravida ultricies, nisl est egestas nibh, vitae interdum lectus enim a sapien. - A Person"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

Accordion /  Dropdowns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit enim, molestie eget suscipit et, dictum eget arcu. Curabitur ipsum sem, congue ac finibus non, blandit vitae diam.

Standard:

Blue:

Special use accordions:

Candidate profiles

Jacquelyn Elkington
Standing for Mayor

Read Jacquelyn Elkington's Candidate Profile Statement

My principal place of residence is in the Whakatāne District Council area. I am also standing for Rangitāiki General Ward.

John Pullar
Standing for Mayor

Read John Pullar's Candidate Profile Statement

My principal place of residence is in the Whakatāne District Council area. I am also standing for Whakatāne-Ōhope General Ward.

Judy Turner
Standing for Mayor

Read Judy Turner's Candidate Profile Statement

My principal place of residence is in the Whakatāne District Council area.

Lesley Immink
Standing for Mayor

Read Lesley Immink's Candidate Profile Statement

My principal place of residence is in the Whakatāne District Council area. I am also standing for Whakatāne-Ōhope General Ward.

Climate change principles

1. 'We will act now.'
Ka mahi mātou ināianei

Learn more about this principle and what this means to us

Precaution
Whakatūpato

There is clear and compelling evidence for the need to act now on climate change and to adopt a precautionary approach because of the irreversible nature and scale of risks involved. Together with the global community, we must eliminate the possibility of planetary warming beyond two degrees from pre-industrial levels.

Always pays to have a paragraph underneath accordions - e.g. get in touch with us if you have any questions.

Tables

Note: table.full-width applied - div.responsive-table handles overflow on smaller viewports

Standard table -

Blue table:

On-page notices/callouts

There are ways of creating in content notices, here are a few of the styles/options: 

.general-note with .nomargin

This is the text under a notice - could have more spacing...

Red notice / civil defence - .civil-defence-red-notice and .normagin with bold text

This is the text under a notice - could have more spacing...

Bigger text - it's bigger!

This is 'bigger text' .biggertext - generally used for links to key documents or page intro.

ends

Inline Images Inserted

Full Smart Port

Third Smartport

Quarter Smartport

Sixth Smartport

Eighth Smartport

Colourbox Full Smart Port

Colourbox Third Smartport

Colourbox Quarter Smartport

Colourbox Sixth Smartport

Colourbox Eighth Smartport

Index Buttons

/ ends