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'
}) %>