User Manual

Options

A list of account options the user can choose between. These account options make use of the account option component that consists of a radio button and an account component. Here they are placed within a list with each radiobutton having the same name attribute and a unique id.

Accounts


    
      

  

<div class="o-options ">
  

<label for="" class="a-label o-options__label undefined">
  
</label>



  <ul class="o-options__list">
    

      <li class="o-options__item">
        

<div class="m-option ">
  

<div class="a-radio m-option__radio">
	<label for="account-select-from-1" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="account-select-from-1" name="account-select-from" value="" />

		<span class="a-radio__holder"></span>

    
	</label>
</div>



  <div class="m-option__content">
    <label
      class="m-option__label "
      for ="account-select-from-1"
      
    >
    </label>

    <div class="m-option__content-container ">
      

<article class="m-summary m-account-option__content">
  

  <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">
      <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--large">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--large">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>


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


      </li>

    

      <li class="o-options__item">
        

<div class="m-option ">
  

<div class="a-radio m-option__radio">
	<label for="account-select-from-2" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="account-select-from-2" name="account-select-from" value="" />

		<span class="a-radio__holder"></span>

    
	</label>
</div>



  <div class="m-option__content">
    <label
      class="m-option__label "
      for ="account-select-from-2"
      
    >
    </label>

    <div class="m-option__content-container ">
      

<article class="m-summary m-account-option__content">
  

  <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">
      <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--large">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--large">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>


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


      </li>

    

      <li class="o-options__item">
        

<div class="m-option ">
  

<div class="a-radio m-option__radio">
	<label for="account-select-from-3" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="account-select-from-3" name="account-select-from" value="" />

		<span class="a-radio__holder"></span>

    
	</label>
</div>



  <div class="m-option__content">
    <label
      class="m-option__label "
      for ="account-select-from-3"
      
    >
    </label>

    <div class="m-option__content-container ">
      

<article class="m-summary m-account-option__content">
  

  <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">
      <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--large">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--large">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>


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


      </li>

    
  </ul>
</div>

With label


    
      

  

<div class="o-options ">
  

<label for="" class="a-label o-options__label undefined">
  Options with label
</label>



  <ul class="o-options__list">
    

      <li class="o-options__item">
        

<div class="m-option ">
  

<div class="a-radio m-option__radio">
	<label for="account-select-from-4" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="account-select-from-4" name="account-select-from" value="" />

		<span class="a-radio__holder"></span>

    
	</label>
</div>



  <div class="m-option__content">
    <label
      class="m-option__label "
      for ="account-select-from-4"
      
    >
    </label>

    <div class="m-option__content-container ">
      

<article class="m-summary m-account-option__content">
  

  <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">
      <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--large">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--large">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>


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


      </li>

    

      <li class="o-options__item">
        

<div class="m-option ">
  

<div class="a-radio m-option__radio">
	<label for="account-select-from-5" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="account-select-from-5" name="account-select-from" value="" />

		<span class="a-radio__holder"></span>

    
	</label>
</div>



  <div class="m-option__content">
    <label
      class="m-option__label "
      for ="account-select-from-5"
      
    >
    </label>

    <div class="m-option__content-container ">
      

<article class="m-summary m-account-option__content">
  

  <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">
      <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--large">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--large">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>


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


      </li>

    

      <li class="o-options__item">
        

<div class="m-option ">
  

<div class="a-radio m-option__radio">
	<label for="account-select-from-6" class="a-radio__container">
		<input class="a-radio__input" type="radio" id="account-select-from-6" name="account-select-from" value="" />

		<span class="a-radio__holder"></span>

    
	</label>
</div>



  <div class="m-option__content">
    <label
      class="m-option__label "
      for ="account-select-from-6"
      
    >
    </label>

    <div class="m-option__content-container ">
      

<article class="m-summary m-account-option__content">
  

  <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">
      <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--large">spaarrekening</li>

            

              <li class="m-summary__info-item m-summary__info-item--large">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>


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


      </li>

    
  </ul>
</div>