Get help Color blind mode Low vision mode

Cookie Content Overlay Ready

This template shows how to build a simple overlay on top of cookie required content. Prefer covering larger areas than single items or buttons for better user experience.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.


Open in new window 
<!DOCTYPE html>
<html class="duet-sticky-footer" lang="fi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>LähiTapiola</title>
  <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/3.0.51/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.45/lib/duet.min.css" integrity="sha384-UoMJnpXiN8f7fKVnTzfKfyi7LzQlApQ+WTS9O3PXlYr6CO9yzou4glfsHV747f3v" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.59/lib/tokens.custom-properties.css" integrity="sha384-AexjbYNj18dJLZR54wNVU44b/akdDc+tpbLIWhAnzjMAbwFSli2DHpSP+7NCK+Xw" crossorigin="anonymous" />
  <script type="module" src="https://cdn.duetds.com/api/components/8.7.1/lib/duet/duet.esm.js" integrity="sha384-c3hLghWHTPntUxndMlK4myD7d59stA2U0EvBp2rPb3ibtacAwh56geBpq6z7nXLn" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.7.1/lib/duet/duet.js" integrity="sha384-H7RH4Ssj/LmElXa1VCHFSIjvtCSoLXMiPXG/KQZTS9EvYujTo7tWaj0V6/GGkY16" crossorigin="anonymous"></script>
</head>
<body>
<duet-header language="fi" skip-to-id="#content" contact="Ota yhteyttä" current-href="/vakuutukset/"></duet-header>
<duet-layout center id="content">
  <div slot="main">
    <duet-heading level="h1">Hello world</duet-heading>
    <duet-paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Pellentesque ullamcorper et nisl ut laoreet. Phasellus ipsum ante, vehicula id pulvinar nec,
      commodo sit amet justo. Donec tincidunt libero tempor metus sodales, euismod tempus
      ante sollicitudin. Nam sit amet dolor sed sapien efficitur viverra.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget consequat sem,
      sit amet vestibulum lectus. Donec id molestie nulla. In maximus sed metus at ultrices.
      Sed mauris urna, fermentum pulvinar dictum sed, posuere et lorem. Sed eu pulvinar mi, at
      fringilla est. Maecenas eget tellus at lorem accumsan tincidunt. Sed semper molestie neque
      in consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
      ac turpis egestas.
    </duet-paragraph>
    <style>
      .cookie-content-overlay {
        background: rgba(0, 41, 77, 0.8);
        width: 100%;
        padding: 5rem 1rem;
        margin: 1rem 0;
        text-align: center;
        display: flex;
        justify-content: center;
      }

      .cookie-content-overlay duet-paragraph {
        max-width: 25rem;
      }

      .cookie-content-overlay duet-link::part(duet-link) {
        color: #ffffff;
      }

      .cookie-content-overlay duet-link::part(duet-link):focus {
        box-shadow: 0 0 0 1px #ffffff;
      }

      .duet-theme-turva .cookie-content-overlay {
        background: rgba(23, 28, 58, 0.8);
      }
    </style>
    <div class="cookie-content-overlay">
      <duet-paragraph color="gray-lightest" size="small">
        Content explaining user needs to click the following link to
        <duet-link color="gray-lightest" url=""> see this content lorem ipsum dolor link is underlined</duet-link>.
      </duet-paragraph>
    </div>
    <duet-paragraph>
      Duis luctus iaculis velit ac faucibus. Suspendisse venenatis nisl dictum nibh posuere,
      ut semper est mollis. Curabitur dapibus, leo nec interdum accumsan,
      lacus lectus ultrices sem, eget ultricies purus mauris sed nunc.
      Praesent luctus eros a risus scelerisque, ac pulvinar odio condimentum.
      Nullam tristique, turpis non blandit blandit, sapien nibh sodales tortor,
      non finibus justo nisl at lectus. Donec tristique, leo nec feugiat gravida,
      sapien libero hendrerit sem, et mattis felis odio ut nisi. Quisque maximus interdum
      scelerisque. Sed ornare quis urna eget aliquet. Quisque hendrerit finibus
      erat a pellentesque. Fusce non efficitur lacus, et cursus ante.
    </duet-paragraph>
  </div>
</duet-layout>
<duet-footer variation="simple"></duet-footer>
</body>
</html>

Integration

To install this template’s dependencies into your project, run:

npm install @duetds/components
npm install @duetds/css
npm install @duetds/fonts

For further guidelines, please see each package’s documentation.


Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a template, please head over to the Support page for more guidelines and help.