- Taxonomic name: M-STICKY-CTA-BAR
- Extension: SUPPORTING-NAVIGATION
- Added on: v4.16.0 (06/12/19)
- Updated on: v5.10.0 (10/08/21)
Sticky CTA bar
To improve the customer experience and inform decision making based on actionable CTAs. Also includes access to product reviews as part of a sticky navigation component.
Design and usage
Structure
- Anchored supplementary in page navigation
-
Can contain up to:
- 1 primary button (Required)
- 1 secondary button (Optional)
- Review stars with aggregation link allowing users to view reviews (Optional)
- Grouped on a semi-transparent black bar
Non-JS requirements and considerations
- In exceptional cases this will appear below the in page nav as nested content on the page rather than an anchored-to-browser sticky element
Placement
- Placed the in-page navigation
- Fades in and sticks after the in-page navigation
- Fades out when the footer fills the browser window
Desktop/Tablet:
- Appears anchored to the top of the browser
- Sticky nav bar full width
- Elements within aligned from right edge of designated content area grid
Mobile:
- Anchored to the bottom of the browser
- Sticky nav bar full width
- Elements within centre aligned. Maintain 20px horizontal padding from edges of full width viewport
-
Three variants available:
- Default - Expands up or collapes down from a control
- Displays only the primary button
- Hidden completely
Examples
Interactive examples
Default showhide variant
Collapsing to a single primary button on small screens
Hidden completely on small screens
Code example
<div class="t-accent-dark m-sticky-cta-bar [ Modifier ]" data-module="m-sticky-cta-bar" data-module-load="true">
<div class="l-content-container">
<div class="m-sticky-cta-bar__content">
<span class="a-review-stars [ Modifier ]" itemscope="" itemtype="https://schema.org/AggregateRating" itemprop="aggregateRating">
<span class="u-hidden--visually">... has been awarded an overall rating of </span>
<strong class="a-review-stars__rating">
(<a href="..." aria-label=".../5 from ... customer reviews - Read the reviews"><span class="u-hidden--visually"><span itemprop="ratingValue">...</span>/<span itemprop="bestRating">5</span> from </span><span itemprop="reviewCount">...</span> reviews</a>)
</strong>
</span>
</div>
<ul class="m-sticky-cta-bar__buttons m-button-group u-margin--none">
<li class="m-button-group__item"><a class="a-button a-button--primary" href="...">Get a new quote</a></li>
<li class="m-button-group__item"><a class="a-button" href="...">Retrieve my quote</a></li>
</ul>
</div>
</div>Development and test
Notes for developers
Do not include the m-sticky-cta-bar__content div if there are no review stars being included.
Default text for the show/hide button at mobile can be changed from what has been set by the locale settings if required by adding and setting the data attribute data-label to the sticky cta bar component.
Controling the sticky CTA bar component programatically
The sticky CTA bar can be controlled programatically to open and close the show/hide variant. The following methods are available for use:
| Method | Description |
|---|---|
open() |
Open the show/hide variant if it is currently closed. |
close() |
Close the show/hide variant if it is currently open. |
For example:
document.addEventListener( 'frameworkready', function () {
FRAMEWORK.require([ 'blocks/m-sticky-cta-bar' ], function ( mStickyCtaBarModule ) {
var mStickyCtaBarEl = document.querySelector( '#ctaBarId' ),
mStickyCtaBarInstance = mStickyCtaBarModule.initInstance( mStickyCtaBarEl ); mStickyCtaBarInstance.open();
});
});Changing locale settings
Default text for the show/hide button at mobile can be changed for a particular locale.
en: {
mStickyCtaBar : { mobileText : 'Ready to get going?' },
},For more information on this, see our page on how to change locale settings within JavaScript.
Notes for testers
- When the content of the sticky cta bar will no longer fit on a single line it will automatically change to the mobile view. This is likely to happen at small tablet sizes.
- When there is no JavaScript the sticky cta bar will be displayed fully at all breakpoints below the in-page navigation.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-sticky-cta-bar |
Base sticky cta bar | Yes | div.t-accent-dark |
|
.m-sticky-cta-bar--primary-only |
Modifer hide any review stars or secondary cta, leaving only the primary cta at mobile | .m-sticky-cta-bar |
||
.m-sticky-cta-bar--hidden-mobile |
Modifer completely hide the sticky cta bar at mobile | .m-sticky-cta-bar |
||
.m-sticky-cta-bar__content |
Base styling area containing any review stars | Yes | .m-sticky-cta-bar > .l-content-container > div |
Only include this area if the review stars are to be included |
.m-sticky-cta-bar__buttons |
Base style area/list containing any buttons | Yes |
.m-sticky-cta-bar > .l-content-container > div:last-child |
Component releases
- Added on: v4.16.0 (06/12/19)
- Updated on: v5.10.0 (10/08/21)
Latest update:
- updated: The sticky CTA bar can now be controlled programatically to open and close the show/hide variant.