Components

The Aegon Modal plugin can be fired automatically without any JavaScript code by adding to the element the data-aegon="modal" attribute, plus any of the following options:

  • data-modal-title: The title of the modal. Will be styled accordingly.
  • data-modal-body: The body of the modal. It can contain HTML tags.
  • data-modal-close: The value of this attribute should be true or false. If the value of this attribute is false the close button won't be added. The value is true by default, so the button will be shown if this attribute is not added.
  • data-modal-width: The value of this attribute should be a number. Is the width of the modal window. The default width is 500px.
  • data-modal-overlay: The value of this attribute should be true or false. If true, a semi-transparent overlay will cover the screen behind the modal. The default value is true.
  • data-modal-overlayClose: The value of this attribute should be true or false. If true and if the data-modal-overlay attribute is true, a click event will be added to the overlay to close the modal. The default value is false.
  • data-modal-ajax: The value of this attribute should be true or false. If true a loading image will be added to the body. The content of the modal can be updated using the JavaScript function Drupal.aegonModal('update', {body: "The new content of the modal"});. This is useful when adding dynamic content gotten by ajax in the then function. The default value is false.
  • data-modal-timeOut: The value is this attribute should be a number representing time in milliseconds. If the value of this attribute is a valid number, a timeout will be set with the amount of the value, if the data-modal-ajax attribute value is true. The default value is 0.
  • data-modal-timeOutMessage: The value of this attribute should be a string. This text will be shown after the timeout set with the data-modal-timeOut is up. If not set or if the value is an empty string, it won't be shown. It doesn't have default value.
  • data-modal-id: The value of this attribute should be a string that follows the W3 ID's specifications. This is useful when dealing with TOSCA technical ID's or if a custom ID is needed. The default value is aegon-modal.
  • href: If the value of this attribute contains the ID of an existing element in the DOM, the data-modal-body will be overwritten with the content of that element. So avoid setting both attributes :). It doesn't have default value.
Click to open the modal
<p>The Aegon Modal plugin can be fired automatically without any JavaScript code by adding to the element the <code>data-aegon="modal"</code> attribute, plus any of the following options:</p>
<ul>
    <li><code>data-modal-title</code>: The title of the modal. Will be styled accordingly.</li>
    <li><code>data-modal-body</code>: The body of the modal. It can contain HTML tags.</li>
    <li><code>data-modal-close</code>: The value of this attribute should be <b>true</b> or <b>false</b>. If the value of this attribute is <b>false</b> the close button won't be added. The value is <b>true</b> by default, so the button will be shown if this
        attribute is not added.</li>
    <li><code>data-modal-width</code>: The value of this attribute should be a <b>number</b>. Is the width of the modal window. The default width is 500px.</li>
    <li><code>data-modal-overlay</code>: The value of this attribute should be <b>true</b> or <b>false</b>. If <b>true</b>, a semi-transparent overlay will cover the screen behind the modal. The default value is <code>true</code>.</li>
    <li><code>data-modal-overlayClose</code>: The value of this attribute should be <b>true</b> or <b>false</b>. If <b>true</b> and if the <code>data-modal-overlay</code> attribute is <b>true</b>, a click event will be added to the overlay to close the modal.
        The default value is <b>false</b>.</li>
    <li><code>data-modal-ajax</code>: The value of this attribute should be <b>true</b> or <b>false</b>. If <b>true</b> a loading image will be added to the body. The content of the modal can be updated using the JavaScript function <code>Drupal.aegonModal('update', {body: "The new content of the modal"});</code>.
        This is useful when adding dynamic content gotten by ajax in the <code>then</code> function. The default value is <code>false</code>.</li>
    <li><code>data-modal-timeOut</code>: The value is this attribute should be a <code>number</code> representing time in milliseconds. If the value of this attribute is a valid number, a timeout will be set with the amount of the value, if the <code>data-modal-ajax</code>        attribute value is <code>true</code>. The default value is <code>0</code>.</li>
    <li><code>data-modal-timeOutMessage</code>: The value of this attribute should be a <code>string</code>. This text will be shown after the timeout set with the <code>data-modal-timeOut</code> is up. If not set or if the value is an empty string, it won't
        be shown. It doesn't have default value.</li>
    <li><code>data-modal-id</code>: The value of this attribute should be a <code>string</code> that follows the <a href="https://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id" target="_blank">W3 ID's specifications</a>. This is useful
        when dealing with TOSCA technical ID's or if a custom ID is needed. The default value is <code>aegon-modal</code>.</li>
    <li><code>href</code>: If the value of this attribute contains the ID of an existing element in the DOM, the <code>data-modal-body</code> will be overwritten with the content of that element. So avoid setting both attributes :). It doesn't have default
        value.</li>
</ul>
<a class="button arrow" href="#aegon-modal-content" data-aegon="modal" data-modal-body="This is the body" data-modal-title="This is the title" data-modal-close="true" data-modal-ajax="true" data-modal-timeOut="1000" data-modal-timeOutMessage="Oops, it seems is not working"
data-modal-width="700" data-modal-overlayClose="true" data-modal-id="my-custom-id">Click to open the modal</a>
<div id="aegon-modal-content" hidden>
    <p>If the <code>href</code> attribute of the link with the <code>data-aegon</code> is an existing element of the DOM, the <code>data-modal-body</code> is overwritten by the content of that element.</p>
</div>
×
' + this.options.title + "
" + this.options.author + "
" + q + '
' + this.options.button + "
<div class="smartbanner__container">
    <a href="javascript:void(0);" class="smartbanner__close">&times;</a>
    <span class="smartbanner__icon" style="background-image: url(' + o + ')"></span>
    <div class="smartbanner__info">
        <div class="smartbanner__title">' + this.options.title + "</div>
        <div>" + this.options.author + "</div>
        <span>" + q + '</span>
    </div>
    <a href="' + p + '" class="smartbanner-button">
        <span class="smartbanner-button__text">' + this.options.button + "</span>
    </a>
</div>

Login button



Edit button desktop


Edit button mobile (visible in > 641px window)

  •  

Save button


Other buttons

Example of a div with the button class applied
<h4>Login button</h4>
<button class="login-link icon-lock visible">Log in</button>
<br>
<hr>
<h4>Edit button desktop</h4>
<button class="edit right transparent"></button>
<hr>
<h4>Edit button mobile (visible in > 641px window)</h4>
<ul class="actions">
    <li class="view">
        <button class="edit blue arrow"></button>
    </li>
    <li class="edit">
        &nbsp;
    </li>
</ul>
<hr>
<h4>Save button</h4>
<ul class="actions edit row-fluid">
    <li class="edit span12">
        <button class="arrow" type="button">save button text</button>
        <button class="white cancel" type="button">Annuleren</button>
    </li>
