User Manual

Overlay

This component is used to display information on top of the main content of the site or app. It can be considered as a modal. It can contain anything and by the use of modifiers it decides where the content on the screen is shown.

This component makes use of JavaScript to trigger opening the overlay and closing it. In order to define a trigger for opening or closing the overlay the class js-overlay-trigger must be added onto the component. Each overlay gets a unique id defined on it. Onto the component that is defined as the js-overlay-trigger you must add the attribute data-overlay-target with the id of the overlay you want it to trigger. DO NOTE that this way of functionality is only applied in the styleguide and does not have to be copied.

Bottom

Overlay content 

    
      

  

<div id="overlay-preview" class="o-overlay o-overlay--bottom">
  <div
    class="o-overlay__background  "
    
  ></div>

  <div class="o-overlay__content">
    

    <div class="o-overlay__content-container">

      Overlay content

    </div>

    
  </div>
</div>

Center

Overlay content


    
      

  

<div id="overlay-preview" class="o-overlay o-overlay--center">
  <div
    class="o-overlay__background  "
    
  ></div>

  <div class="o-overlay__content">
    

    <div class="o-overlay__content-container">

      <p>Overlay content</p>

    </div>

    
  </div>
</div>

Right

Overlay content
Overlay footer 

    
      

  

<div id="overlay-preview" class="o-overlay o-overlay--right">
  <div
    class="o-overlay__background  "
    
  ></div>

  <div class="o-overlay__content">
    

    <div class="o-overlay__content-container">

      Overlay content

    </div>

    
      <div class="o-overlay__footer-container ">

        Overlay footer

      </div>
    
  </div>
</div>

Modifiers

  • o-overlay--right

    The overlay's content slides in from the right and is displayed on the right side on the viewport. When on mobile this is changed to make use of the same behaviour as the o-overlay--bottom.

  • o-overlay--bottom

    The overlay's content slides in from the bottom and is displayed on the bottom of the viewport. When on mobile this behaviour stays the same.

  • o-overlay--center

    The overlay's content appears in the middle of the view. On mobile this behaviour is the same but will take up the entire screen.

States

  • is-open

    Use this state to indicate that the overlay is opened and is then visualised onto the main content. Based on the modifiers the contnet is animated in a certain way when opened or closed.

JavaScript

  • js-overlay

    Add class to the root element to add the JavaScript functionality to the component. This needs the js-overlay-trigger on other elements to be opened. Assign unique id as well to overlay so the triggers know which one to open.

  • js-overlay-trigger

    Add to the element that needs to open or close the overlay, add attribute data-overlay-target with the id of the overlay to trigger it.