New-account

Component which builds upon the card molecule, adding extra content & modifiers to show a new account.

Default


    
      

  

  
  
  

  
  
  

  
  
  

  
  
  

<article class="m-card m-new-account undefined">

  
    <h2 class="m-card__title">Kwartaalspaarrekening</h2>
  

  
    <div class="m-card__content">
    	
    <p class='m-new-account__intro'>
      Laat je je geld een kalenderkwartaal lang staan? Dan krijg je van ons een bonusrente.
    </p>

    <h1 class='m-new-account__rate'>
      <span class='m-new-account__perc'>%</span> 0,30<sup>*</sup>
    </h1>

    
<div class="a-switch ">
  <input type="checkbox" class="a-switch__checkbox" id="switch-default" />

  <label for="switch-default" class="a-switch__container">
    <p class="a-switch__text a-switch__text--off">Variabel rente</p>

    <div class="a-switch__button">
      <span class="a-switch__outer"></span>

      <span class="a-switch__inner-container">
        <span class="a-switch__inner"></span>
      </span>
    </div>

    <p class="a-switch__text a-switch__text--on">Vast rente</p>
  </label>
</div>

  
    </div>
  
    <div class="m-card__content">
    	

<ul class="m-list m-list--with-icons m-new-account__list">
  

    <li class="m-list__item  icon-checkmark">Sparen met een variabele rente</li>

  

    <li class="m-list__item  icon-checkmark">Je regelt alles direct online</li>

  

    <li class="m-list__item  icon-checkmark">Geen minimum inleg en geen kosten</li>

  
</ul>


    </div>
  
    <div class="m-card__content">
    	
    <h4>Voor wie wil je deze rekening openen?</h4>

    <div class='m-new-account__toggle'>
      

<div class="a-toggle ">
	<label for="single">
  	<input class="a-toggle__radio" type="radio" id="single" name="contentToggle" value="" checked>

  	<div class="a-toggle__content">
			<span class="a-toggle__icon icon-person"></span>

			<p class="a-toggle__text">profile</p>
  	</div>
  </label>
</div>



      

<div class="a-toggle ">
	<label for="group">
  	<input class="a-toggle__radio" type="radio" id="group" name="contentToggle" value="" >

  	<div class="a-toggle__content">
			<span class="a-toggle__icon icon-group"></span>

			<p class="a-toggle__text">group</p>
  	</div>
  </label>
</div>


    </div>
  
    </div>
  

  
    <div class="m-card__action">
      
    

<button
  class="a-button m-card__action-button "
  
>
  <span class="a-button__text">Deze rekening openen</span>
</button>



    <small><sup>*</sup>0,25% Basisrente + 0.05% Bonusrente</small>
  
    </div>
  

</article>






    

  

Disabled

Indicate if a card is disabled, the color theme will change to a more grey-like style.

  • is-disabled

Kwartaalspaarrekening

0,30*


    
      

  

  
  
  

  
  
  

<article class="m-card is-disabled undefined">

  
    <h2 class="m-card__title">Kwartaalspaarrekening</h2>
  

  
    <div class="m-card__content">
    	
    <p class="m-new-account__intro">
      Laat je je geld een kalenderkwartaal lang staan? Dan krijg je van ons een bonusrente.
    </p>

    <h1 class="m-new-account__rate">
      <span class="m-new-account__perc">%</span> 0,30<sup>*</sup>
    </h1>

    
<div class="a-switch is-disabled ">
  <input type="checkbox" class="a-switch__checkbox" id="switch-disabled" disabled/>

  <label for="switch-disabled" class="a-switch__container">
    <p class="a-switch__text a-switch__text--off">Variabel rente</p>

    <div class="a-switch__button">
      <span class="a-switch__outer"></span>

      <span class="a-switch__inner-container">
        <span class="a-switch__inner"></span>
      </span>
    </div>

    <p class="a-switch__text a-switch__text--on">Vast rente</p>
  </label>
</div>

  
    </div>
  
    <div class="m-card__content">
    	

<ul class="m-list m-list--with-icons m-new-account__list">
  

    <li class="m-list__item  icon-checkmark">Sparen met een variabele rente</li>

  

    <li class="m-list__item  icon-checkmark">Je regelt alles direct online</li>

  

    <li class="m-list__item  icon-checkmark">Geen minimum inleg en geen kosten</li>

  
</ul>


    </div>
  

  
    <div class="m-card__action">
      

<button class="a-button m-card__action-button" disabled>
  <span class="a-button__text">Deze rekening openen</span>
</button>


    </div>
  

</article>






    

  

States

  • is-disabled

    Will display the card in a more-grey like theme. Use this to indicat if a card is disabled.