</ul>
<hr>
<h4>Other buttons</h4>
<button class="button">normal</button>
<button class="button arrow">arrow</button>
<button class="button blue arrow">blue arrow</button>
<button class="button green">green</button>
<button class="button green arrow">green arrow</button>
<button class="button green icon-lock">green icon</button>
<button class="button white">white</button>
<button class="button white arrow">white arrow</button>
<button class="button transparent">transparent</button>
<button class="button transparent arrow">transparent arrow</button>
<button class="button transparent edit"></button>
<button class="button edit"></button>
<button class="button red arrow">red arrow</button>
<button class="button orange icon-right arrow">Do something</button>
<button class="button orange-gradient icon-right arrow">Do something</button>

<div class="button arrow">Example of a div with the button class applied</div>

<button class="button icon-right icon-call">call button</button>
<button class="button icon-right icon-chat">chat button</button>
<button class="button icon-right icon-search">search button</button>
<button class="button arrow pending">pending button</button>
<button class="button green icon-right icon-lock">Login button icon right</button>
<label class="checkbox">
    <input type="checkbox" name="checkbox1" value="value1" />
    <span class="checkbox"></span>Checkbox 1
</label>
<form>
    <label class="checkbox required">
        <input type="checkbox" name="colCheckInput" value="lorem" required/>
        <span class="checkbox"></span>
        <span class="label">required Checkbox</span>
        <span class="errorText">some error message visible</span>
    </label>
</form>
<input type="text" id="datepicker" class="datepicker">
<div class="file-upload" data-max-files="2">
    <div class="file-upload__list"></div>
    <label class="file-upload__input">
        <input type="file" id="file" name="documents" accept=".jpg, .doc, .docx, .xls, .xlsx, .pdf" multiple required>
        <div class="file-upload__upload-msg">
            <span class="file-upload__upload-btn icon-file-upload-thin"></span> Document toevoegen
        </div>
        <div class="file-upload__uploading-msg">
            <span class="file-upload__upload-btn file-upload__upload-btn--uploading"></span> Toevoegen
        </div>
        <span class="errorText">Some error</span>
    </label>
    <div class="file-upload__input file-upload__input--uploaded file-upload__input--invalid-template hidden">
        <span class="file-upload__name icon-file-corrupted-thin">Ongeldig bestandstype</span>
    </div>
</div>

Heading level 1

heading level 2

heading level 3

heading level 4

heading level 5
heading level 6
<h1>Heading level 1</h1>
<h2>heading level 2</h2>
<h3>heading level 3</h3>
<h4>heading level 4</h4>
<h5>heading level 5</h5>
<h6>heading level 6</h6>

.icon-facebook

.icon-twitter

.icon-post

.icon-email

.icon-arrow-right or .icon-uniE600

.icon-skinnyarrow

.icon-arrow-down

.icon-arrow-down-thin

.icon-arrow-up

.icon-arrow-up-thin

.icon-person-outline or .icon-uniE606

.icon-uniE607 or .icon-sparen or .icon-5074

.icon-uniE608 or .icon-actueel or .icon-beleggen or .icon-4494

.icon-uniE609 or .icon-verzekeren or .icon-inkomensverzekeringen or .icon-4495

.icon-uniE610 or .icon-inloggen or .icon-4610 or .icon-5694 or .icon-blog or .icon-pencil

.icon-uniE611 or .icon-uitgelicht or .icon-4547 or .icon-5657

.icon-uniE61B or .icon-schadeverzekeringen or .icon-broken-window

.icon-uniE629 or .icon-4546 or .icon-mijn-producten or .icon-themas

.icon-uniE60B or .icon-hypotheek or .icon-4496 or .icon-4537

.icon-uniE60A or .icon-pensioen or .icon-pensioen-en-lijfrente or .icon-4497

.icon-circled-x or .icon-uniE60D

.icon-uniE60F or .icon-vermogensbeheer

.icon-tools or .icon-uniE62B

.icon-uniE636 or .icon-user-link or .icon-uniE646 or .icon-6861 or .icon-mijn-aegon or .icon-person

.icon-uniE647 or .icon-home or .icon-5653

.icon-uniE648 or .icon-lock

.icon-uniE62C or .icon-6863 or .icon-mijn-gegevens

.icon-pdf

.icon-call

.icon-chat

.icon-comment

.icon-search

.icon-info

.icon-uniE602 or .icon-mijn-betalingen

.icon-error

.icon-advisor

.icon-calculator

.icon-check

.icon-radio

.icon-fist-full or .icon-thumb-down or .icon-uniE60E

.icon-plus

.icon-plus-regular

.icon-plus-light or .icon-unie904

.icon-minus

.icon-arrow-location or .icon-uniE601

.icon-tip

.icon-offreren

.icon-chart

.icon-inzien or .icon-unie906

.icon-muteren or .icon-unie905

.icon-zakelijk or .icon-unie908

.icon-contract-details or .icon-unie907

.icon-help

.icon-whatsapp

.icon-hammer

.icon-suitcase

.icon-desktop-phone

.icon-house

.icon-scale

.icon-paw

.icon-chair

.icon-dotted-car

.icon-repair-car

.icon-car-crash

.icon-uniE605 or .icon-klantenservice or .icon-service-contact

.icon-chart-thin

.icon-agenda-thin

.icon-share-thin

.icon-write-thin

.icon-check-square-thin

.icon-file-thin

.icon-file-upload-thin

.icon-file-corrupted-thin

.icon-x

.icon-envelope or .icon-uniE603

.icon-uniE604 or .icon-6860 or .icon-mijn-documenten

.icon-pension123

.icon-contact

.icon-socialmedia-contact

