Header template
Third party applications and systems should use a consistent Cardiff.gov branded banner and page layout where possible.
The aim is to provide as consistent experience for the customer as possible.
How to use this component
We have provided boilerplate html code that you can use to skin your application.
You can find the html, css and Javascript below.
We have hosted a css file that contains our cardiff.gov styling.
Icons rely on FontAwesome, you will need to ensure this is hosted on your system and referenced in the template with the following font types:
- Regular
- Solid
- Brands
Code Resource
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<!-- Link to Cardiff.gov stylesheet. Uncomment below to use -->
<!-- <link rel="stylesheet" href="https://www.cardiff.gov.uk/Style%20Library/CSS/cardiff.css"> -->
</head>
<header class="nu_header_holder">
<div class="customToplinks noindex">
<a href="#" id="language_link" title="Switch to Welsh">Cymraeg</a>
</div>
<div class="nu_logo"> <a href="https://design.cardiffcouncilwebteam.co.uk" accesskey="1"> <img src="
https://www.cardiff.gov.uk/Style%20Library/images/CardiffCouncil.svg " alt="Return to Cardiff.gov" title="Home"> </a> </div>
<div class="nu_homepage_tagline">
<h2 class="nu_tagline">
<span class="nu_tagline_static">Cardiff Council</span>
<span class="nu_tagline_dynamic">Content and design system</span></h2>
<p class="nu_tagline_small">www.cardiff.gov.uk</p>
</div>
<button id="trigger" class="menu-trigger new_hamburger" alt="Open navigation menu" title="Open the navigation menu"></button>
</header>
<nav class="nu_menu" id="main_menu">
<ul>
<li><a href="https://www.cardiff.gov.uk/ENG/Home/Pages/default.aspx" class="menu_back">Back to Cardiff.gov</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</nav>
<main>
<div class="align">
<h1>Page title</h1>
<p>Content is centered with a max-width of 1500px.</p>
<p>Please note for the icons to work you must <a href="https://fontawesome.com/start" target="_blank">create a font awesome kit</a> and include the file in the header.</p>
</div>
</main>
<link rel="stylesheet" href="https://www.cardiff.gov.uk/Style%20Library/CSS/cardiff.css"> <script>
window.addEventListener('load', function () {
var x = document.getElementById("main_menu");
let menu_button = document.getElementById('trigger');
// detect if mobile
var w = window.innerWidth;
if(w < 600){
x.style.display = "none";
}
menu_button.onclick = function(e){
e.preventDefault();
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
});
</script>Working Example
<!-- -->
Cardiff Council Content and design system
www.cardiff.gov.uk
Page title
Content is centered with a max-width of 1500px.
Please note for the icons to work you must create a font awesome kit and include the file in the header.