Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Cookie Privacy 

<div class="cookie-privacy">
    <div class="cookie-privacy__text">
        <p class="h3">COOKIE HINWEIS</p>
        <p>REHAU benutzt Cookies auf der Website, um unter anderem die Funktionalität für unsere Nutzer zu verbessern (wie beispielsweise bei Accounts oder gespeicherten Einstellungen). Wenn Sie mit der Nutzung dieser Seite fortfahren, stimmen Sie zu, dass wir derartige Cookies auf Ihrem Gerät einsetzen dürfen. Weitere Informationen hierzu erhalten Sie in unserer Datenschutzrichtlinie. <a href="#">Data Privacy Link</a></p>
    </div>
    <div class="cookie-privacy__buttons">
        <button class=" btn -cta -chevron-right" href="#"> Agree
        </button>
        <button class=" btn -cta -chevron-right" href="#"> Close
        </button>
    </div>
</div>
 
<div class="cookie-privacy">
  <div class="cookie-privacy__text">
    <p class="h3">{{ cookieTextHeadline }}</p>
    <p>{{ cookieText }} <a href="#">Data Privacy Link</a></p>
  </div>
  <div class="cookie-privacy__buttons">
    {{render '@atoms-button' agree merge=true}}
    {{render '@atoms-button' close merge=true}}
  </div>
</div>
 
{
  "cookieTextHeadline": "COOKIE HINWEIS",
  "cookieText": "REHAU benutzt Cookies auf der Website, um unter anderem die Funktionalität für unsere Nutzer zu verbessern (wie beispielsweise bei Accounts oder gespeicherten Einstellungen). Wenn Sie mit der Nutzung dieser Seite fortfahren, stimmen Sie zu, dass wir derartige Cookies auf Ihrem Gerät einsetzen dürfen. Weitere Informationen hierzu erhalten Sie in unserer Datenschutzrichtlinie.",
  "agree": {
    "tag": "button",
    "href": "#",
    "title": "Agree",
    "modifiers": "-cta -chevron-right"
  },
  "close": {
    "tag": "button",
    "href": "#",
    "title": "Close",
    "modifiers": "-cta -chevron-right"
  }
}
  • Content: 
    .cookie-privacy {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba($black, 0.5);
  color: $white;

  @each $breakpoint, $gutter in $grid-gutters {
    @include breakpoint($breakpoint) {
      padding: rem-calc($gutter / 2) rem-calc($gutter);
    }
  }

  @include breakpoint(large) {
    display: flex;
    flex-flow: row nowrap;
  }

  &__text {
    @include typography-level('cookie-privacy');

    a {
      font-family: inherit;
      color: inherit;
      text-decoration: underline;
    }
  }

  &__buttons {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: 2rem;

    @include breakpoint(large) {
      flex: 0 0 auto;
    }

    .btn:not(:first-child) {
      margin-left: 1rem;
    }
  }
}
  • URL: /components/raw/molecules-cookie-privacy/_cookie-privacy.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/94-cookie-privacy/_cookie-privacy.scss
  • Size: 817 Bytes
  • Handle: @molecules-cookie-privacy
  • Preview:
  • Filesystem Path: src/components/02-ui-components/02-molecules/94-cookie-privacy/cookie-privacy.hbs
  • References (1): @atoms-button

There are no notes for this item.