@servicensw/fixed-cta

fixed-cta component

Usage no npm install needed!

<script type="module">
  import servicenswFixedCta from 'https://cdn.skypack.dev/@servicensw/fixed-cta';
</script>

README

@servicensw/fixed-cta

Fixed CTA component

Service NSW package documentation and examples
(Login credentials required)

Installation

npm install @servicensw/fixed-cta --save-dev

How to use

CSS

  • PostCSS workflow: @import '@servicensw/fixed-cta';
  • Sass/Eyeglass: @import 'servicensw-fixed-cta';
  • Native CSS: @import url('dist/fixed-cta.css');
  • Link tag: <link href="dist/fixed-cta.css" rel="stylesheet" type="text/css">

HTML

<div class="fixed-cta">
  <div class="container">
    <div class="fixed-cta__action">
      <a href="#" class="button button--large button--primary" aria-describedby="fixedCtaMessage">Call to action</a>
    </div>
    <div class="fixed-cta__message" id="fixedCtaMessage">
      <p>A message to accompany the call to action.</p>
    </div>
  </div>
</div>

Developer notes

Use a .has-fixed-cta class on the body element to correctly add bottom padding so element visibility is not cut off by fixed-cta in IE11.