User Manual

Transactions

Table-like component that displays a list of transactions. Each transaction is styled so that it looks like everything is placed in columns. Each column is represented by a header consisting out of a sort-button component. Each column can be sorted in an ascended or descending way.

List

A simplified version of the transactions table. No header with sorting, just the list of transactions.

  • Dhr.Bogaerts

    • Kwartaalspaarrekening
    • 19-12-2018
    € -150,00

  • Dhr.Bogaerts

    • Kwartaalspaarrekening
    • 19-12-2018
    € -150,00

  • Dhr.Bogaerts

    • Kwartaalspaarrekening
    • 19-12-2018
    € 50,00 

    
      

  

<div class="o-transactions o-transactions--list">

  <ul class="o-transactions__list">
    <li class="o-transactions__item">
      

<article class="m-summary m-summary--small">
  

  <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">Kwartaalspaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>



      

<div class="a-budget o-transactions__budget a-budget--small is-negative">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


    </li>

    <li class="o-transactions__item">
      

<article class="m-summary m-summary--small">
  

  <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">Kwartaalspaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>



      

<div class="a-budget o-transactions__budget a-budget--small is-negative">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


    </li>

    <li class="o-transactions__item">
      

<article class="m-summary m-summary--small">
  

  <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">Kwartaalspaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>



      

<div class="a-budget o-transactions__budget a-budget--small is-positive">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">50,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


    </li>
  </ul>
</div>

Table

Standard representation of a transaction list within a table view. Contains a header to sort the items in an ascended or descending way.

This makes use of the l-table layout.

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00

Dhr.Bogaerts

  • Kwartaalspaarrekening
  • BE96 5120 0240 4605
  • 19-12-2018
€ -150,00 

    
      

  

<div class="o-transactions l-table">

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

<button class="a-sort-button ">
  <span class="a-sort-button__text">Datum</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--6-12">
        

<button class="a-sort-button ">
  <span class="a-sort-button__text">Van/naar</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-transactions__budget l-table__col l-table__col--3-12">
        

<button class="a-sort-button ">
  <span class="a-sort-button__text">Bedrag</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-transactions__content l-table__body">

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    

      <div class="o-transactions__item l-table__row">
        <div class="o-transactions__date l-table__col l-table__col--3-12 u-tablet-hide">
          

<time class="a-time " datetime="2018-12-19">19-12-2018</time>


        </div>

        <div class="o-transactions__summary l-table__col l-table__col--6-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">Kwartaalspaarrekening</li>

            

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

            

              <li class="m-summary__info-item u-tablet-show">19-12-2018</li>

            
          </ul>
        </div>

        
      </div>

      
    </div>

  </div>
</article>


        </div>

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

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">-150,00</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        </div>
      </div>

    
  </div>

</div>