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.
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:
- lorem ipsum dolor sit amet
- consectetur adipiscing elit
- 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
PDF Document Link - (PDF, 123 KB)
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:
Accordion Title
Accordion body. 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.
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 Title
Accordion body. 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.
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.
Blue:
Accordion Title
Accordion body. 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 Title
Accordion body. 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.
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.
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ūpatoThere 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 -
| Col 1 | Col 2 |
|---|---|
| ✔ Friday, 15 July | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ Friday, 12 August | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ Wednesday, 17 August 2022 | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ 16-21 September | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ Saturday, 8 October | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ 14-19 October | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
Blue table:
| Col 1 | Col 2 |
|---|---|
| ✔ Friday, 15 July | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ Friday, 12 August | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ Wednesday, 17 August 2022 | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ 16-21 September | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ Saturday, 8 October | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
| ✔ 14-19 October | Curabitur ipsum sem, congue ac finibus non, blandit vitae diam. |
On-page notices/callouts
There are ways of creating in content notices, here are a few of the styles/options:
.general-note with .nomargin
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.
This is the text under a notice - could have more spacing...
Red notice / civil defence - .civil-defence-red-notice and .normagin with bold text
NOTE: If you have felt an earthquake that lasts longer than one minute, or shaking intense enough that standing up is difficult, don't wait for official warnings - seek higher ground or head farther inland now.
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
Third New
Third Colorbox
Third New Colorbox
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