@citizensadvice/cads-global-header

Component

Usage no npm install needed!

<script type="module">
  import citizensadviceCadsGlobalHeader from 'https://cdn.skypack.dev/@citizensadvice/cads-global-header';
</script>

README

Global header

npm (scoped)

Component type

  • Component

Dependencies:

Name Description
@citizensadvice/cads-support System-wide global variables and functions

Installation

$ npm install @citizensadvice/cads-global-header

@import "@citizensadvice/cads-global-header/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-global-header@latest/build/cads.global-header.css" />

Implementation

Headers help users understand what website they are visiting. They appear at the top of a page, above the main section area and have a default margin bottom of 80px. This can be removed by adding the modifier class c-global-header--flat where necessary.

<header class="c-global-header">
  <div class="c-wrap">
    <h1 class="c-global-header__product-title">
      <img
        src="[url_to_images]/citizens_advice_logo.svg"
        alt="Citizens Advice logo"
      />
    </h1>
  </div>
</header>