VGR Styleguide

Cookie Consent: Light 

<div id="cookie-consent" class="vgr-cookie-consent vgr-cookie-consent--light">
    <div class="vgr-container">
        <div class="vgr-row">
            <div class="col-sm-8 middle-sm">
                <p class="vgr-cookie-consent__description">Vi använder cookies för att ge dig en bättre upplevelse av vår webbplats. <a href="/" class="vgr-cookie-consent__description-link">Läs mer om cookies</a>.</p>
            </div>
            <div class="col-sm-4 middle-sm end-sm">
                <button class="vgr-button vgr-button--">Jag förstår</button>

            </div>
        </div>
    </div>
</div>
 
<div id="{{ id }}" class="vgr-cookie-consent vgr-cookie-consent--{{ modifier }}">
  <div class="vgr-container">
    <div class="vgr-row">
      <div class="col-sm-8 middle-sm">
        <p class="vgr-cookie-consent__description">{{ description }} <a href="{{ url }}" class="vgr-cookie-consent__description-link">{{ linkText }}</a>.</p>
      </div>
      <div class="col-sm-4 middle-sm end-sm">
        {% render "@button--secondary", button %}
      </div>
    </div>
  </div>
</div>
 
{
  "id": "cookie-consent",
  "modifier": "light",
  "description": "Vi använder cookies för att ge dig en bättre upplevelse av vår webbplats.",
  "url": "/",
  "linkText": "Läs mer om cookies",
  "button": {
    "buttonText": "Jag förstår"
  }
}
  • Content: 
    .vgr-cookie-consent {

  $cookie-consent-dark-background: $color-gray-700;
  $cookie-consent-dark-color: $color-white;
  $cookie-consent-light-background: $color-gray-100;
  $cookie-consent-light-color: $color-gray-700;

  padding-top: $gutter-width;
  padding-bottom: $gutter-width;
  font-size: $small-font-size;
  font-family: $secondary-font-stack;

  &__description {
    margin-top: 0;
    margin-bottom: 0;

    @media screen and (max-width: $small) {
      margin-bottom: $gutter-width;
    }
  }

  &__description-link {
    color: inherit;
  }

  &--dark {
    background-color: $cookie-consent-dark-background;
    color: $cookie-consent-dark-color;
  }

  &--light {
    background-color: $cookie-consent-light-background;
    color: $cookie-consent-light-color;
  }

  @media print {
    display: none;
  }
}
  • URL: /components/raw/cookie-consent/_cookie-consent.scss
  • Filesystem Path: components/cookie-consent/_cookie-consent.scss
  • Size: 822 Bytes

There are no notes for this item.