Website Design Elements
Introduction
The Cork County Council website is based around four pillars, Visitor, Resident, Business and Council. Each pillar has its own colour that determines all web elements colour contained within that pillar. For example buttons, links and call to actions etc will take the colour of the pillar the content resides in.
When you select a particular pillar button within the header menu illustrated below the selected piller menu item remains true to its colour and the other pillar buttons go to black to show you which pillar you are in. See images below:
Unselected pillar menu state
Selected pillar menu state
If the Visitor pillar is selected all colour elements in the visitor section will be that colour green.
Website Pillars Menu Button Colours:
|
|
Visitor |
Resident |
Business |
Council |
|---|---|---|---|---|
|
HEX |
#015b53 |
#177994 |
#0F2E50 |
#D31D20 |
|
RGB |
rgb(1,91,83) |
rgb(23,121,148) |
rgb(15,46,80) |
rgb(211,29,32) |
Web design elements
This section will give examples of web design elements and their usage on corkcoco.ie.
Web elements on corkcoco.ie consist of the following elements.
- Hero Media
- Header
- Footer
- Gallery
- Video
- Image with Text
- Quote
- Call to Action Links
- File
- Related Content
- Content Accordion
- Large CTA with Image.
Header Contents
Logo: Full Logo with Text.
Fonts:
- The primary website font is Calibri
- The fallback website fonts are Helvetica, Arial, Verdana.
Website Pillars Menu Buttons: Visitor, Resident, Business and Council.
Pillar Icons: Colour #FFFFFF.
Pillar Title Text: Colour #FFFFFF, Size 16 px.
Search Icon: Bounding Box Size 45px by 40px Colour #FFFFFF, Icon Size 16px by 16px Colour #8E730C.
Website Menu: Upper menu 'News Events, Public Notices, Directory, Careers, Contact Us, English/Gaeilge, Accessibility Tools; - Font 16 px 16px, Colour #000000.
Header Background Colour: #4B5056.
Hero Media
Block Dimensions: 1342 x 754.05.
Contains Landing Page Title: Font - H1, Colour #FFFFFF.
Arrow Icon box: Size 48px x 48px, Colour matches associated pillar, arrow colour #FFFFFF.
Page background colour: #FFFFFF.
Footer
Cork County Council Logo: Colour - Full White Logo with Text, Size- 218px by 48.39px.
Your Council Logo: Colour - Full colour, size - 42px by 48px.
We Are Cork Logo: Colour - White, Size - 54px by 48px.
Menu Titles: Contact, More, Connect with Us; Font size - 18px, Font Colour - #E72326.
Menu Items: Font size - 16px, Font Colour - #FFFFFF.
Social Icons: - Size 24px by 24px, Colour - #FFFFFF.
All Rights Reserved Text Font: Size - 16px, Font Colour: #8E730C.
Header Background: Colour - #000000.
Gallery Block
Dimensions: 900px by 595px.
Background: - #FFFFFF.
Fonts:
- The primary website font is Calibri
- The fallback website fonts are Helvetica, Arial, Verdana.
Caption: - Font Size16px, Colour #FFFFFF.
Example: Youghal Clock Tower, Council Chambers and Youghal Lighthouse.
Video block
Dimensions: 900px x 595px.
Background: #FFFFFF.
Example: Explore Cork Promotion
Image with Text Block
Block Dimensions: Size 1200px by 506.5px.
Image Dimensions: Size 568px by 426px.
Fonts:
- The primary website font is Calibri
- The fallback website fonts are Helvetica, Arial, Verdana.
Heading: Size 50px, Colour Inhereted from Pillar Colour.
Body: - Size 22px, Colour #4B5056.
Play Button: Text Size 18px, Text Colour #FFFFFF.
Button Background: Colour Inhereted from Pillar Colour.
Background: Page Colour #FFFFFF.
Welcome from the Mayor of the County of Cork
It gives me great pleasure to welcome you to Cork County Council’s website. I believe that you will find its contents, links and online services to be of great interest and value.
News Article Person Quotes
Example Chief Executive Quote.
Block Dimensions: Size 804px by 572px.
Image Dimensions: Size 222px by 264px.
Fonts:
- The primary website font is Calibri
- The fallback website fonts are Helvetica, Arial, Verdana.
Quote Marks: Size 37px by 37px, Colour Inhereted from Pillar Colour.
Body Text: Size 37px, Colour #000000.
Chief Executive Name Tag: H5, Colour #FFFFFF.
Chief Executive Tag Background: Inherited from Page Background.
Name: Size 21px, Colour #000000.
Title: Size 16px, Colour #4B5056.
Location Text: Size 14px, Colour #000000.
Location Icons: Size 16px by 16px, Colour Inhereted from Pillar Colour..
Background: Inherited from Page Background.
Moira Murrell
Chief Executive
Trees are a critical part of our environment and support life in a myriad of ways, from climate change mitigation to our own well-being. I strongly encourage everyone to engage in the week, to learn more about natural heritage and perhaps find the time to plant a tree or two.
Call to Action Button
Block Dimensions: Variable.
Fonts:
The primary website font is Calibri
The fallback website fonts are Helvetica, Arial, Verdana.
Call to Action Heading: Font Size 21px, Colour #2C3643
Arrow Icon: Size 48px by 48px, Colour Inhereted from Pillar Colour.
Button Background - #F7F7F3.
File Block
File Block Title: Font Size 37px, Colour #4B5056.
Listed File Button
File Block Button Dimensions: Variable.
Fonts:
The primary website font is Calibri
The fallback website fonts are Helvetica, Arial, Verdana.
Category Title: Colour Inhereted from Pillar Colour.
File Name: Font Size 21px, Colour #2C3643
Date/Type/File Size Text: Font Size 16px, Colour #6E6D60
Document Icon: Size 32px by 32px, Colour Inhereted from Pillar Colour.
Button Background: Colour #F7F7F3
Related Content Block
Block Dimensions: Variable.
Fonts:
The primary website font is Calibri
The fallback website fonts are Helvetica, Arial, Verdana.
Related Content Block Title: Font Size 37px, Colour #000000.
Related Content Headings: Font Size Variable, Colour #000000
Related Content Headings Category Background: Colour Inhereted from Pillar Colour.
Related Content Headings Category Text: Font Size 14px, Colour #FFFFFF.
Related Content Body Background: Colour #4B5056.
Content Accordion
Block Dimensions: Variable.
Block Background: Colour #F7F7F3.
Fonts:
The primary website font is Calibri
The fallback website fonts are Helvetica, Arial, Verdana.
Block Title: Font Size 37px, Colour #4B5056.
Content Accordion Headings: Font Size 21px, Colour #000000.
Body Text: Text Size H3 to H5, and Body paragraph, Colour #4B5056.
Images: Variable.
Icons: Size 48px by 48px, Colour Inhereted from Pillar Colour.
Content Accordion Button Background: Colour #FFFFFF.
Crosshaven is a village in South County Cork near the mouth of Cork Harbour, Ireland, some 23 km south of Cork City, 18 km from Cork Airport and just 12 km from Ringaskiddy. Crosshaven is best known nationally and internationally, as a major sailing and angling centre. Crosshaven boasts a long and colourful seafaring and boat building tradition. Its history is in keeping with its picturesque setting on the Owenabue estuary within Cork Harbour. On a visit to Crosshaven you can relax at one of its many cafes or bars or take a beautiful walk to enjoy the mixture of views of land, river and sea. Here one can enjoy scenic walks, a leisurely days days fishing, good food, a choice of sports and, in the evening, relax in one of the local hosteleries and enjoy the music and they ‘craic’. Crosshaven offers an ever-increasing range of services and a wide choice of leisure and sports activities. e.g., Walking & Trekking, Cycling, Golfing, Tennis, Fishing, Sightseeing, Shopping, Music, Art & Culture, History & Heritage, dining and more. During your visit, learn about the history, architecture and folklore of Crosshaven by following the walks described in this website: walks, that take you from the tranquility of the Riverside Gardens to the heights of Camden Fort Meagher, with magnificent views of the outer and inner Harbour, to winding bays through quiet pasture and woodland.
Once the ancestral home of the Hayes family and now in private ownership. It was built in 1769 by William Hayes on a site with commanding views of Cork Harbour and is one of the finest examples of domestic Georgian architecture in Ireland. A three-storey building and a basement, with two almost identical facades of grey ashlar, the house has been a landmark in Crosshaven for over 200 years. Stories of its importance in the town’s history are recalled for such deeds as the setting up of a Soup Kitchen during the famine years. After being restored to its former glory, it is now available for private hire, including accommodation, weddings and functions. Seasonal public tours also available.
The Royal Cork Yacht Club, founded in 1720 and located at the village entrance, the oldest yacht club in the world, boasts a large sailing membership and a fleet ranging from the smallest sailing dinghies to fine ocean racing and cruising yachts. Among the local, national and international fixtures hosted by the club is Ireland’s premier yachting event ‘Cork Week’ – a biennial gala of international sailing competition and festivities. Modern Marinas and boatyards dot the shoreline, offering excellent services to the ever-growing number of watersports enthusiasts visiting Crosshaven. The Hugh Coveney pier, departure and docking point for harbour tours, is HQ to the local R.N.L.I. lifeboat and also the Home of Crosshaven Sea Angler’s Club. Enjoying the reputation of being one of the country’s leading deep-sea fishing centres, anglers from all over the world visit Crosshaven to experience the pleasures of Ireland’s rich fishing grounds.
Large Image Call to Action
Block Dimensions: Variable.
Fonts:
The primary website font is Calibri
The fallback website fonts are Helvetica, Arial, Verdana.
Category Heading Font: Size 18px, Colour #4B5056.
Large Image Call to Action Title: Font Size 36px, Colour Inhereted from Pillar Colour.
Body Text: Font Size 18px, Colour #4B5056.
Image Size: 432px by 324px
Call to Action Button: 197px by 61px, Colour Inhereted from Pillar Colour.
Button Text: Font Size 18px, Colour #FFFFFF.
Background: Inherited from page beckground.
Invest
The role of the Local Authority is to promote Cork County as an attractive location for business to locate, grow and expand, for people to invest, and for employers and employees to work and live. Cork County Council works to support business and the creation of employment, in co-operation with enterprise support agencies, entrepreneurs, community groups, and other stakeholders.