User Manual

Interest-overview

Contextual component that is used to display the overview of interests of multiple accounts. This makes use of the l-table layout.

Table

€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20
€ 2,20

Dhr.Bogaerts

  • BE96 5120 0240 4605
  • 01-10-2018
  • Bedr. v. interesten: € 2,20

    
      

  

<div class="o-interest-overview l-table ">

  <div class="o-interest-overview__header l-table__header u-tablet-hide">
    <div class="l-table__row">
      <div class="l-table__col l-table__col--3-12 u-desktop-hide">
        

<button class="a-sort-button ">
  <span class="a-sort-button__text">Datum afrekening</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>


      </div>

      <div class="l-table__col l-table__col--3-12">
        

<button class="a-sort-button ">
  <span class="a-sort-button__text">Bedr. v. interesten</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>


      </div>

      <div class="l-table__col l-table__col--4-12">
        

<button class="a-sort-button ">
  <span class="a-sort-button__text">Aangerek. rekening</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>


      </div>

      <div class="o-interest-overview__action l-table__col l-table__col--2-12">
        

<button class="a-sort-button ">
  <span class="a-sort-button__text">Actie</span>

  <div class="a-sort-button__icon">
    <span class="a-sort-button__icon-part a-sort-button__icon-part--asc"></span>
    <span class="a-sort-button__icon-part a-sort-button__icon-part--desc"></span>
  </div>
</button>


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

  <div class="o-interest-overview__content l-table__body">

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          

<time class="a-time " datetime="2018-10-01">01-10-2018</time>


        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">2,20</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          

<article class="m-summary ">
  

  <div class="m-summary__container">

    
      <a href="#"
        class="m-summary__link "
        
      ></a>
    

    
      

<div class="m-summary__visual">
  
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="/assets/general/img/logos/logo-nibc.png" alt="" title="" />
    </div>
  
</div>


    

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            <h4 class="m-summary__title">Dhr.Bogaerts</h4>
          </header>

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">BE96 5120 0240 4605</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-desktop-show">01-10-2018</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase u-tablet-show">Bedr. v. interesten: € 2,20</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          

<button
  class="a-button a-button--ghost a-button--theme-grey icon-download u-desktop-hide "
  
>
  <span class="a-button__text">Download</span>
</button>



          

<button
  class="a-button a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show "
  
>
  <span class="a-button__text"></span>
</button>


        </div>
      </div>

    
  </div>

</div>