<!-- Default -->
<div id="cookie-consent" class="vgr-cookie-consent vgr-cookie-consent--dark">
    <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>

<!-- 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>
/* Default */
{
  "id": "cookie-consent",
  "modifier": "dark",
  "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"
  }
}

/* Light */
{
  "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/components/cookie-consent/_cookie-consent.scss
  • Size: 822 Bytes

There are no notes for this item.