<div class="container_12">
    <div class="row-fluid">

        <div class="span2">
            <h2><span class="icon-facebook"></span></h2>
            <p><code>.icon-facebook</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-twitter"></span></h2>
            <p><code>.icon-twitter</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-post"></span></h2>
            <p><code>.icon-post</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-email"></span></h2>
            <p><code>.icon-email</code>
            </p>
        </div>


        <div class="span2">
            <h2><span class="icon-arrow-right"></span></h2>
            <p><code>.icon-arrow-right</code> or <code>.icon-uniE600</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-skinnyarrow"></span></h2>
            <p><code>.icon-skinnyarrow</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-arrow-down"></span></h2>
            <p><code>.icon-arrow-down</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-arrow-down-thin"></span></h2>
            <p><code>.icon-arrow-down-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-arrow-up"></span></h2>
            <p><code>.icon-arrow-up</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-arrow-up-thin"></span></h2>
            <p><code>.icon-arrow-up-thin</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-person-outline"></span></h2>
            <p><code>.icon-person-outline</code> or <code>.icon-uniE606</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE607"></span></h2>
            <p><code>.icon-uniE607</code> or <code>.icon-sparen</code> or <code>.icon-5074</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE608"></span></h2>
            <p><code>.icon-uniE608</code> or <code>.icon-actueel</code> or <code>.icon-beleggen</code> or
                <code>.icon-4494</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE609"></span></h2>
            <p><code>.icon-uniE609</code> or <code>.icon-verzekeren</code> or <code>.icon-inkomensverzekeringen</code> or
                <code>.icon-4495</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE610"></span></h2>
            <p><code>.icon-uniE610</code> or <code>.icon-inloggen</code> or <code>.icon-4610</code> or <code>.icon-5694</code> or <code>.icon-blog</code> or <code>.icon-pencil</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE611"></span></h2>
            <p><code>.icon-uniE611</code> or <code>.icon-uitgelicht</code> or <code>.icon-4547</code> or
                <code>.icon-5657</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-uniE61B"></span></h2>
            <p><code>.icon-uniE61B</code> or <code>.icon-schadeverzekeringen</code> or <code>.icon-broken-window</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE629"></span></h2>
            <p><code>.icon-uniE629</code> or <code>.icon-4546</code> or <code>.icon-mijn-producten</code> or <code>.icon-themas</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE60B"></span></h2>
            <p><code>.icon-uniE60B</code> or <code>.icon-hypotheek</code> or <code>.icon-4496</code> or
                <code>.icon-4537</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE60A"></span></h2>
            <p><code>.icon-uniE60A</code> or <code>.icon-pensioen</code> or <code>.icon-pensioen-en-lijfrente</code> or <code>.icon-4497</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-circled-x"></span></h2>
            <p><code>.icon-circled-x</code> or <code>.icon-uniE60D</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE60F"></span></h2>
            <p><code>.icon-uniE60F</code> or <code>.icon-vermogensbeheer</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-tools"></span></h2>
            <p><code>.icon-tools</code> or <code>.icon-uniE62B</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE636"></span></h2>
            <p><code>.icon-uniE636</code> or <code>.icon-user-link</code> or <code>.icon-uniE646</code> or
                <code>.icon-6861</code> or <code>.icon-mijn-aegon</code> or <code>.icon-person</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE647"></span></h2>
            <p><code>.icon-uniE647</code> or <code>.icon-home</code> or <code>.icon-5653</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE648"></span></h2>
            <p><code>.icon-uniE648</code> or <code>.icon-lock</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE62C"></span></h2>
            <p><code>.icon-uniE62C</code> or <code>.icon-6863</code> or <code>.icon-mijn-gegevens</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-pdf"></span></h2>
            <p><code>.icon-pdf</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-call"></span></h2>
            <p><code>.icon-call</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-chat"></span></h2>
            <p><code>.icon-chat</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-comment"></span></h2>
            <p><code>.icon-comment</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-search"></span></h2>
            <p><code>.icon-search</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-info"></span></h2>
            <p><code>.icon-info</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE602"></span></h2>
            <p><code>.icon-uniE602</code> or <code>.icon-mijn-betalingen</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-error"></span></h2>
            <p><code>.icon-error</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-advisor"></span></h2>
            <p><code>.icon-advisor</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-calculator"></span></h2>
            <p><code>.icon-calculator</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-check"></span></h2>
            <p><code>.icon-check</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-radio"></span></h2>
            <p><code>.icon-radio</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-thumb-down"></span></h2>
            <p><code>.icon-fist-full</code> or <code>.icon-thumb-down</code> or <code>.icon-uniE60E</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-plus"></span></h2>
            <p><code>.icon-plus</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-plus-regular"></span></h2>
            <p><code>.icon-plus-regular</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-plus-light"></span></h2>
            <p><code>.icon-plus-light</code> or <code>.icon-unie904</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-minus"></span></h2>
            <p><code>.icon-minus</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-arrow-location"></span></h2>
            <p><code>.icon-arrow-location</code> or <code>.icon-uniE601</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-tip"></span></h2>
            <p><code>.icon-tip</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-offreren"></span></h2>
            <p><code>.icon-offreren</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-chart"></span></h2>
            <p><code>.icon-chart</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-inzien"></span></h2>
            <p><code>.icon-inzien</code> or <code>.icon-unie906</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-muteren"></span></h2>
            <p><code>.icon-muteren</code> or <code>.icon-unie905</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-zakelijk"></span></h2>
            <p><code>.icon-zakelijk</code> or <code>.icon-unie908</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-contract-details"></span></h2>
            <p><code>.icon-contract-details</code> or <code>.icon-unie907</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-help"></span></h2>
            <p><code>.icon-help</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-whatsapp"></span></h2>
            <p><code>.icon-whatsapp</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-hammer"></span></h2>
            <p><code>.icon-hammer</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-suitcase"></span></h2>
            <p><code>.icon-suitcase</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-desktop-phone"></span></h2>
            <p><code>.icon-desktop-phone</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-house"></span></h2>
            <p><code>.icon-house</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-scale"></span></h2>
            <p><code>.icon-scale</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-paw"></span></h2>
            <p><code>.icon-paw</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-chair"></span></h2>
            <p><code>.icon-chair</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-dotted-car"></span></h2>
            <p><code>.icon-dotted-car</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-repair-car"></span></h2>
            <p><code>.icon-repair-car</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-car-crash"></span></h2>
            <p><code>.icon-car-crash</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-uniE605"></span></h2>
            <p><code>.icon-uniE605</code> or <code>.icon-klantenservice</code> or <code>.icon-service-contact</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-chart-thin"></span></h2>
            <p><code>.icon-chart-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-agenda-thin"></span></h2>
            <p><code>.icon-agenda-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-share-thin"></span></h2>
            <p><code>.icon-share-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-write-thin"></span></h2>
            <p><code>.icon-write-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-check-square-thin"></span></h2>
            <p><code>.icon-check-square-thin</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-file-thin"></span></h2>
            <p><code>.icon-file-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-file-upload-thin"></span></h2>
            <p><code>.icon-file-upload-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-file-corrupted-thin"></span></h2>
            <p><code>.icon-file-corrupted-thin</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-x"></span></h2>
            <p><code>.icon-x</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-envelope"></span></h2>
            <p><code>.icon-envelope</code> or <code>.icon-uniE603</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-uniE604"></span></h2>
            <p><code>.icon-uniE604</code> or <code>.icon-6860</code> or <code>.icon-mijn-documenten</code>
            </p>
        </div>
    </div>
