User Manual

Notification

Used to define an item in a list of notifications. A notifications can either be read or not and will be visually styled based on its state. It can contain a date, title and description. It can also contain an attachment which is shown through the use of an icon.

Default

Overzicht van rente en kosten

Overzicht van rente en kosten

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


    
      

  

<div class="m-notification   is-message has-attachment">
  

  <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>

        
          <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>

Read

Overzicht van rente en kosten

Overzicht van rente en kosten

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


    
      

  

<div class="m-notification  is-read is-message has-attachment">
  

  <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>

        
          <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>

Modifiers

  • m-notification__icon-visual--mobile

    When there is an attachment the icon on mobile should be changed, based on the given states, the mobile icon will be applied on this element.

States

  • is-read

    Indicate if a notifications was read or not, if this is the case then the font-weight of the title and the date changes. The color of the icon is also put to a more grey-like color.

  • is-message

    Indicate that the type of notification is a message and the correct icon will be rendered.

  • is-file

    Indicate that the type of notification is a file and the correct icon will be rendered.

  • has-attachement

    An attachment or paperclip icon will be shown on the right, if on mobile the icon that is generaged with is-message or is-file will be updated to contain an attachment or paperclip icon. This is always combined with is-message or is-file.