Bottom Sticky Bumper

This bumper sits at the bottom of the screen and has a semi-transparent background. It has special styles for a white header and .content.link-style dismiss button.

Apply the .bottom-sticky-bumper--animate-in class to have it slide in from the bottom of the screen instead of just appearing on the page.

Note: For the purpose of the style guide, the bumper is set to position: relative so that it stays in its container on the page. It is normally position: fixed. The positioning also makes it appear with slightly less padding aroudn the top and bottom.

<%= ui_component('bumpers/bottom-sticky-bumper', {
  sections: [
    { markup: '<h3 class="bottom-sticky-bumper__heading">Ready to plan a wedding that's totally you? <em>Let's do this!</em></h3>' },
    { markup: '<button class="btn btn-primary js-bottom-sticky-bumper-cta">SIGN UP</button>' },
    { markup: '<button class="content link js-bottom-sticky-bumper-dismiss">thanks, maybe later</button>' }
  custom_classes: 'bottom-sticky-bumper--animate-in'
}) %>

Ready to plan a wedding that's totally you? Let's do this!