</div>
<div class="container_12">
    <div class="row-fluid">
        <div class="span2">
            <h2><span class="icon-pension123"></span></h2>
            <p><code>.icon-pension123</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-contact"></span></h2>
            <p><code>.icon-contact</code>
            </p>
        </div>
        <div class="span2">
            <h2><span class="icon-socialmedia-contact"></span></h2>
            <p><code>.icon-socialmedia-contact</code>
            </p>
        </div>
    </div>
</div>
Licenseplate
NL
<h5>Licenseplate</h5>
<div class="licenseplate">
    <div class="country">NL</div>
    <input type="text" class="license-number" placeholder="AAA-11-B">
</div>
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  5. Aliquam tincidunt mauris eu risus.
  6. Vestibulum auctor dapibus neque.
  7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  8. Aliquam tincidunt mauris eu risus.
  9. Vestibulum auctor dapibus neque.
  10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  11. Aliquam tincidunt mauris eu risus.
  12. Vestibulum auctor dapibus neque.
<ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ol>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul class="bullet">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

<ul class="check">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="green-check">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="arrow">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="cross">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="red-cross">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="green-plus">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="red-minus">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

<!-- Backwards compatible types start here: (Don't know if they are used)-->
<ul class="links">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

<ul class="ul-arrows">
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

<ul>
    <li class="check">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li class="green-check">Aliquam tincidunt mauris eu risus.</li>
    <li class="arrow">Vestibulum auctor dapibus neque.</li>
</ul>

<ul>
    <li class="arrow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li class="arrow">Aliquam tincidunt mauris eu risus.</li>
    <li class="arrow">Vestibulum auctor dapibus neque.</li>
</ul>
<!-- Backwards compatible types end here -->
Urgente informatie
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aansporing profiel Mijn Aegon
Mijn gegevens aanvullen

Om u zo goed mogelijk te informeren dient u uw gegevens aan te vullen.

Foutmelding
De brief kan momenteel niet verzonden worden
Er is een tijdelijk probleem met onze postservice. Probeert u het zo dadelijk nog eens. Komt het probleem nog steeds voor? Neem dan contact op. Neem dan contact op.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bevestiging
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Urgente attentie / storing
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to action
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mijn Aegon App banner
MijnAegon

Aegon Nederland N.V.
Download gratis in Google Play

Mortgage related

Rente aanpassen: bekijk uw opties

U wilt uw hypotheekrente tussentijds aanpassen? Download een overzicht van de opties om uw hypotheekrente aan te passen.
<h5>Urgente informatie</h5>
<div class="messages messages--warning visible">
    <span class="icon"></span>
    <div class="header">
        Lorem ipsum dolor sit amet
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

<h5>Aansporing profiel Mijn Aegon</h5>
<div class="messages messages--attention visible">
    <span class="icon"></span>
    <div class="wrap">
        <div class="header">
            Mijn gegevens aanvullen
        </div>
        <div class="content">
            <p>Om u zo goed mogelijk te informeren dient u uw gegevens aan te vullen.</p>
            <button class="button orange arrow">Mijn gegevens aanvullen</button>
        </div>
    </div>
</div>

<h5>Foutmelding</h5>
<div class="cx-message cx-message--error">
    <div class="cx-message__header">De brief kan momenteel niet verzonden worden</div>
    <div class="cx-message__content">
        Er is een tijdelijk probleem met onze postservice. Probeert u het zo dadelijk nog eens. Komt het probleem nog steeds voor? Neem dan contact op. <a href="#">Neem dan contact op.</a>
    </div>
</div>
<div class="messages messages--alert visible">
    <span class="icon"><span class="pathA"></span><span class="pathB"></span><span class="pathC"></span></span>
    <div class="header">
        Lorem ipsum dolor sit amet
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

<h5>Bevestiging</h5>
<div class="messages messages--status visible">
    <span class="icon"></span>
    <div class="header">
        Lorem ipsum dolor sit amet
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

<h5>Urgente attentie / storing</h5>
<div class="messages messages--error visible">
    <span class="icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>
    <div class="header">
        Lorem ipsum dolor sit amet
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

<h5>Call to action</h5>
<div class="messages messages--functional visible">
    <div class="header">
        Lorem ipsum dolor
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="button arrow">Spaardoel aanmaken</button>
</div>

<h5>Mijn Aegon App banner</h5>
<div class="messages messages--googleStatus">
    <span class="icon"></span>
    <img class="googleStatus-img" src="https://www.aegon.nl/sites/aegonnl/public_files/styles/aegon-e-com-desktop/public/afbeeldingen/Icons/beachball.png?itok=H3jgPWJx" title="placeholder-image. Replace with correct image"></img>

    <div class="content">
        <div class="header">
            MijnAegon
        </div>
        <p>
            Aegon Nederland N.V.
            <br> Download gratis in Google Play
        </p>
    </div>
    <button class="button orange moveright">Bekijk</button>
</div>

<h5>Mortgage related</h5>
<div class="messages messages--generic mortgage visible">
    <span class="icon"></span>
    <div class="header">
        <h3>Rente aanpassen: bekijk uw opties</h3>
    </div>
    <div class="content">
        U wilt uw hypotheekrente tussentijds aanpassen? Download een overzicht van de opties om uw hypotheekrente aan te passen.
    </div>
</div>
<div class="item-list">
    <ul class="pager">
        <li class="pager-current first">1</li>
        <li class="pager-item"><a title="Go to page 2" href="#">2</a>
        </li>
        <li class="pager-item"><a title="Go to page 3" href="#">3</a>
        </li>
        <li class="pager-item"><a title="Go to page 4" href="#">4</a>
        </li>
        <li class="pager-item"><a title="Go to page 5" href="#">5</a>
        </li>
        <li class="pager-next"><a title="Go to next page" href="#">next ›</a>
        </li>
        <li class="pager-last last"><a title="Go to last page" href="#">last »</a>
        </li>
    </ul>
</div>

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
    nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>
<label class="radio">
    <input type="radio" name="radio" value="value1" />
    <span class="radio"></span>Radio 1
</label>
<label class="radio">
    <input type="radio" checked name="radio" value="value2" />
    <span class="radio"></span>Radio 2
</label>



some error message visible

<select name="" id="">
    <option value="">empty option</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<br>
<br>
<br>

<select name="" id="" required>
    <option value="">empty option</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>
<span class="errorText">some error message visible</span>

<br>
<br>

Faq block

<div class="row-fluid grey-bg">
    <div class="span1 gutter"></div>
    <div class="span12">
        <div class="container_12">
            <div class="service-contact-block service-contact-block--margin-top" data-tealium="service-contact-block">
                <div id="bc-product-faqs-0" class="row-fluid divider-line divider-line--hidden">
                    <div id="faq-element" data-tealium="faq-list">
                        <h3>Faq block</h3>
                        <div class="faq">
                            <div class="faq-container">
                                <style>
                                    .field-faq-answer,
                                    .feedback-data-result,
                                    .feedback-data-form,
                                    .feedback-on-message {
                                        display: none;
                                       }
                                </style>
                                <div class="field field-name-field-faq-element-ref field-type-entityreference field-label-hidden">
                                    <div class="field-items">
                                        <div class="field-item">
                                            <div class="ds-1col node node-faq view-mode-element_view  clearfix">
                                                <label class="question span12">
                                                    <input type="radio" value="0" name="show">
                                                    <div class="field-faq-question title" node-id="34659" data-tealium="faq-title">Hoe kan ik de rekeninghouder bij Aegon Bank aanpassen?</div>
                                                    <div class="field-faq-answer answer" id="field-faq-answer-34659">
                                                        <div class="faq-answer-inner">
                                                            <b>U kunt een wijziging van de rekeninghouder per e-mail of per
                                                                post doorgeven
                                                            </b>
                                                            <br>Per
                                                            <a href="https://www.aegon.nl/particulier/klantenservice/e-mail-sturen" target="_blank">e-mail</a> scant u de benodigde documenten in en voegt u deze toe als bijlage. Per post stuurt u de documenten
                                                            naar:
                                                            <br>Aegon Bank N.V.
                                                            <br>Postbus 35
                                                            <br>8900 AA Leeuwarden
                                                            <br>
                                                            <br>
                                                            <b>Welke gegevens hebben wij nodig?</b>
                                                            <br>Als u de tweede rekeninghouder wilt verwijderen:
                                                            <ul>
                                                                <li>Uw rekeningnummer bij Aegon</li>
                                                                <li>Een ondertekend verzoek van de tweede rekeninghouder&nbsp;</li>
                                                                <li>Een kopie voor-en achterkant van het identiteitsbewijs van de tweede rekeninghouder.&nbsp;Van een paspoort ontvangen wij graag een kopie van de voor-en achterkant van het verharde middenstuk.
                                                                </li>
                                                            </ul>
                                                            <br>
                                                            <br>
                                                            <b>Als u een meerderjarige rekeninghouder wilt toevoegen:</b>

                                                            <ul>
                                                                <li>Uw rekeningnummer bij Aegon</li>
                                                                <li>Een ondertekend verzoek van de huidige én de nieuwe rekeninghouder</li>
                                                                <li>Een kopie van de voor- en achterkant van het identiteitsbewijs van de huidige én de nieuwe rekeninghouder.&nbsp;Van een paspoort ontvangen wij graag een kopie van de voor-en achterkant van
                                                                    het verharde middenstuk.</li>
                                                                <li>Een kopie bankafschrift van een gezamenlijke rekening van de huidige en nieuwe rekeninghouder. Het afschrift mag maximaal drie maanden oud zijn. Hoe u een bankafschrift downloadt bij uw bank
                                                                    en wat hierop zichtbaar moet zijn vindt u op onze pagina
                                                                    <a href="https://www.aegon.nl/particulier/sparen/zo-downloadt-u-een-bankafschrift-bij-uw-bank" target="_blank">Zo downloadt u een bankafschrift bij uw bank</a>.</li>
                                                            </ul>
                                                            <br>
                                                            <br>Bovenstaande geldt voor Aegon Sparen en Aegon Beleggen.</div>
                                                        <div class="question-vote clearfix">
                                                            <div class="feedback-combine clearfix">
                                                                <div class="feedback-title">Heeft dit antwoord u geholpen?</div>
                                                                <div class="feedback-on">
                                                                    <div class="rate-widget-data">
                                                                        <div class="rate-widget-1 rate-widget clear-block rate-average rate-widget-thumbs_up_down rate-x-c-vj1h1yvoW-E6Keu9MdoCKccQ9kFZy1meQYc3EoY rate-node-34659-1-3 rate-processed" id="rate-node-34659-1-3--3">
                                                                            <ul>
                                                                                <li class="thumb-up">
                                                                                    <span class="rate-button rate-thumbs-up-down-btn-up" id="rate-button-13">Ja</span>
                                                                                    <div class="percent">32%</div>
                                                                                </li>
                                                                                <li class="thumb-down">
                                                                                    <span class="rate-button rate-thumbs-up-down-btn-down" id="rate-button-14">Nee</span>
                                                                                    <div class="percent">68%</div>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="contact-text">
                                                                <p>Heeft u een vraag over uw eigen product? Dan kunt u
                                                                    <a href="/node/29170">inloggen</a>, een
                                                                    <a href="/node/30335">e-mail sturen</a> of
                                                                    <a href="/node/29497">bellen met Aegon</a>.</p>
                                                            </div>
                                                            <div class="feedback-data-form">
                                                                <form class="feedback_form" action="/lpa/testmagesh" method="post" id="faq-feedback-form" accept-charset="UTF-8">
                                                                    <div>
                                                                        <input class="feedback-faqpath" type="hidden" name="feedback_faqpath" value="/lpa/feedback_faq">
                                                                        <div class="feedback-response">Bedankt voor uw reactie. Wilt u aangeven waarom het antwoord u niet geholpen heeft? Zo kunnen wij het antwoord op de vraag verbeteren.</div>
                                                                        <div class="form-item form-type-textarea form-item-feedback">
                                                                            <label for="edit-feedback">Uw feedback </label>
                                                                            <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea">
                                                                                <textarea class="feedback form-textarea" id="edit-feedback" name="feedback" cols="60" rows="5"></textarea>
                                                                                <div class="grippie"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-item form-type-textfield form-item-mail">
                                                                            <label for="edit-mail">Mogen wij contact met u opnemen indien er vragen zijn over uw feedback? Zo ja, vul dan hier uw e-mailadres in: </label>
                                                                            <input class="feedback_mail input-xlarge form-text" type="text" id="edit-mail" name="mail" value="" maxlength="128">
                                                                        </div>
                                                                        <div class="submit_feedback">
                                                                            <span>
                                                                                <a href="#anchor" class="button arrow">Verstuur</a>
                                                                            </span>
                                                                        </div>
                                                                        <input class="element-invisible form-submit" type="submit" id="edit-submit--3" name="op" value="Submit">
                                                                        <input type="hidden" name="form_build_id" value="form-J79hQT1EnUUBYu-jEVqI_Htvzy3DEX-Hv0-4aIWXIBg">
                                                                        <input type="hidden" name="form_token" value="3862k1O8bKlWWz3-Una1HvYaO4e4P2loThyDg1Aq7_Y">
                                                                        <input type="hidden" name="form_id" value="faq_feedback_form">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                            <div class="feedback-data-result"></div>
                                                            <div class="feedback-on-message">Bedankt voor uw reactie.</div>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="field-item">
                                            <div class="ds-1col node node-faq view-mode-element_view  clearfix">
                                                <label class="question span12">
                                                    <input type="radio" value="0" name="show">
                                                    <div class="field-faq-question title" node-id="34675" data-tealium="faq-title">Hoe doe ik een aan-of verkoop in de beleggingsfondsen bij Aegon Bank?</div>
                                                    <div class="field-faq-answer answer" id="field-faq-answer-34675">
                                                        <div class="faq-answer-inner">
                                                            <p>
                                                                <b>Deze informatie geldt voor:</b>
                                                            </p>

                                                            <ul>
                                                                <li>Aegon Beleggen</li>
                                                                <li>Aegon Lijfrente Beleggen</li>
                                                                <li>Aegon Levensloop Beleggen</li>
                                                            </ul>

                                                            <p>
                                                                <b>U geeft een aan- en verkoopopdrachten in Mijn Aegon</b>
                                                                <br>Aan- en verkoopopdrachten worden alleen op handelsdagen uitgevoerd.&nbsp;Een handelsdag is een dag dat de beurs open is. In weekenden en op feestdagen is de beurs gesloten, dit zijn géén
                                                                handelsdagen. Ook hangt de duur van het verwerken van uw opdracht af van het moment waarop u deze op een handelsdag invoert. Voor sommige fondsen kan een extra handelsdag gelden, omdat in
                                                                een andere tijdszone wordt belegd.&nbsp;</p>

                                                            <ul>
                                                                <li>Voert u uw aan- verkoopopdracht voor 12:00 uur in?&nbsp;Dan verwerken wij uw opdracht tegen de slotkoers van deze handelsdag. De aan- of verkoop is de volgende dag rond 12:30 uur zichtbaar
                                                                    op uw beleggingsrekening.
                                                                </li>
                                                                <li>Voert u uw aan- of verkoopopdracht na 12:00 uur in?&nbsp;In dit geval verwerken wij uw opdracht tegen de slotkoers van de volgende handelsdag. De aan- of verkoop is de dag daarna rond 12:30
                                                                    uur zichtbaar op uw beleggingsrekening. Een opdracht op vrijdag na 12:00 uur wordt dus verwerkt tegen de slotkoers van maandag. En is dinsdag rond 12:30 uur zichtbaar op uw beleggingsrekening
                                                                    bij Aegon.</li>
                                                            </ul>
                                                            Het is niet mogelijk aan- en verkoopopdrachten te geven via de Mijn Aegon app.</div>
                                                        <div class="question-vote clearfix">
                                                            <div class="feedback-combine clearfix">
                                                                <div class="feedback-title">Heeft dit antwoord u geholpen?</div>
                                                                <div class="feedback-on">
                                                                    <div class="rate-widget-data">
                                                                        <div class="rate-widget-1 rate-widget clear-block rate-average rate-widget-thumbs_up_down rate-LjxwVJ2xqFbBX1HNoSwCxrLCEMWPZRa4b83c5UWicZQ rate-node-34675-1-3 rate-processed" id="rate-node-34675-1-3--3">
                                                                            <ul>
                                                                                <li class="thumb-up">
                                                                                    <span class="rate-button rate-thumbs-up-down-btn-up" id="rate-button-15">Ja</span>
                                                                                    <div class="percent">34%</div>
                                                                                </li>
                                                                                <li class="thumb-down">
                                                                                    <span class="rate-button rate-thumbs-up-down-btn-down" id="rate-button-16">Nee</span>
                                                                                    <div class="percent">66%</div>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="contact-text">
                                                                <p>Heeft u een vraag over uw eigen product? Dan kunt u
                                                                    <a href="/node/29170">inloggen</a>, een
                                                                    <a href="/node/30335">e-mail sturen</a> of
                                                                    <a href="/node/29497">bellen met Aegon</a>.</p>
                                                            </div>
                                                            <div class="feedback-data-form">
                                                                <form class="feedback_form" action="/lpa/testmagesh" method="post" id="faq-feedback-form" accept-charset="UTF-8">
                                                                    <div>
                                                                        <input class="feedback-faqpath" type="hidden" name="feedback_faqpath" value="/lpa/feedback_faq">
                                                                        <div class="feedback-response">Bedankt voor uw reactie. Wilt u aangeven waarom het antwoord u niet geholpen heeft? Zo kunnen wij het antwoord op de vraag verbeteren.</div>
                                                                        <div class="form-item form-type-textarea form-item-feedback">
                                                                            <label for="edit-feedback">Uw feedback </label>
                                                                            <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea">
                                                                                <textarea class="feedback form-textarea" id="edit-feedback" name="feedback" cols="60" rows="5"></textarea>
                                                                                <div class="grippie"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-item form-type-textfield form-item-mail">
                                                                            <label for="edit-mail">Mogen wij contact met u opnemen indien er vragen zijn over uw feedback? Zo ja, vul dan hier uw e-mailadres in: </label>
                                                                            <input class="feedback_mail input-xlarge form-text" type="text" id="edit-mail" name="mail" value="" maxlength="128">
                                                                        </div>
                                                                        <div class="submit_feedback">
                                                                            <span>
                                                                                <a href="#anchor" class="button arrow">Verstuur</a>
                                                                            </span>
                                                                        </div>
                                                                        <input class="element-invisible form-submit" type="submit" id="edit-submit--3" name="op" value="Submit">
                                                                        <input type="hidden" name="form_build_id" value="form-J79hQT1EnUUBYu-jEVqI_Htvzy3DEX-Hv0-4aIWXIBg">
                                                                        <input type="hidden" name="form_token" value="3862k1O8bKlWWz3-Una1HvYaO4e4P2loThyDg1Aq7_Y">
                                                                        <input type="hidden" name="form_id" value="faq_feedback_form">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                            <div class="feedback-data-result"></div>
                                                            <div class="feedback-on-message">Bedankt voor uw reactie.</div>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="field-item">
                                            <div class="ds-1col node node-faq view-mode-element_view  clearfix">
                                                <label class="question span12">
                                                    <input type="radio" value="0" name="show">
                                                    <div class="field-faq-question title" node-id="34678" data-tealium="faq-title">Hoe kan ik geld overboeken van mijn Aegon Sparen?</div>
                                                    <div class="field-faq-answer answer" id="field-faq-answer-34678">
                                                        <div class="faq-answer-inner">
                                                            <p>
                                                                <b>U boekt uw&nbsp;geld over via Mijn Aegon </b>
                                                                <br>U gaat hiervoor naar uw spaarrekening in&nbsp;
                                                                <a href="https://www.aegon.nl/mijnaegon/mijnbank" target="_blank">Mijn Aegon</a>.&nbsp;</p>

                                                            <ul>
                                                                <li>U klikt op het tabblad ‘Overboeken’. Op
                                                                    <b>
                                                                        <a href="http://www.aegon.nl/particulier/klantenservice/hoe-kan-ik-geld-overboeken-van-mijn-aegon-sparen" target="_blank">deze pagina</a>
                                                                    </b> ziet u waar u dit tabblad vindt.</li>
                                                                <li>Vul hier het gewenste bedrag in&nbsp;</li>
                                                                <li>U klikt tenslotte op ‘Controleren’ en ‘Bevestigen’</li>
                                                            </ul>

                                                            <p>
                                                                <br>
                                                                <b>Overboeken kan ook via de Mijn Aegon app&nbsp;</b>
                                                                <br>U logt in op uw
                                                                <a href="https://www.aegon.nl/particulier/klantenservice/mijn-aegon-app-snel-toegang-tot-mijn-aegon" target="_blank">Mijn Aegon app</a>&nbsp;met uw pincode. Daarna kiest u de rekening waarvan
                                                                u wilt overboeken. U klikt op ‘Overboeken’ en vult de gegevens van uw overboeking in.&nbsp;
                                                                <br>
                                                                <br>
                                                                <b>Wilt u overboeken naar een andere tegenrekening dan bij ons
                                                                    bekend?&#8203;</b>
                                                                <br>Hoe u de tegenrekening wijzigt vindt u in de Veelgestelde vraag&nbsp;
                                                                <a href="https://www.aegon.nl/particulier/klantenservice/veelgestelde-vragen/hoe-wijzig-ik-mijn-tegenrekening-bij-aegon-bank-voor-mijn-spaar-beleggingsproduct" target="_blank">Hoe wijzig ik mijn tegenrekening bij Aegon Bank voor mijn
                                                                    spaar- of beleggingsproduct?</a>.</p>
                                                        </div>
                                                        <div class="question-vote clearfix">
                                                            <div class="feedback-combine clearfix">
                                                                <div class="feedback-title">Heeft dit antwoord u geholpen?</div>
                                                                <div class="feedback-on">
                                                                    <div class="rate-widget-data">
                                                                        <div class="rate-widget-1 rate-widget clear-block rate-average rate-widget-thumbs_up_down rate-OCsv7xdkFxJIFo2RGNlv_LK5ZbhdwNAmzjaT09dco-U rate-node-34678-1-3 rate-processed" id="rate-node-34678-1-3--3">
                                                                            <ul>
                                                                                <li class="thumb-up">
                                                                                    <span class="rate-button rate-thumbs-up-down-btn-up" id="rate-button-17">Ja</span>
                                                                                    <div class="percent">28%</div>
                                                                                </li>
                                                                                <li class="thumb-down">
                                                                                    <span class="rate-button rate-thumbs-up-down-btn-down" id="rate-button-18">Nee</span>
                                                                                    <div class="percent">72%</div>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="contact-text">
                                                                <p>Heeft u een vraag over uw eigen product? Dan kunt u
                                                                    <a href="/node/29170">inloggen</a>, een
                                                                    <a href="/node/30335">e-mail sturen</a> of
                                                                    <a href="/node/29497">bellen met Aegon</a>.</p>
                                                            </div>
                                                            <div class="feedback-data-form">
                                                                <form class="feedback_form" action="/lpa/testmagesh" method="post" id="faq-feedback-form" accept-charset="UTF-8">
                                                                    <div>
                                                                        <input class="feedback-faqpath" type="hidden" name="feedback_faqpath" value="/lpa/feedback_faq">
                                                                        <div class="feedback-response">Bedankt voor uw reactie. Wilt u aangeven waarom het antwoord u niet geholpen heeft? Zo kunnen wij het antwoord op de vraag verbeteren.</div>
                                                                        <div class="form-item form-type-textarea form-item-feedback">
                                                                            <label for="edit-feedback">Uw feedback </label>
                                                                            <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea">
                                                                                <textarea class="feedback form-textarea" id="edit-feedback" name="feedback" cols="60" rows="5"></textarea>
                                                                                <div class="grippie"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-item form-type-textfield form-item-mail">
                                                                            <label for="edit-mail">Mogen wij contact met u opnemen indien er vragen zijn over uw feedback? Zo ja, vul dan hier uw e-mailadres in: </label>
                                                                            <input class="feedback_mail input-xlarge form-text" type="text" id="edit-mail" name="mail" value="" maxlength="128">
                                                                        </div>
                                                                        <div class="submit_feedback">
                                                                            <span>
                                                                                <a href="#anchor" class="button arrow">Verstuur</a>
                                                                            </span>
                                                                        </div>
                                                                        <input class="element-invisible form-submit" type="submit" id="edit-submit--3" name="op" value="Submit">
                                                                        <input type="hidden" name="form_build_id" value="form-J79hQT1EnUUBYu-jEVqI_Htvzy3DEX-Hv0-4aIWXIBg">
                                                                        <input type="hidden" name="form_token" value="3862k1O8bKlWWz3-Una1HvYaO4e4P2loThyDg1Aq7_Y">
                                                                        <input type="hidden" name="form_id" value="faq_feedback_form">
                                                                    </div>
                                                                </form>
                                                            </div>
                                                            <div class="feedback-data-result"></div>
                                                            <div class="feedback-on-message">Bedankt voor uw reactie.</div>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid" id="bc-product-top_tasks-0">
                    <div class="span6 contact-block-link-block" data-tealium="link-list">
                        <h3>link block</h3>
                        <div>
                            <div class="field field--name-field-field-url-type2 field--type-text-long field--label-hidden">
                                <div class="field-items" id="md24">
                                    <div class="field-item even">
                                        <a href="">link 1</a>
                                    </div>
                                    <div class="field-item odd">
                                        <a href="">link 2</a>
                                    </div>
                                    <div class="field-item even">
                                        <a href="">link 3</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6 contact-block-link-block" data-tealium="link-list">
                        <h3>link block</h3>
                        <div>
                            <div class="field field--name-field-field-url-type2 field--type-text-long field--label-hidden">
                                <div class="field-items" id="md25">
                                    <div class="field-item even">
                                        <a href="">link 1</a>
                                    </div>
                                    <div class="field-item odd">
                                        <a href="">link 2</a>
                                    </div>
                                    <div class="field-item even">
                                        <a href="">link 3</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="span1 gutter"></div>
</div>

Ik wil voor het eerst beleggen

Dit is tekst waar ook een link in kan zitten die veel langer is dan normaal Dit is tekst waar ook een link in kan zitten

Ik wil voor het eerst beleggen

Dit is tekst waar ook een link in kan zitten Dit is tekst waar ook een link in kan zitten
<div class="situation-element">
    <h3 class="situation-header">Ik wil voor het eerst beleggen</h3>
    <div class="situation-text">
        Dit is tekst waar ook een <a class="situation-link" href="#">link in kan zitten die veel langer is dan normaal</a> Dit is tekst waar ook een <a class="situation-link" href="#">link in kan zitten</a>
    </div>
</div>
<div class="situation-element">
    <h3 class="situation-header">Ik wil voor het eerst beleggen</h3>
    <div class="situation-text">
        Dit is tekst waar ook een <a class="situation-link" href="#">link in kan zitten</a> Dit is tekst waar ook een <a class="situation-link" href="#">link in kan zitten</a>
    </div>
</div>
Slider (jQuery-ui)
  • 0
  • 5
  • 10
<h5>Slider (jQuery-ui)</h5>

<div class="slider-container">

    <span class="range-legend">
		<ul>
			<li>0</li>
			<li>5</li>
			<li>10</li>
		</ul>
	</span>

    <div id="slider-1" class="slider1"></div>
    <input type="text" id="amount" readonly class="slider1-amount">
</div>
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
<div class="stepindicator">
    <ul>
        <li class="visited"><span>Step 1</span>
        </li>
        <li class="active"><span>Step 2</span>
        </li>
        <li><span>Step 3</span>
        </li>
        <li><span>Step 4</span>
        </li>
        <li><span>Step 5</span>
        </li>
    </ul>
</div>
<div class="sticker-circle-wrapper">
    <div class="sticker-circle">
        <div class="rating"><a href="foo">7.8</a>
        </div>
        <div class="reviews">
            <a href="foo">
                op Independer!
                <br>Bekijk de reviews
            </a>
        </div>
    </div>
</div>
Zoveel bezoekers gingen u voor in oktober:
1337
<div class="sticker-counter-wrapper">
    <div class="sticker-counter">
        <div class="counter-text">Zoveel bezoekers gingen u voor in oktober:</div>

        <div class="counter">
            1337
        </div>
    </div>
</div>
This is an additional submessage text with status style. This is an additional submessage text with error style. This is an additional submessage text with warning style.
<span class="submessages submessages--status">
  This is an additional submessage text with status style.
</span>

<span class="submessages submessages--error">
  This is an additional submessage text with error style.
</span>

<span class="submessages submessages--warning">
  This is an additional submessage text with warning style.
</span>
Omschrijving Rekeningnummer Datum
Applepie NL04 AEGO 0762 6688 06 12-01-2011
Black beans NL03 AEGO 0762 6688 06 30-04-2012
Crispy bacon NL02 AEGO 0762 6688 06 03-02-2014
Deviled Eggs NL01 AEGO 0762 6688 06 01-04-2015
Eggplant salad NL05 AEGO 0762 6688 06 11-04-2015
Fruitcake NL12 AEGO 0762 6688 06 09-11-2015
Garlic Prawns NL33 AEGO 0762 6688 06 08-09-2001
Ham and Vegatable Cobbler NL99 AEGO 0762 6688 06 05-03-2000

General purpose simple table:

Omschrijving Rekeningnummer 3 4 5 6
Applepie NL04 AEGO 0762 6688 06 12-01-2011 4 5 6
Black beans NL03 AEGO 0762 6688 06 30-04-2012 4 5 6
<!-- Using jquery Datatables plugin (www.datatables.net)  -->
<!--	<div class="doc-search-wrap">
		<span class="numberdocuments">31 documenten</span>
		<input class="search" type="text" placeholder="Zoeken" />
	</div>
	<div class="number-search-results">
	Er zijn <span class="bold">3 resultaten</span> gevonden voor "SEARCHTERM"
</div> -->

<table class="display responsive stripe no-wrap tableDemo">
    <thead>
        <tr>
            <th class="all">Omschrijving</th>
            <th class="desktop, tablet-l, tablet-p">Rekeningnummer</th>
            <th class="desktop, tablet-l, tablet-p">Datum</th>
            <th class="desktop, tablet-l, tablet-p narrow-td"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="doctitle">Applepie</td>
            <td>NL04 AEGO 0762 6688 06</td>
            <td class="date-nl">12-01-2011</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Black beans</td>
            <td>NL03 AEGO 0762 6688 06</td>
            <td class="date-nl">30-04-2012</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Crispy bacon</td>
            <td>NL02 AEGO 0762 6688 06</td>
            <td class="date-nl">03-02-2014</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Deviled Eggs</td>
            <td>NL01 AEGO 0762 6688 06</td>
            <td class="date-nl">01-04-2015</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Eggplant salad</td>
            <td>NL05 AEGO 0762 6688 06</td>
            <td class="date-nl">11-04-2015</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Fruitcake</td>
            <td>NL12 AEGO 0762 6688 06</td>
            <td class="date-nl">09-11-2015</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Garlic Prawns</td>
            <td>NL33 AEGO 0762 6688 06</td>
            <td class="date-nl">08-09-2001</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
        <tr>
            <td class="doctitle">Ham and Vegatable Cobbler</td>
            <td>NL99 AEGO 0762 6688 06</td>
            <td class="date-nl">05-03-2000</td>
            <td class="narrow-td">
                <a href="#" class="icon icon-pdf"></a>
            </td>
        </tr>
    </tbody>
</table>

<p>General purpose simple table:</p>

<table class="resp_cust_tables">
    <thead>
        <tr>
            <th class="desktop tablet-l tablet-p mobile-l mobile-p">Omschrijving</th>
            <th class="desktop tablet-l tablet-p mobile-l">Rekeningnummer</th>
            <th class="desktop tablet-l tablet-p">3</th>
            <th class="desktop tablet-l">4</th>
            <th class="desktop">5</th>
            <th class="none">6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Applepie</td>
            <td>NL04 AEGO 0762 6688 06</td>
            <td>12-01-2011</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Black beans</td>
            <td>NL03 AEGO 0762 6688 06</td>
            <td>30-04-2012</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>

    </tbody>
</table>
<label for="text-input">Label text</label>
<input type="text" id="text-input" tabindex="1" placeholder="Type here" />
<label for="textarea">Label text</label>
<textarea name="" id="" cols="30" rows="10" tabindex="2" placeholder="Type here"></textarea>