Davidson Styleguide

Cookie Banner 

<div id="sliding-popup" class="sliding-popup-bottom">
    <div class="eu-cookie-compliance-banner eu-cookie-compliance-banner-info">
        <div class="popup-content info eu-cookie-compliance-content">
            <div id="popup-text" class="eu-cookie-compliance-message">
                <p>This website uses cookies to improve your experience.&nbsp;
                    <a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="b0e7d0a7-bc95-4263-a3a4-4789c9ab28dd" href="/offices-and-services/legal-services/data-privacy-statement" title="Data Privacy Statement" tabindex="-1">Data Privacy Statement</a></p>

            </div>
            <div id="popup-buttons" class="eu-cookie-compliance-buttons">
                <button type="button" class="agree-button eu-cookie-compliance-agree-button" tabindex="-1">OK</button>
            </div>
        </div>
    </div>
</div>
 
<div id="sliding-popup" class="sliding-popup-bottom">
    <div class="eu-cookie-compliance-banner eu-cookie-compliance-banner-info">
    <div class="popup-content info eu-cookie-compliance-content">
        <div id="popup-text" class="eu-cookie-compliance-message">
            <p>This website uses cookies to improve your experience.&nbsp;
<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="b0e7d0a7-bc95-4263-a3a4-4789c9ab28dd" href="/offices-and-services/legal-services/data-privacy-statement" title="Data Privacy Statement" tabindex="-1">Data Privacy Statement</a></p>

        </div>
        <div id="popup-buttons" class="eu-cookie-compliance-buttons">
            <button type="button" class="agree-button eu-cookie-compliance-agree-button" tabindex="-1">OK</button>
                    </div>
    </div>
</div>
</div>
 
/* No context defined for this component. */
  • Content: 
    #sliding-popup {
	background-color: color(gray-lightest);
	padding: rr-gridbase(1);
	width: 100%;
	.eu-cookie-compliance-banner {
		button {
			@extend .button;
			@extend .button--small;
			border-color: color(davidson-red);
			color: color(davidson-white);
			background-color: color(davidson-red);
			&:hover,
			&:active,
			&[aria-pressed=true],
			&:focus {
				color: color(davidson-red);
				background-color: transparent;
			}
			@include rr-break-directive(l) {
				margin-left: 3rem;
			}
		}
		.popup-content {
			@include rr-break-directive(l) {
				display: flex;
				max-width: 80rem;
				margin: 0 auto;
				p {
					// This is messy but necessary to keep the banner
					// as thin as possible
					font-size: 1rem;
					line-height: 1.25rem;
					padding-top: .5rem;
					margin-bottom: 0;
				}
			}
		}
	}
}
  • URL: /components/raw/cookie-banner/cookie-banner.scss
  • Filesystem Path: patterns/organisms/interactive/cookie-banner/cookie-banner.scss
  • Size: 827 Bytes
  • Handle: @cookie-banner
  • Preview:
  • Filesystem Path: patterns/organisms/interactive/cookie-banner/cookie-banner.twig

This banner is an artifact of the EU Cookie Compliance Module. The twig file is based on a configuration for the following:

  • Consent by default. Don’t provide any option to opt out.
  • Cookie policy button in popup-buttons section and styled similarly to the Agree button, as in earlier versions of this module
  • Banner text styling set to ‘Normal’
  • Buttons for ‘Cookie Policy’ and ‘More Info’ are NOT shown
  • The option to include minimal CSS, I want to style the banner in the theme CSS is checked.