This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 7308

5.3 Cookie Banner

Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.

  • The system will present the learner with a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
  • The system will allow the user to dismiss the pop up by clicking the Accept/OK button
  • The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
  • The system will track and record the users date/time when they accepted the pop up.

NOTE:
This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page. 
<div class="'fixed' b_0 r_0 l_0 grid justify-content-center bg_acc opacity_8 z_5">
    <div class="flex_row flex">
        <div class="flex_auto c_white p_3 p_4:md">
            <h1>This site uses cookies to improve your experience. </h1>
            <p>By continuing to use our site, you agree to our <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/cookie-policy" target="_blank">Cookie Policy</a>, <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/privacy-policy">Privacy Policy</a> and <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></p></div>
        <div class="flex_auto grid text_center justify_center">
            <a class="btn btn-primary self_center p-x_5 shadow_overlap-light">OK</a>
        </div>
    </div>
</div>
Copy Code