fixed-cta component

Usage no npm install needed!

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



Fixed CTA component

Service NSW package documentation and examples
(Login credentials required)


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

How to use


  • 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">


<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 class="fixed-cta__message" id="fixedCtaMessage">
      <p>A message to accompany the call to action.</p>

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.