@citizensadvice/cads-wrapper

Object

Usage no npm install needed!

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

README

Wrapper

npm (scoped)

Component type

  • Object

Dependencies:

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

Installation

$ npm install @citizensadvice/cads-wrapper

@import "@citizensadvice/cads-wrapper/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-wrapper@latest/build/cads.wrapper.css" />

Implementation

The c-wrap class constrains some contained elements within a 1048px boundary and centers it in the viewport. It also provides some padding either side, starting out at 16px on mobile devices and increasing to 32px on viewports over 555px.

A few examples of using the c-wrap component would be:

<header class="c-global-header">
  <div class="c-wrap">
    ...
  </div>
</header>

There is also a modifier class of c-wrap--full-width that’s to be used when you’d like to remove the max-width restrictions and should be constructed as such.

<header class="c-global-header">
  <div class="c-wrap c-wrap--full-width">
    ...
  </div>
</header>