User Manual

Summary

This component represents an summary which includes the name of the summary and further information to better support the component in a certain context.

Account

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56

Dhr. Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
€ 1.200,56
Opgebouwde rente:
€ 20,00
Rentepercentage:
€ 0,25 

    
      

  

<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">
  
    <span class="a-budget__text">U spaart</span>
  

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



  

<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">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">
  
    <span class="a-budget__text">U spaart</span>
  

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



  

<article class="m-summary ">
  

  <div class="m-summary__container">

    

    

    <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">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 m-summary__budget--large">
  

  <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 class="m-summary__content">
          

<dl class="m-list m-list--definition m-list--small">
  

    <dt class="m-list__term">Opgebouwde rente:</dt>
    <dd class="m-list__data">

<div class="a-budget ">
  

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

</dd>

  

    <dt class="m-list__term">Rentepercentage:</dt>
    <dd class="m-list__data">

<div class="a-budget ">
  

  <div class="a-budget__wrapper">
    <span class="a-budget__unit">€</span>
    <span class="a-budget__amount">0,25</span>
    <span class="a-budget__unit"></span>
  </div>
</div>

</dd>

  
</dl>


        </div>
      
    </div>

  </div>
</article>

Button

Tegen-rekening

 

    
      

  

<a href="" class="m-summary m-summary--button ">
  <div class="m-summary__container">
    
       

<span class="a-icon a-icon--3x-large m-summary__icon icon-lock"></span>


    

    <div class="m-summary__block">
      <header class="m-summary__header">
        <h4 class="m-summary__title">Tegen-rekening</h4>
      </header>

      
        

<span class="a-icon a-icon--2x-large m-summary__action icon-lock"></span>


      
    </div>

  </div>
</a>

Contained

Render the summary with a border, white background color and some spacing.

  • m-summary--contained
  • m-summary--contained-desktop

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56 

    
      

  

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

<label for="" class="a-label m-summary__label undefined">
  Summary with label
</label>


  

  <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">
  
    <span class="a-budget__text">U spaart</span>
  

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



  

<article class="m-summary m-summary--contained-desktop">
  
    

<label for="" class="a-label m-summary__label undefined">
  Summary with label
</label>


  

  <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">
  
    <span class="a-budget__text">U spaart</span>
  

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

Device

Iphone 7 van Jan

  • Registered: 12-04-2019 18:33
  • Last login: 12-04-2019 18:33

    
      

  

<article class="m-summary m-summary--contained ">
  <div class="m-summary__container">


    
      

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


    

    <div class="m-summary__block">
      <header class="m-summary__header">
        <h4 class="m-summary__title">Iphone 7 van Jan</h4>
      </header>

      <ul class="m-summary__info">
        

          <li class="m-summary__info-item ">Registered: 12-04-2019 18:33</li>

        

          <li class="m-summary__info-item ">Last login: 12-04-2019 18:33</li>

        
      </ul>
    </div>

    <div class="m-summary__action">
      <a href=""
        class="m-summary__remove" >
      </a>
    </div>

  </div>
</article>

Disabled

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
€ 1.200,56 

    
      

  

<article class="m-summary is-disabled">
  

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

Editable

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587

    
      

  

<article class="m-summary ">
  <div class="m-summary__container">

    

    
      

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


    

    <div class="m-summary__block">
      <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="m-summary__action">
      <a href=""
        class="m-summary__edit "
        >
      </a>
    </div>

  </div>
</article>



  

<article class="m-summary ">
  <div class="m-summary__container">

    

    
      

<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">
      <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="m-summary__action">
      <a href=""
        class="m-summary__edit "
        >
      </a>
    </div>

  </div>
</article>

Expand

Render the summary with a border, white background color and some spacing.

  • m-summary--contained
  • m-summary--contained-desktop

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56 

    
      

  

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

<label for="" class="a-label m-summary__label undefined">
  Summary with label
</label>


  

  <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">
  
    <span class="a-budget__text">U spaart</span>
  

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



  

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

<label for="" class="a-label m-summary__label undefined">
  Summary with label
</label>


  

  <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">
  
    <span class="a-budget__text">U spaart</span>
  

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

With label

J.Bogaerts

  • spaarrekening
  • NL48 2152 5466 2587
U spaart
€ 1.200,56 

    
      

  

<article class="m-summary ">
  
    

<label for="" class="a-label m-summary__label undefined">
  Summary with label
</label>


  

  <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">
  
    <span class="a-budget__text">U spaart</span>
  

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

Modifiers

  • m-summary__budget--large

    Use this modifier on the m-summary__budget child to increase the font-size of the budget child element.

  • m-summary__info-item--uppercase

    By default each item within the info list is placed in capitals, but there are some which only need to rendered in uppercase.

  • m-summary--contained

    Render the summary with a border, white background color and some spacing

  • m-summary--contained-desktop

    Render the summary with a border, white background color and some spacing, but only on desktop

  • m-summary--expand

    Renders and extra arrow icon on the bottom of the account component to indicate that if clicked, it can be opened up to show more information or to select another account.

  • m-summary--small

    Create a smaller version of the summary where every text item is placed in a smaller font-size compared to its original.

States

  • is-disabled

    Indicate if a summary is disabled, this can be used, for example, to indicate a disabled account.