User Manual

Account-list

List of different accounts that the user has under a certain category like a savings account. Makes use of the grid-layout component to properly place these accounts next to each other. Based on the device used the markup is changed to properly display items inside or outside the list. This also makes use of the m-show-more button component to indicate to the user that other accounts can be added.

Default


    
      

  

<div class="o-account-list">
  <ul class="o-account-list__grid">
    <li class="o-account-list__item">
      

<article class="m-summary ">
  

  <div class="m-summary__container">

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

    
      

<div class="m-summary__visual">
  
    <span class="m-summary__icon icon-coin-stack"></span>
  
</div>


    

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

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase">NL48 2152 5466 2587</li>

            
          </ul>
        </div>

        
          

<div class="a-budget m-summary__budget undefined">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">1.200,56</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        
      </div>

      
    </div>

  </div>
</article>


    </li>

    <li class="o-account-list__item">
      

<article class="m-summary ">
  

  <div class="m-summary__container">

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

    
      

<div class="m-summary__visual">
  
    <span class="m-summary__icon icon-coin-saving"></span>
  
</div>


    

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

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase">NL48 2152 5466 2587</li>

            
          </ul>
        </div>

        
          

<div class="a-budget m-summary__budget undefined">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">1.200,56</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        
      </div>

      
    </div>

  </div>
</article>


    </li>

    <li class="o-account-list__item">
      

<article class="m-summary ">
  

  <div class="m-summary__container">

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

    
      

<div class="m-summary__visual">
  
    <span class="m-summary__icon icon-coin-saving"></span>
  
</div>


    

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

          <ul class="m-summary__info">
            

              <li class="m-summary__info-item m-summary__info-item--uppercase">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--uppercase">NL48 2152 5466 2587</li>

            
          </ul>
        </div>

        
          

<div class="a-budget m-summary__budget undefined">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">1.200,56</span>
    <span class="a-budget__unit"></span>
  </div>
</div>


        
      </div>

      
    </div>

  </div>
</article>


    </li>

    <li class="o-account-list__item u-tablet-hide">
      

<a
  href="#"
  class="m-add-new  "
  
>
  <span class="m-add-new__icon icon-plus"></span>

  <p class="m-add-new__text">Een rekening toevoegen</p>
</a>


    </li>
  </ul>

  

<a
  href="#"
  class="m-add-new o-account-list__add u-tablet-show "
  
>
  <span class="m-add-new__icon icon-plus"></span>

  <p class="m-add-new__text">Een rekening toevoegen</p>
</a>


</div>