User Manual

Notifications

A large component that lists up the different notications underneath each other by month and year. This makes use of the notification component defined as a molecule.

On desktop the entire table can be shown where there are lists by month. On mobile, this visualisation changes to only display the lists by year.

There are some variants where this is not the case and only a list of these notifications is shown.

Default

On desktop, the notifications are ordered by month and on mobile they are ordered by year. The DOM does not change, only the elements we do no need get hidden.

2018

december 2018

  • Belastingcertificaat

2019

januari 2019

  • Overzicht van rente en kosten

  • Wat veranderd er voor uw producten?

    Nullam id dolor id nibh ultricies verhicula ut id elit...

  • Nieuw jaar promotie!


    
      



<div class="o-notifications ">

  
    <section class="o-notifications__year">
      <header class="o-notifications__header u-tablet-show">
        <h4 class="o-notifications__year-text">2018</h4>
      </header>

      

        <article class="o-notifications__month">
          <header class="o-notifications__header u-tablet-hide">
            <h4 class="o-notifications__title">
              <span class="o-notifications__month-text">december</span>
              <span class="o-notifications__year-text">2018</span>
            </h4>
          </header>

          <ul class="o-notifications__list">
            

              <li class="o-notifications__item">
                

<div class="m-notification  is-read is-file ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-15">15-12-2129</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Belastingcertificaat</p>

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

  

</div>


              </li>

            
          </ul>
        </article>

      

    </section>
  
    <section class="o-notifications__year">
      <header class="o-notifications__header u-tablet-show">
        <h4 class="o-notifications__year-text">2019</h4>
      </header>

      

        <article class="o-notifications__month">
          <header class="o-notifications__header u-tablet-hide">
            <h4 class="o-notifications__title">
              <span class="o-notifications__month-text">januari</span>
              <span class="o-notifications__year-text">2019</span>
            </h4>
          </header>

          <ul class="o-notifications__list">
            

              <li class="o-notifications__item">
                

<div class="m-notification   is-file ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-15">15-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Overzicht van rente en kosten</p>

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

  

</div>


              </li>

            

              <li class="o-notifications__item">
                

<div class="m-notification   is-message has-attachment">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-10">10-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Wat veranderd er voor uw producten?</p>

        
          <p class="m-notification__description u-tablet-hide">Nullam id dolor id nibh ultricies verhicula ut id elit...</p>
        
      </div>
    </div>
  </div>

  
    <span class="m-notification__attachment u-tablet-hide"></span>
  

</div>


              </li>

            

              <li class="o-notifications__item">
                

<div class="m-notification  is-read is-message ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-05">05-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Nieuw jaar promotie!</p>

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

  

</div>


              </li>

            
          </ul>
        </article>

      

    </section>
  

</div>

List

This is a different way of displaying the notifications within the markup. Only displaying a list of items, instead of ordering them by month or year.

  • Overzicht van rente en kosten

  • Wat veranderd er voor uw producten?

    Nullam id dolor id nibh ultricies verhicula ut id elit...

  • Nieuw jaar promotie!

  • Belastingcertificaat


    
      



<div class="o-notifications o-notifications--simulate-list">
  <ul class="o-notifications__list">

    

      <li class="o-notifications__item">
        

<div class="m-notification   is-file ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-15">15-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Overzicht van rente en kosten</p>

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

  

</div>


      </li>

    

      <li class="o-notifications__item">
        

<div class="m-notification   is-message has-attachment">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-10">10-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Wat veranderd er voor uw producten?</p>

        
          <p class="m-notification__description u-tablet-hide">Nullam id dolor id nibh ultricies verhicula ut id elit...</p>
        
      </div>
    </div>
  </div>

  
    <span class="m-notification__attachment u-tablet-hide"></span>
  

</div>


      </li>

    

      <li class="o-notifications__item">
        

<div class="m-notification  is-read is-message ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-05">05-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Nieuw jaar promotie!</p>

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

  

</div>


      </li>

    

      <li class="o-notifications__item">
        

<div class="m-notification  is-read is-file ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-15">15-12-2129</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Belastingcertificaat</p>

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

  

</div>


      </li>

    

  </ul>
</div>

Simulate list

When the DOM cannot be changed, there is a way to simulate a list. Use the modifier o-notifications--simulate-list to hide all the elements that would order the notifications visually and visually create a list, but retaining the same DOM structure as the default.

2018

december 2018

  • Belastingcertificaat

2019

januari 2019

  • Overzicht van rente en kosten

  • Wat veranderd er voor uw producten?

    Nullam id dolor id nibh ultricies verhicula ut id elit...

  • Nieuw jaar promotie!


    
      



<div class="o-notifications o-notifications--simulate-list">

  
    <section class="o-notifications__year">
      <header class="o-notifications__header u-tablet-show">
        <h4 class="o-notifications__year-text">2018</h4>
      </header>

      

        <article class="o-notifications__month">
          <header class="o-notifications__header u-tablet-hide">
            <h4 class="o-notifications__title">
              <span class="o-notifications__month-text">december</span>
              <span class="o-notifications__year-text">2018</span>
            </h4>
          </header>

          <ul class="o-notifications__list">
            

              <li class="o-notifications__item">
                

<div class="m-notification  is-read is-file ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-15">15-12-2129</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Belastingcertificaat</p>

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

  

</div>


              </li>

            
          </ul>
        </article>

      

    </section>
  
    <section class="o-notifications__year">
      <header class="o-notifications__header u-tablet-show">
        <h4 class="o-notifications__year-text">2019</h4>
      </header>

      

        <article class="o-notifications__month">
          <header class="o-notifications__header u-tablet-hide">
            <h4 class="o-notifications__title">
              <span class="o-notifications__month-text">januari</span>
              <span class="o-notifications__year-text">2019</span>
            </h4>
          </header>

          <ul class="o-notifications__list">
            

              <li class="o-notifications__item">
                

<div class="m-notification   is-file ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-15">15-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Overzicht van rente en kosten</p>

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

  

</div>


              </li>

            

              <li class="o-notifications__item">
                

<div class="m-notification   is-message has-attachment">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-10">10-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Wat veranderd er voor uw producten?</p>

        
          <p class="m-notification__description u-tablet-hide">Nullam id dolor id nibh ultricies verhicula ut id elit...</p>
        
      </div>
    </div>
  </div>

  
    <span class="m-notification__attachment u-tablet-hide"></span>
  

</div>


              </li>

            

              <li class="o-notifications__item">
                

<div class="m-notification  is-read is-message ">
  
    <a
      href=""
      class="m-notification__link "
      
    ></a>
  

  <div class="m-notification__content">
    
      <div class="m-notification__icon">
        <span class="m-notification__icon-visual u-tablet-hide"></span>
        <span class="m-notification__icon-visual m-notification__icon-visual--mobile u-tablet-show"></span>
      </div>
    

    <div class="m-notification__info-container">
      <div class="m-notification__date">
        <time datetime="2019-01-05">05-01-2019</time>
      </div>

      <div class="m-notification__info">
        <p class="m-notification__title">Nieuw jaar promotie!</p>

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

  

</div>


              </li>

            
          </ul>
        </article>

      

    </section>
  

</div>

Modifiers

  • o-notifications--simulate-list

    Retain the DOM structure where everything is ordered by year and by month, but hide the elements we don't need to visually create a list of notifications.