Widgets

Communicatievoorkeuren

    • Productinformatie en voorwaarden
    • Officiële productdocumentatie, productwijzigingen en jaaroverzichten
    • bij voorkeur ontvangen per post
    • Notificaties over uw producten
    • Updates bij melden van een schade of wanneer er een document klaar staat.
    • ontvangen per email
    • ontvangen per sms
    • Maandelijkse nieuwsbrief
    • ontvangen per email
    • Tips en aanbiedingen
    • ontvangen per email
    • ontvangen per post
    • ontvangen per telefoon
    • Aanbiedingen op maat
    • Op basis van uw producten en situatie krijgt u relevante aanbiedingen en tips
    • ontvangen per email
    • ontvangen per sms
    • Kennisdeling
    • Ontvang email-enquêtes voor het verbeteren van Aegon's dienstverlening
    • Deelnemen aan paneldiscussies bij Aegon
<section id="communication_preferences" class="communication_preferences container_12">

    <h3 class="row-fluid"><span class="span4">Communicatievoorkeuren</span><span class="span8 hidden-mobile"></span></h3>

    <ul class="row-fluid">
        <li class="data span12">

            <div class="details container_12">
                <ul class="horizontal visible row-fluid">
                    <li class="label span12">
                        Productinformatie en voorwaarden
                    </li>
                    <li class="span12">Officiële productdocumentatie, productwijzigingen en jaaroverzichten</li>
                    <li class="value span12 on">bij voorkeur ontvangen per post</li>
                </ul>
            </div>

            <div class="details container_12">
                <ul class="horizontal visible digital row-fluid">
                    <li class="label span12">
                        Notificaties over uw producten
                    </li>
                    <li class="span12">Updates bij melden van een schade of wanneer er een document klaar staat.</li>
                    <li class="value span12 on">ontvangen per email</li>
                    <li class="value span12 off">ontvangen per sms</li>
                </ul>
            </div>

            <div class="details container_12">
                <ul class="horizontal visible digital row-fluid">
                    <li class="span12 label">
                        Maandelijkse nieuwsbrief
                    </li>
                    <li class="value span12 on">ontvangen per email</li>
                </ul>
            </div>

            <div class="details container_12">
                <ul class="horizontal visible digital row-fluid">
                    <li class="span12 label">
                        Tips en aanbiedingen
                    </li>
                    <li class="value span12 on">ontvangen per email</li>
                    <li class="value span12 on">ontvangen per post</li>
                    <li class="value span12 on">ontvangen per telefoon</li>
                </ul>
            </div>

            <div class="details container_12">
                <ul class="horizontal visible digital row-fluid">
                    <li class="label span12">
                        Aanbiedingen op maat
                    </li>
                    <li class="span12">Op basis van uw producten en situatie krijgt u relevante aanbiedingen en tips</li>
                    <li class="value span12 on">ontvangen per email</li>
                    <li class="value span12 off">ontvangen per sms</li>
                </ul>
            </div>

            <div class="details container_12">
                <ul class="horizontal visible digital row-fluid">
                    <li class="span3 label">
                        Kennisdeling
                    </li>
                    <li class="value span12 on">Ontvang email-enquêtes voor het verbeteren van Aegon's dienstverlening</li>
                    <li class="value span12 off">Deelnemen aan paneldiscussies bij Aegon</li>
                </ul>
            </div>

        </li>
    </ul>



</section>

Communicatievoorkeuren

    • Notificaties over uw producten
    • Updates bij melden van een schade of wanneer er een document klaar staat.
    • Maandelijkse nieuwsbrief
    • Tips en aanbiedingen
    • Aanbiedingen op maat
    • Op basis van uw producten en situatie krijgt u relevante aanbiedingen en tips
    • Kennisdeling
    • Op basis van uw producten en situatie krijgt u relevante aanbiedingen en tips
<section id="communication_preferences" class="communication_preferences container_12">

    <div id="" class="">
        <!--faceless widget container with unique id, used for ajax loading-->
        <form name="communication_preferences_form">
            <h3>Communicatievoorkeuren</h3>

            <ul class="row-fluid">
                <li class="data edit span12">

                    <div class="details container_12">
                        <ul class="horizontal visible row-fluid">
                            <li class="label span12">
                                Productinformatie en voorwaarden <span class="help" title="bla bla bla"></span>
                            </li>
                            <li class="span12">Officiële productdocumentatie, productwijzigingen en jaaroverzichten</li>
                            <li class="value span12">
                                <label class="radio">
                                    <input type="radio" checked name="product" value="1" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="radio"></span>bij voorkeur ontvangen per post
                                </label>
                            </li>
                            <li class="value span12">
                                <label class="radio">
                                    <input type="radio" name="product" value="0" />
                                    <span class="radio"></span>bij voorkeur ontvangen per email
                                </label>
                            </li>
                            <li class="span12">Uw keuze geldt niet voor alle Aegon producten.</li>
                            <li class="span12"><a href="#" class="button white arrow inline">Aegon producten waarvan u altijd digitaal informatie ontvangt</a>
                            </li>
                        </ul>
                    </div>

                    <div class="details container_12">
                        <ul class="horizontal visible digital row-fluid">
                            <li class="label span12">
                                Notificaties over uw producten <span class="help" title="bla bla bla"></span>
                            </li>
                            <li class="span12">Updates bij melden van een schade of wanneer er een document klaar staat.</li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value1" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="checkbox"></span>ontvangen per email
                                </label>
                            </li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value1" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="checkbox"></span>ontvangen per sms
                                </label>
                            </li>
                        </ul>
                    </div>

                    <div class="details container_12">
                        <ul class="horizontal visible digital row-fluid">
                            <li class="span12 label">
                                Maandelijkse nieuwsbrief <span class="help" title="bla bla blubb"></span>
                            </li>
                            <li class="value span12">

                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value1" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="checkbox"></span>ontvangen per email
                                </label>
                            </li>
                        </ul>
                    </div>

                    <div class="details container_12">
                        <ul class="horizontal visible digital row-fluid">
                            <li class="span12 label">
                                Tips en aanbiedingen <span class="help" title="bla bla blubb"></span>
                            </li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value1" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="checkbox"></span>ontvangen per email
                                </label>
                            </li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value2" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="checkbox"></span>ontvangen per post
                                </label>
                            </li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value3" />
                                    <input type="hidden" value="on" name="product1">
                                    <span class="checkbox"></span>ontvangen per telefoon
                                </label>
                            </li>
                        </ul>
                    </div>

                    <div class="details container_12">
                        <ul class="horizontal visible digital row-fluid">
                            <li class="label span12">
                                Aanbiedingen op maat <span class="help" title="bla bla bla"></span>
                            </li>
                            <li class="span12">Op basis van uw producten en situatie krijgt u relevante aanbiedingen en tips</li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value1" />
                                    <span class="checkbox"></span>ontvangen per email
                                </label>
                            </li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value2" />
                                    <span class="checkbox"></span>ontvangen per sms
                                </label>
                            </li>
                        </ul>
                    </div>

                    <div class="details container_12">
                        <ul class="horizontal visible digital row-fluid">
                            <li class="label span12">
                                Kennisdeling <span class="help" title="bla bla bla"></span>
                            </li>
                            <li class="span12">Op basis van uw producten en situatie krijgt u relevante aanbiedingen en tips</li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value1" />
                                    <span class="checkbox"></span>Ontvang email-enquêtes voor het verbeteren van Aegon's dienstverlening
                                </label>
                            </li>
                            <li class="value span12">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox1" value="value2" />
                                    <span class="checkbox"></span>Deelnemen aan paneldiscussies bij Aegon
                                </label>
                            </li>
                        </ul>
                    </div>
                </li>

            </ul>

        </form>
    </div>

</section>
Beste N.S.L.W. Exoo-Westenberg,

Uw aanvraag voor onderstaande product is verzonden aan Aegon klantenservice. Binnen 2 werkdagen krijgt u bericht van ons.

Product
Aegon Levensloop verzekering - L60387852

U krijgt een kopie van uw aanvraag per email op uw emailadres.
E-mailadres
voornaam.achternaam@email.nl
<div id="contact_form_widget" class="contact_form_widget">
    <div class="container_12">
        <div class="contact-form contact-form--thankyou row-fluid">
            <div class="span6">
                <div class="contact-form__row">
                    Beste N.S.L.W. Exoo-Westenberg,
                    <br>
                    <br> Uw aanvraag voor onderstaande product is verzonden aan Aegon klantenservice. Binnen 2 werkdagen krijgt u bericht van ons.
                    <br>
                    <br>
                    <span class="font_normal">Product</span>
                    <br> Aegon Levensloop verzekering - L60387852
                    <br>
                    <br> U krijgt een kopie van uw aanvraag per email op uw emailadres.
                    <br>
                    <span class="font_normal">E-mailadres</span>
                    <br> voornaam.achternaam@email.nl
                </div>
                <ul class="actions edit row-fluid">
                    <li class="edit span12">
                        <a class="button transparent arrow" href="#">Naar Mijn producten</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

U kunt bijvoorbeeld de hoogte van de premie wijzigen, de begunstiging aanpassen of een extra storting doen. Voordat wij de wijziging uitvoeren ontvangt u eerst een offerte van ons.

Naam
N.S.L.W. Exoo-Westenberg
Product
U heeft niets geselecteerd
E-mailadres aanpassen
dit is geen geldig e-mailadres opslaan
omschrijving is niet ingevuld
<div id="contact_form_widget" class="contact_form_widget">
    <p>U kunt bijvoorbeeld de hoogte van de premie wijzigen, de begunstiging aanpassen of een extra storting doen. Voordat wij de wijziging uitvoeren ontvangt u eerst een offerte van ons.</p>
    <div class="container_12 divider-line">
        <form class="contact-form row-fluid" enctype="multipart/form-data" action="?">
            <div class="span6 contact-form__personal-details">
                <div class="lighter_grey">
                    <div class="contact-form__detail">
                        <span class="font_normal">Naam</span>
                        <br>
                        <span>N.S.L.W. Exoo-Westenberg</span>
                    </div>

                    <div class="contact-form__detail">
                        <span class="font_normal">Product</span>
                        <br>
                        <select class="no-dd contact-form__select required" name="product">
                            <option value="">Kies het product dat u wilt wijzigen</option>
                            <option value="1">Aegon Levensloop verzekering - L60387852</option>
                        </select>
                        <span class="errorText">U heeft niets geselecteerd</span>
                    </div>
                    <div class="contact-form__detail">
                        <span class="font_normal">E-mailadres</span> <a class="icon-write-thin button transparent inline editable-field__switch" href="#">aanpassen</a>
                        <div class="contact-form__editable-field editable-field">
                            <input class="contact-form__input-text editable-field__input-text" data-validate="email" type="email" name="email" required="required" />
                            <span class="errorText">dit is geen geldig e-mailadres</span>
                            <span class="editable-field__field-value"></span>
                            <a class="icon-check-square-thin button transparent inline editable-field__save" href="#">opslaan</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="span6 contact-form__section">
                <div class="contact-form__row">
                    <label for="message" class="font_normal">Omschrijving van uw aanvraag</label>
                    <textarea id="message" class="contact-form__textarea" required="required" name="message"></textarea>
                    <span class="errorText">omschrijving is niet ingevuld</span>
                </div>
                <div class="contact-form__row">
                    <label><span class="font_normal">Een bijlage meesturen</span>
                        <br>
                        <span class="font-light">Maximaal 5Mb per bestand</span>
                    </label>
                    <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>
                </div>
                <ul class="actions edit row-fluid">
                    <li class="edit span12">
                        <button class="button orange icon-right arrow" type="submit">Aanvraag verzenden</button>
                        <button class="button transparent arrow cancel" type="button">Annuleren</button>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>
Veilig bankieren - Phishing mails.
Er is een probleem opgetreden tijdens het laden van de pagina (Fout BS107.2 - T). Onze excuses voor het ongemak. Heeft u een vraag, neemt u dan contact op met onze afdeling Klantenservice: 088 - 344 1234.
Veilig bankieren - Phishing mails.
Er is een probleem opgetreden tijdens het laden van de pagina (Fout BS107.2 - T). Onze excuses voor het ongemak. Heeft u een vraag, neemt u dan contact op met onze afdeling Klantenservice: 088 - 344 1234.
Veilig bankieren - Phishing mails.
Er is een probleem opgetreden tijdens het laden van de pagina (Fout BS107.2 - T). Onze excuses voor het ongemak. Heeft u een vraag, neemt u dan contact op met onze afdeling Klantenservice: 088 - 344 1234.

Beleggingskeuze voor uw pensioen

Kies het beleggingsprofiel dat het beste bij u past. Uw beleggingsprofiel staat standaard op "Neutraal".
Pass uw beleggingsprofiel aan:
  1. onder de tab Beleggingen
  2. met Beleggingskeuze formulier


Beleggingskeuze aanpassen
<div id="contract_overview_widget" class="contract_overview_widget">

    <div class="messages messages--warning visible">
        <span class="icon"></span>
        <div class="header">
            Veilig bankieren - Phishing mails.
        </div>
        <div class="content">
            Er is een probleem opgetreden tijdens het laden van de pagina (Fout BS107.2 - T). Onze excuses voor het ongemak. Heeft u een vraag, neemt u dan contact op met onze afdeling Klantenservice: 088 - 344 1234.
        </div>
    </div>
    <div class="messages messages--status visible">
        <span class="icon"></span>
        <div class="header">
            Veilig bankieren - Phishing mails.
        </div>
        <div class="content">
            Er is een probleem opgetreden tijdens het laden van de pagina (Fout BS107.2 - T). Onze excuses voor het ongemak. Heeft u een vraag, neemt u dan contact op met onze afdeling Klantenservice: 088 - 344 1234.
        </div>
    </div>
    <div class="messages messages--error visible">
        <span class="icon"></span>
        <div class="header">
            Veilig bankieren - Phishing mails.
        </div>
        <div class="content">
            Er is een probleem opgetreden tijdens het laden van de pagina (Fout BS107.2 - T). Onze excuses voor het ongemak. Heeft u een vraag, neemt u dan contact op met onze afdeling Klantenservice: 088 - 344 1234.
        </div>
    </div>

    <ul>
        <!--if iterations are taking place, iterate over the elements between this comment-->

        <li class="category clearfix container_12">
            <h2 class="icon-uniE607">Sparen</h2>
            <span class="submessages submessages--status">This is an additional informational text.</span>
            <span class="submessages submessages--error">This is an additional informational text.</span>
            <span class="submessages submessages--warning">Op 05-05-15 tussen 3:00 uur en 4:00 uur zal er gepland technish onderhoud plaatsviden. Hierdoor is dit product op des betreffnd tijdisp niet berekikbaar.</span>
            <ul class="horizontal row-fluid">
                <li class="arrow span6">
                    <a href="#" class="label">AEGON BeleggingsHypotheek Rekening Profiel Beleggen</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>0208979018</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
        </li>

        <li class="category clearfix container_12">
            <h2 class="icon-uniE608">Beleggen</h2>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON BeleggingsHypotheek Rekening Profiel Beleggen</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>0208979018</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
        </li>

        <li class="category clearfix container_12">
            <h2 class="icon-uniE609">Levensverzekeringen</h2>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON Fundplan</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L10112012</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON Levensloop Hypotheekverzekering</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L60387846</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON Levensloop Hypotheekverzekering</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L60387847</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON Levensloop Hypotheekverzekering</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L60387852</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON SpaarBeurs</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>K60060513</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
                <li class="span12 message">Extra column</li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">AEGON Toekomst Spaarplan</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L10175979</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
                <li class="span12 message">Extra column very long text - Extra column very long text</li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">Polis</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L10043723</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
                <li class="span12 message">Extra column</li>
            </ul>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">Polis</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Rekeningnummer: </span>L10175879</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
        </li>

        <li class="category clearfix container_12">
            <h2 class="icon-uniE609">Schadeverzekeringen</h2>
            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">Aegon Auto op Maat Personenautoverzekering</a>
                </li>
                <li class="span5">
                    <span class="value"><span class="visible-desktop">Polisnummer: </span>702418216</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
            <ul class="horizontal row-fluid pakket">
                <li class="span6"><span class="label">Pakket: Aegon Woon- &amp; VrijeTijdpakket</span>
                </li>
                <li class="span5">
                    <span class="value"> <span class="visible-desktop">Polisnummer: </span>701681229</span>
                </li>
                <li class="span12 adv"><span class="hidden-mobile">Mijn adviseur: </span>Betronic Nederland B.V.
                    <a class="icon-call" onClick="openAdvModal();"></a>
                </li>
            </ul>
            <ul class="horizontal row-fluid pakket">
                <li class="arrow span6"><a href="#" class="label">Woonhuisverzekering Woon- &amp; VrijeTijdpakket</a>
                </li>
            </ul>
            <ul class="horizontal row-fluid pakket">
                <li class="arrow span6"><a href="#" class="label">Inboedelverzekering Woon- &amp; VrijeTijdpakket</a>
                </li>
            </ul>
            <ul class="horizontal row-fluid pakket">
                <li class="arrow span6"><a href="#" class="label">Aansprakelijkheidsverzekering Woon- &amp; VrijeTijdpakket</a>
                </li>
            </ul>
            <ul class="horizontal row-fluid pakket">
                <li class="arrow span6"><a href="#" class="label">Doorlopende Reisverzekering Woon- &amp; VrijeTijdpakket</a>
                </li>
            </ul>
        </li>

        <li class="category clearfix container_12">
            <h2 class="icon-uniE60A">Pensioen</h2>

            <div class="messages messages--generic compact visible">
                <span class="icon icon-agenda-thin"></span>
                <div class="header">
                    <h3>Bekijk in vogelvlucht uw nieuwe pensioenregeling</h3>
                </div>
                <div class="content">
                    <div class="horizontal row-fluid">
                        <div class="span7">Ga direct naar het Pensioen 1-2-3 voor uw pensioenregeling bij Koninklijke Philips N.V.</div>
                        <div class="span5 cta">
                            <button class="button arrow">Naar pensioenregeling</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="messages messages--generic compact visible">
                <span class="icon icon-chart-thin"></span>
                <div class="header">
                    <h3>Maak uw eigen beleggingskeuze voor uw pensioen</h3>
                </div>
                <div class="content">
                    <div class="horizontal row-fluid">
                        <div class="span7">Wij hebben een standaard beleggingskeuze voor u gemaakt. Maak nu uw eigen keuze.</div>
                        <div class="span5 cta">
                            <button class="button arrow" onclick="openInstructions();">Beleggingskeuze aanpassen</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="messages messages--generic compact visible">
                <span class="icon icon-share-thin"></span>
                <div class="header">
                    <h3>Uw pensioen is overgedragen</h3>
                </div>
                <div class="content">
                    <div class="horizontal row-fluid">
                        <div class="span7">Uw pensioenregeling is overgedragen aan TKP. Bekijk uw pensioenregeling bij TKP</div>
                        <div class="span5 cta"><a class="button arrow" href="javascript:;">Naar TKP</a>
                        </div>
                    </div>
                </div>
            </div>

            <ul class="horizontal row-fluid">
                <li class="arrow span6"><a href="#" class="label">Mijn Pensioen</a>
                </li>
            </ul>
        </li>

        <!--end iteration comment-->
    </ul>
    <div class="container_12 hidden-tablet hidden-desktop hidden-mobile" id="instructions">
        <h2>Beleggingskeuze voor uw pensioen</h2>
        <div class="horizontal row-fluid">
            <div class="span6"><img src="/images/pension123-guide.png" style="width:90%;display: block;margin:0 auto;">
            </div>
            <div class="span6">Kies het beleggingsprofiel dat het beste bij u past. Uw beleggingsprofiel staat standaard op "Neutraal".
                <br> Pass uw beleggingsprofiel aan:
                <ol>
                    <li> onder de tab <b>Beleggingen</b>
                    </li>
                    <li> met <b>Beleggingskeuze formulier</b>
                    </li>
                </ol>
                <br>
                <br>
                <a href="#" class="button arrow">Beleggingskeuze aanpassen</a>
            </div>
        </div>
    </div>
</div>
<script>
    /* Sample function for advisor */
    function openAdvModal() {
    		var callback = function() {
    			jQuery.ajax({
    				url: '/file/example/aegon_modal.json',
    				dataType: 'json'
    			}).done(function(data) {
    				Drupal.aegonModal('update', data);
    			});
    		}
    		Drupal.aegonModal({
    			ajax: true,
    			timeOut: 3000,
    			timeOutMessage: "Contactgegevens ophalen duurt langer dan verwacht. Probeer het later nog eens."
    		}, callback);
    	}
    	/* Sample function for beleggingskeuze */
    function openInstructions() {
    	var html = jQuery('#instructions').html();
    	Drupal.aegonModal('open', {
    		body: '<div class="container_12">' + html + '</div>',
    		width: 690
    	});
    }
</script>
Link not visible if not logged in
Link visible only if logged in
Link not visible if not logged in

DIVs (with display control):
div not visible if not logged in
div visible only if logged in
div not visible if not logged in
<a href="#" class="hide-if-shw-loggedout">Link not visible if not logged in</a>
<br />
<a href="#" class="show-if-shw-loggedin">Link visible only if logged in</a>
<br />
<a href="#" class="hide-if-shw-loggedout">Link not visible if not logged in</a>
<br />

<br /> DIVs (with display control):
<br />
<div class="hide-if-shw-loggedout block">div not visible if not logged in</div>
<div class="show-if-shw-loggedin block">div visible only if logged in</div>
<div class="hide-if-shw-loggedout block">div not visible if not logged in</div>

Betaalgegevens

Tip: Here comes a title phrase summarizing the text
This is a placeholder text for whatever a content manager chooses to put at this position and it will only be shown if there is at least one product that can be converted to digital payment. And this link goes to where the user can change his payment methods
error header of some sort
some generic error message as a placeholder for real error messages, to be filled in and activated by the back end
  • Product title comes here police number
    This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.
    • Payment type label
    • payment type value
    • Payment interval label
    • payment interval value
<div id="lhfs_widget" class="lhfs_widget container_12">
    <h3 class="row-fluid">
        <span class="span4">Betaalgegevens</span>
        <span class="span8 hidden-mobile"></span>
    </h3>
    <div class="tip">
        <div class="intro">Tip: Here comes a title phrase summarizing the text</div>
        This is a placeholder text for whatever a content manager chooses to put at this position and it will only be shown if there is at least one product that can be converted to digital payment. <a>And this link goes to where the user can change his payment methods</a>
    </div>
    <a name="feedback_anchor"></a>
    <div class="success invisible">
        <h2>success header of some sort</h2> some generic success message as a placeholder for real success messages, to be filled in and activated by the back end
        <br/>
        <br/>
        <button class="button arrow">confirmation text</button>
    </div>
    <div class="lightbox"></div>
    <!--for various error messages, iterate over the .error-Div; adding the "visible" class shows the error DOM element, so you can either leave it hidden in the code, or eliminate it outright by templating-->
    <div class="error visible">
        <div class="header">error header of some sort</div>
        <!--button class="button bottom right blue arrow">detail link</button-->
        some generic error message as a placeholder for real error messages, to be filled in and activated by the back end
        <!--button class="button blue arrow">detail link</button-->
    </div>
    <!--end error iteration-->
    <ul class="products row-fluid">
        <!--if iterations are taking place, iterate over the products between this comment-->
        <li class="product data span12">
            <div class="title">Product title comes here&nbsp;<span class="police-number">police number</span>
            </div>
            <div class="description">This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.</div>
            <div class="details">
                <ul class="horizontal type row-fluid">
                    <li class="label span4">Payment type label</li>
                    <li class="value span8">
                        <span class="content">payment type value</span>
                        <span class="help"></span>
                    </li>
                </ul>
                <ul class="horizontal interval row-fluid">
                    <li class="label span4">Payment interval label</li>
                    <li class="value span8">
                        <span class="content">payment interval value</span>
                    </li>
                </ul>
                <ul class="horizontal account row-fluid">
                    <li class="label span4">Account number label</li>
                    <li class="value span8">
                        <span class="content">account number value</span>
                    </li>
                </ul>
            </div>
        </li>
        <!--end product iteration comment-->
    </ul>

</div>

Betaalgegevens

Tip: Betaal veilig en met gemak
Laat Aegon voortaan uw betalingen automatisch afschrijven.
error header of some sort
some generic error message as a placeholder for real error messages, to be filled in and activated by the back end
  • Product title comes here police number
    This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.
    • Payment type label
    • some error message visible
    • Payment interval label
    • payment interval value
  • Levensverzekering L100437230
    • Betaalwijze
    • It is mandatory to select payment method (Temporary Text)
    • Betaalperiode
    • Maandelijks
  • Levensverzekering L100437230
    • Betaalwijze
    • It is mandatory to select payment method (Temporary Text)
    • Betaalperiode
    • Maandelijks
  •  
<section id="lhfs_widget" class="lhfs_widget container_12">
    <div id="" class="">
        <!--faceless widget container with unique id, used for Drupal ajax loading-->
        <form name="modifyBetaalGegevensForm" id="lhfs">
            <h3>Betaalgegevens</h3>
            <a name="feedback_anchor"></a>
            <!--for various error messages, iterate over the .error-Div; adding the "visible" class shows the error DOM element, so you can either leave it hidden in the code, or eliminate it outright by templating-->
            <div class="tip visible">
                <div class="intro">
                    Tip: Betaal veilig en met gemak
                </div>
                Laat Aegon voortaan uw betalingen automatisch afschrijven.
            </div>
            <div class="error visible">
                <div class="header">error header of some sort</div>
                <!--button class="button bottom right blue arrow">detail link</button-->
                some generic error message as a placeholder for real error messages, to be filled in and activated by the back end
                <!--button class="button blue arrow">detail link</button-->
            </div>
            <!--end error iteration-->
            <ul class="products row-fluid">
                <!--if iterations are taking place, iterate over the elements between this comment-->
                <li class="product data span12">
                    <div class="title">Product title comes here&nbsp;<span class="police-number">police number</span>
                    </div>
                    <div class="description">This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.</div>
                    <div class="details edit container_12">
                        <ul class="horizontal type row-fluid">
                            <li class="label required span4">
                                <span class="middle-enforcer"></span>Payment type label
                            </li>
                            <li class="value span8">
                                <span class="middle-enforcer"></span>
                                <select name="paymentTypeValue" class="" required>
                                    <option value="p">payment type option 1</option>
                                    <option value="d">payment type option 2</option>
                                    <option value="i">payment type option 3</option>
                                    <option value="f">payment type option 4</option>
                                </select>
                                <span class="errorText">some error message visible</span>
                                <span class="help" title="some more or less helpful text"></span>
                            </li>
                        </ul>
                        <ul class="horizontal interval row-fluid">
                            <li class="label span4"><span class="middle-enforcer"></span>Payment interval label</li>
                            <li class="value span8">
                                <span class="middle-enforcer"></span>payment interval value
                            </li>
                        </ul>
                        <ul class="horizontal account row-fluid">
                            <li class="label required span4">
                                <span class="middle-enforcer"></span>Account number label
                            </li>
                            <li id="accountNumberField" class="value span8">
                                <input type="text" name="accountNumberValue" id="accountNumberValue" value="BLA" data-validate="iban.nl" required/>
                                <span class="errorText">some error message visible</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="product data span12">
                    <div class="title" id="polisname6">Levensverzekering&nbsp;<span id="polisnumber6" class="police-number">L100437230</span>
                    </div>
                    <div class="details edit container_12">
                        <ul class="horizontal type row-fluid visible">
                            <li class="label required span4">
                                <span class="middle-enforcer"></span> Betaalwijze
                            </li>
                            <li class="value span8">
                                <span class="middle-enforcer"></span>
                                <select id="collectionMethodCode6" name="collectionInformationList[6].collectionMethod.code">
                                    <option value="D" selected="selected">Automatische Incasso</option>
                                    <option value="I">Digitale Acceptgirokaart</option>
                                    <option value="P">Periodieke Overboeking</option>
                                </select>
                                <span class="errorText">It is mandatory to select payment method (Temporary Text)</span>
                                <span class="help" title="Afhankelijk van het type product kunt u kiezen uit een van de volgende betaalwijzen: automatische incasso (Aegon schrijft het bedrag periodiek van uw rekening af), acceptgirokaart (u ontvangt periodiek een acceptgiro per post), digitale acceptgirokaart (u ontvangt periodiek een acceptgiro per e-mail), periodieke overboeking (u maakt het het bedrag zelf periodiek via uw eigen bank aan Aegon over). Staat een betaalwijze niet vermeld bij een product, dan ondersteunt Aegon deze betaalwijze niet (meer) voor dit product."></span>
                            </li>
                        </ul>
                        <ul class="horizontal interval row-fluid visible">
                            <li class="label span4"><span class="middle-enforcer"></span> Betaalperiode</li>
                            <li class="value span8">
                                <span class="middle-enforcer" id="collectionTerm6"></span> <span class="content">Maandelijks</span>
                            </li>
                        </ul>
                        <ul class="horizontal account row-fluid visible">
                            <li class="label required span4">
                                <span class="middle-enforcer"></span> IBAN
                            </li>
                            <li class="value span8">
                                <input name="collectionInformationList[6].iban" data-validate="iban.nl" type="text" value="NL79 ABNA 0581 0267 13" maxlength="18" class="vv.iban.nl" required>
                                <span class="errorText">Uw IBAN nummer is onjuist.</span>
                                <span class="help" title="IBAN staat voor International Bank Account Number. Dit nummer wordt gebruikt om betalingen in een groot aantal Europese landen op dezelfde manier te kunnen verwerken. Het telt in Nederland 18 tekens en bestaat uit een landcode (2 letters), een controlegetal (2 cijfers), een bankcode (4 letters) en een rekeningnummer (10 cijfers)."></span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="product data span12">
                    <div class="title" id="polisname6">Levensverzekering&nbsp;<span id="polisnumber6" class="police-number">L100437230</span>
                    </div>
                    <div class="details edit container_12">
                        <ul class="horizontal type row-fluid visible">
                            <li class="label required span4">
                                <span class="middle-enforcer"></span> Betaalwijze
                            </li>
                            <li class="value span8">
                                <span class="middle-enforcer"></span>
                                <select name="collectionInformationList[7].collectionMethod.code">
                                    <option value="D" selected="selected">Automatische Incasso</option>
                                    <option value="I">Digitale Acceptgirokaart</option>
                                    <option value="P">Periodieke Overboeking</option>
                                </select>
                                <span class="errorText">It is mandatory to select payment method (Temporary Text)</span>
                                <span class="help" title="Afhankelijk van het type product kunt u kiezen uit een van de volgende betaalwijzen: automatische incasso (Aegon schrijft het bedrag periodiek van uw rekening af), acceptgirokaart (u ontvangt periodiek een acceptgiro per post), digitale acceptgirokaart (u ontvangt periodiek een acceptgiro per e-mail), periodieke overboeking (u maakt het het bedrag zelf periodiek via uw eigen bank aan Aegon over). Staat een betaalwijze niet vermeld bij een product, dan ondersteunt Aegon deze betaalwijze niet (meer) voor dit product."></span>
                            </li>
                        </ul>
                        <ul class="horizontal interval row-fluid visible">
                            <li class="label span4"><span class="middle-enforcer"></span> Betaalperiode</li>
                            <li class="value span8">
                                <span class="middle-enforcer" id="collectionTerm6"></span> <span class="content">Maandelijks</span>
                            </li>
                        </ul>
                        <ul class="horizontal account row-fluid visible">
                            <li class="label required span4">
                                <span class="middle-enforcer"></span> IBAN
                            </li>
                            <li class="value span8">
                                <span class="content">NL79 ABNA 0581 0267 13</span>
                                <span class="help" title="IBAN staat voor International Bank Account Number. Dit nummer wordt gebruikt om betalingen in een groot aantal Europese landen op dezelfde manier te kunnen verwerken. Het telt in Nederland 18 tekens en bestaat uit een landcode (2 letters), een controlegetal (2 cijfers), een bankcode (4 letters) en een rekeningnummer (10 cijfers)."></span>
                            </li>
                        </ul>
                    </div>
                </li>
                <!--end iteration comment-->
            </ul>
            <ul class="horizontal visible edit incasso row-fluid">
                <li class="label span4">
                    <span class="middle-enforcer"></span>&nbsp;
                </li>
                <li class="value span8">
                    <span class="middle-enforcer"></span>
                    <label class="checkbox required">
                        <input type="checkbox" name="colCheckInput" id="colCheckInput" value="lorem" required/>
                        <span class="checkbox"></span>
                        <span class="label">Payment incasso text</span>
                        <span class="errorText">some error message visible</span>
                    </label>
                </li>
            </ul>
            <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>
        </form>
    </div>
</section>

Mijn betalingen

Sparen


This is an error message that appears on the home page to indicate that there are outstanding payments.
  • bla
  • blubb

Let op! U heeft een betaalachterstand.

Dit heeft gevolgen voor uw product

Product Name

    Table title Table description
    Datum Premie Status Reden
    15 maart 2015 € 648,51
  • Staat nog open
  • 15 februari 2015 € 648,51
  • Autom. incasso
    15 januari 2015 € 648,51
  • Autom. incasso
    15 maart 2015 € 648,51
  • Staat nog open
  • 15 februari 2015 € 648,51
  • Autom. incasso
    15 januari 2015 € 648,51
  • Te veel betaald
  • Autom. incasso
<div id="lhfs_widget" class="lhfs_widget container_12">
    <h1>Mijn betalingen</h1>

    <h2 class="inline-h2 icon-uniE607">Sparen</h2>
    <br>
    <div class="frame inline_alert container_12">
        This is an error message that appears on the home page to indicate that there are outstanding payments.
        <ul class="horizontal visible">
            <li>bla</li>
            <li>blubb</li>
            <li class="right">
                <button type="button" class="arrow red">Betaal direct</button>
            </li>
        </ul>
    </div>

    <div class="frame inline_alert">
        <div class="top">
            <div class="euro">
                <div>€</div>
            </div>
            <div class="message">
                <h3>Let op! U heeft een betaalachterstand.</h3>
                <span>Dit heeft gevolgen voor uw product</span>
            </div>
        </div>
        <ul class="payments">
            <li class="products">
                <!-- Start iteration -->
                <ul class="horizontal visible product">
                    <li>
                        <a href="#paymentoverview" class="smooth-scroll"><span>Product name</span></a>
                    </li>
                    <li>
                        <span>A1234567890</span>
                    </li>
                    <li>
                        <span class="debit">&euro; 123,45</span>
                    </li>
                    <li class="pay">
                        <a href="#paymentoverview" class="button white smooth-scroll arrow">Bekijk</a>
                    </li>
                </ul>
                <!-- end iteration -->
                <ul class="horizontal visible">
                    <li>
                        <strong>Kunt u niet betalen?</strong>
                        <a href="#" class="contact">Neem contact op!</a>
                    </li>
                </ul>
            </li>

            </dl>
    </div>

    <h2>Product Name</h2>
    <div class="payments container_12">
        <ul class="row-fluid">
            <span class="table-title">Table title</span>
            <span class="table-desc">
			Table description
		</span>
            <table id="paymentoverview" class="display stripe no-wrap lhfsPaymentDemo">
                <thead>
                    <tr>
                        <th class="all">Datum</th>
                        <th class="desktop">Premie</th>
                        <th class="all">Status</th>
                        <th class="all">Reden</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="doctitle">15 maart 2015</td>
                        <td>&euro; 648,51</td>
                        <td class="date-nl">
                            <li class="status">
                                <span class="icon icon-open"></span>
                                <span class="open">Staat nog open</span>
                            </li>
                        </td>
                        <td>
                            <li class="method">
                                <button type="button" class="arrow red">Betaal direct</button>
                            </li>
                        </td>
                    </tr>
                    <tr>
                        <td class="doctitle">15 februari 2015</td>
                        <td>&euro; 648,51</td>
                        <td class="date-nl">
                            <li class="status">
                                <span class="icon icon-paid"></span>
                                <span class="paid">betaald</span>
                            </li>
                        </td>
                        <td>Autom. incasso</td>
                    </tr>
                    <tr>
                        <td class="doctitle">15 januari 2015</td>
                        <td>&euro; 648,51</td>
                        <td class="date-nl">
                            <li class="status">
                                <span class="icon icon-paid"></span>
                                <span class="paid">betaald</span>
                            </li>
                        </td>
                        <td>Autom. incasso</td>
                    </tr>
                    <tr>
                        <td class="doctitle">15 maart 2015</td>
                        <td>&euro; 648,51</td>
                        <td class="date-nl">
                            <li class="status">
                                <span class="icon icon-open"></span>
                                <span class="info">Staat nog open</span>
                            </li>
                        </td>
                        <td>
                            <li class="method">
                                <button type="button" class="arrow red">Betaal direct</button>
                            </li>
                        </td>
                    </tr>
                    <tr>
                        <td class="doctitle">15 februari 2015</td>
                        <td>&euro; 648,51</td>
                        <td class="date-nl">
                            <li class="status">
                                <span class="icon icon-paid"></span>
                                <span class="paid">betaald</span>
                            </li>
                        </td>
                        <td>Autom. incasso</td>
                    </tr>
                    <tr>
                        <td class="doctitle">15 januari 2015</td>
                        <td>&euro; 648,51</td>
                        <td class="date-nl">
                            <li class="status">
                                <span class="icon icon-info"></span>
                                <span class="info">Te veel betaald</span>
                            </li>
                        </td>
                        <td>Autom. incasso</td>
                    </tr>
                </tbody>
            </table>

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

Betaalgegevens

Tip: Here comes a title phrase summarizing the text
This is a placeholder text for whatever a content manager chooses to put at this position and it will only be shown if there is at least one product that can be converted to digital payment. And this link goes to where the user can change his payment methods
error header of some sort
some generic error message as a placeholder for real error messages, to be filled in and activated by the back end
  • Product title comes here police number
    This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.
    • Payment type label
    • payment type value
    • Payment interval label
    • payment interval value
  • Product title comes here police number
    This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.
    • Payment type label
    • payment type value
    • Payment interval label
    • payment interval value
<div id="lhfs_widget" class="lhfs_widget container_12">
    <h3 class="row-fluid">
        <span class="span4">Betaalgegevens</span>
        <span class="span8 hidden-mobile"></span>
    </h3>
    <div class="tip">
        <div class="intro">Tip: Here comes a title phrase summarizing the text</div>
        This is a placeholder text for whatever a content manager chooses to put at this position and it will only be shown if there is at least one product that can be converted to digital payment. <a>And this link goes to where the user can change his payment methods</a>
    </div>

    <a name="feedback_anchor"></a>
    <!--div class="lightbox"></div>
    <div class="success visible">
        <h2>success header of some sort</h2>
        some generic success message as a placeholder for real success messages, to be filled in and activated by the back end<br/><br/>
        <button class="button arrow">confirmation text</button>
    </div-->

    <!--for various error messages, iterate over the .error-Div; adding the "visible" class shows the error DOM element, so you can either leave it hidden in the code, or eliminate it outright by templating-->
    <div class="error visible">
        <div class="header">error header of some sort</div>
        <!--button class="button bottom right blue arrow">detail link</button-->
        some generic error message as a placeholder for real error messages, to be filled in and activated by the back end
        <!--button class="button blue arrow">detail link</button-->
    </div>
    <!--end error iteration-->

    <ul class="products row-fluid">
        <!--if iterations are taking place, iterate over the products between this comment-->
        <li class="product data span12">
            <div class="title">Product title comes here&nbsp;<span class="police-number">police number</span>
            </div>
            <div class="description">This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.</div>
            <div class="details">
                <ul class="horizontal type row-fluid">
                    <li class="label span4">Payment type label</li>
                    <li class="value span8">
                        <span class="content">payment type value</span>
                    </li>
                </ul>
                <ul class="horizontal interval row-fluid">
                    <li class="label span4">Payment interval label</li>
                    <li class="value span8">
                        <span class="content">payment interval value</span>
                    </li>
                </ul>
                <ul class="horizontal account row-fluid">
                    <li class="label span4">Account number label</li>
                    <li class="value span8">
                        <span class="content">account number value</span>
                    </li>
                </ul>
            </div>
        </li>

        <li class="product data span12">
            <div class="title row-fluid">Product title comes here&nbsp;<span class="police-number">police number</span>
            </div>
            <div class="description">This is a product description that appears instead of the actual product data. To switch it on and off, the "data" class needs to be removed or added from the li.product element.</div>
            <div class="details">
                <ul class="horizontal type row-fluid">
                    <li class="label span4">Payment type label</li>
                    <li class="value span8">
                        <span class="content">payment type value</span>
                    </li>
                </ul>
                <ul class="horizontal interval row-fluid">
                    <li class="label span4">Payment interval label</li>
                    <li class="value span8">
                        <span class="content">payment interval value</span>
                    </li>
                </ul>
                <ul class="horizontal account row-fluid">
                    <li class="label span4">Account number label</li>
                    <li class="value span8">
                        <span class="content">account number value</span>
                    </li>
                </ul>
            </div>
        </li>
        <!--end product iteration comment-->
    </ul>

</div>

Mobiel telefoonnummer

    • Mobiel telefoonnummer
    • 0612345678 Nummer geverifiëerd
<section id="persoonsgegevensVerficationwidget" class="personal_details_widget container_12">
    <h3 class="row-fluid"><span class="span4">Mobiel telefoonnummer</span><span class="span8 hidden-mobile">
        </span>
      </h3>
    <ul class="row-fluid">
        <li class="data span12">
            <div class="details container_12">
                <ul class="horizontal mobile row-fluid">
                    <li class="label span4">Mobiel telefoonnummer</li>
                    <li class="value span8">
                        <span class="content">0612345678</span>
                        <span class="verified-status"><span class="icon-verified"></span> Nummer geverifiëerd</span>
                    </li>
                </ul>
            </div>
        </li>
    </ul>

</section>

Mobile telefoonnummer

    • Mobile telefoonnummer
    • 0645006248
    • Nieuw mobiel nummer:
    • some error message visible
    • Herhaal nieuw mobiel nummer:
    • some error message visible
<section id="persoonsgegevensVerficationwidget" class="personal_details_widget container_12">
    <div id="" class="">
        <!--faceless widget container with unique id, used for ajax loading-->
        <form name="personal_details_form">
            <h3>Mobile telefoonnummer</h3>
            <ul class="row-fluid">
                <!--if iterations are taking place, iterate over the elements between this comment-->
                <li class="data edit span12">
                    <div class="details container_12">
                        <ul class="horizontal name row-fluid">
                            <li class="label span4">Mobile telefoonnummer</li>
                            <li class="value span8">
                                <span class="content">0645006248</span>
                            </li>
                        </ul>
                        <ul class="horizontal mobile row-fluid">
                            <li class="label span4">Nieuw mobiel nummer:</li>
                            <li class="value span8">
                                <input type="text" name="mobile" id="mobile" data-validate="mobile.nl" placeholder="0620800188" />
                                <span class="errorText">some error message visible</span>
                                <span class="help" title="bla bla bla"></span>
                            </li>
                        </ul>
                        <ul class="horizontal mobile row-fluid">
                            <li class="label span4">Herhaal nieuw mobiel nummer:</li>
                            <li class="value span8">
                                <input type="text" name="mobile2" id="mobile2" placeholder="0620800188" data-vv-corresponding="mobile" />
                                <span class="errorText">some error message visible</span>
                                <span class="help" title="bla bla bla"></span>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

        </form>
    </div>
</section>

Mijn Documenten

Lollipop jelly-o bonbon icing bonbon donut fruitcake topping. Cake chocolate bar chocolate cake cookie candy. Sweet pudding candy topping chocolate bar wafer.

Sparen

Omschrijving
Rekeningnummer
Datum
Downloaden
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013

Beleggen

Omschrijving
Rekeningnummer
Datum
Downloaden
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013

Verzekeringen

Omschrijving
Rekeningnummer
Datum
Downloaden
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013

Hypotheek

Omschrijving
Rekeningnummer
Datum
Downloaden
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013

Pensioen

FESTO BV
Omschrijving
Rekeningnummer
Datum
Downloaden
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013
Aegon Sparen
NL79 AEGO 0762 6688 06
15-04-2013
<h1>Mijn Documenten</h1>

<!-- Widget's DOM that you need to copy it in your widget -->
<div id="my_documents_widget" class="my_documents_widget">

    <div class="container_12">

        <header class="row-fluid">
            <p>
                Lollipop jelly-o bonbon icing bonbon donut fruitcake topping. Cake chocolate bar chocolate cake cookie candy. Sweet pudding candy topping chocolate bar wafer.
            </p>
        </header>

        <!-- ITERATIONS PRODUCT GROUP -->
        <article>

            <!-- Product title -->
            <h2 class="icon-uniE607">Sparen</h2>

            <!-- Iterations header -->
            <dl class="row-fluid">
                <dt class="span4">Omschrijving</dt>
                <dt class="span4">Rekeningnummer</dt>
                <dt class="span2">Datum</dt>
                <dt class="span2">Downloaden</dt>

                <!-- Iterations container -->
                <dd class="span12">

                    <!-- Iterations rows products -->
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <!-- END Iterations rows products -->

                </dd>
            </dl>

        </article>
        <!-- END ITERATIONS PRODUCT GROUP -->


        <!-- OTHER SAMPLE PRODUCT DATA -->

        <article>

            <!-- Product title -->
            <h2 class="icon-uniE608">Beleggen</h2>

            <!-- Iterations header -->
            <dl class="row-fluid">
                <dt class="span4">Omschrijving</dt>
                <dt class="span4">Rekeningnummer</dt>
                <dt class="span2">Datum</dt>
                <dt class="span2">Downloaden</dt>

                <!-- Iterations container -->
                <dd class="span12">

                    <!-- Iterations rows products -->
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <!-- END Iterations rows products -->

                </dd>
            </dl>

        </article>

        <article>

            <!-- Product title -->
            <h2 class="icon-uniE609">Verzekeringen</h2>

            <!-- Iterations header -->
            <dl class="row-fluid">
                <dt class="span4">Omschrijving</dt>
                <dt class="span4">Rekeningnummer</dt>
                <dt class="span2">Datum</dt>
                <dt class="span2">Downloaden</dt>

                <!-- Iterations container -->
                <dd class="span12">

                    <!-- Iterations rows products -->
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <!-- END Iterations rows products -->

                </dd>
            </dl>

        </article>

        <article>

            <!-- Product title -->
            <h2 class="icon-uniE60B">Hypotheek</h2>

            <!-- Iterations header -->
            <dl class="row-fluid">
                <dt class="span4">Omschrijving</dt>
                <dt class="span4">Rekeningnummer</dt>
                <dt class="span2">Datum</dt>
                <dt class="span2">Downloaden</dt>

                <!-- Iterations container -->
                <dd class="span12">

                    <!-- Iterations rows products -->
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <!-- END Iterations rows products -->

                </dd>
            </dl>

        </article>

        <article>

            <!-- Product title -->
            <h2 class="icon-uniE60A">Pensioen</h2>
            <span class="table-title">FESTO BV</span>
            <!-- Iterations header -->
            <dl class="row-fluid">
                <dt class="span4">Omschrijving</dt>
                <dt class="span4">Rekeningnummer</dt>
                <dt class="span2">Datum</dt>
                <dt class="span2">Downloaden</dt>

                <!-- Iterations container -->
                <dd class="span12">

                    <!-- Iterations rows products -->
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <dl class="row-fluid">
                        <dd class="span4"><a href="#" class="icon-uniE600">Aegon Sparen</a>
                        </dd>
                        <dd class="span4">NL79 AEGO 0762 6688 06</dd>
                        <dd class="span2">15-04-2013</dd>
                        <dd class="span2">
                            <a href="#" class="icon-pdf"></a>
                        </dd>
                    </dl>
                    <!-- END Iterations rows products -->

                </dd>
            </dl>

        </article>

        <!-- END OTHER SAMPLE PRODUCT DATA -->

    </div>

</div>

Mijn documenten Nieuw

Lollipop jelly-o bonbon icing bonbon donut fruitcake topping. Cake chocolate bar chocolate cake cookie candy. Sweet pudding candy topping chocolate bar wafer.

<h1>Mijn documenten Nieuw</h1>

<!-- Widget's DOM that you need to copy it in your widget -->
<div id="my_documents_widget" class="my_documents_widget">

    <div class="container_12">

        <header class="row-fluid">
            <p>
                Lollipop jelly-o bonbon icing bonbon donut fruitcake topping. Cake chocolate bar chocolate cake cookie candy. Sweet pudding candy topping chocolate bar wafer.
            </p>
        </header>

        <!-- ITERATIONS PRODUCT GROUP -->
        <article id="sparen">

            <h2 class="inline-h2 icon-uniE607">Sparen</h2>

            <table class="tableDemo">
                <thead>
                    <tr>
                        <th>Omschrijving</th>
                        <th>Rekeningnummer</th>
                        <th>Datum</th>
                        <th class="narrow-td"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr class="table-gradient">
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr class="table-gradient">
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr class="table-gradient">
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td class="narrow-td">
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="docs-show-all">
                Toon alles
            </div>
        </article>
        <!-- END ITERATIONS PRODUCT GROUP -->


        <!-- OTHER SAMPLE PRODUCT DATA -->

        <article id="beleggen">
            <h2 class="icon-uniE608">Beleggen</h2>
            <table class="tableDemo">
                <thead>
                    <tr>
                        <th>Omschrijving</th>
                        <th>Rekeningnummer</th>
                        <th>Datum</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article id="verzekeringen">
            <h2 class="icon-uniE609">Verzekeringen</h2>
            <table class="tableDemo">
                <thead>
                    <tr>
                        <th>Omschrijving</th>
                        <th>Rekeningnummer</th>
                        <th>Datum</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article id="hypotheek">
            <h2 class="icon-uniE60B">Hypotheek</h2>
            <table class="tableDemo">
                <thead>
                    <tr>
                        <th>Omschrijving</th>
                        <th>Rekeningnummer</th>
                        <th>Datum</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen 2</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen 3</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen 4</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <article id="pensioen">
            <h2 class="icon-uniE60A">Pensioen</h2>
            <table class="tableDemo">
                <thead>
                    <tr>
                        <th>Omschrijving</th>
                        <th>Rekeningnummer</th>
                        <th>Datum</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Aegon Sparen</a>
                        </td>
                        <td>NL79 AEGO 0762 6688 06</td>
                        <td>5-04-2013</td>
                        <td>
                            <a href="#" class="icon-pdf"></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </article>

        <!-- END OTHER SAMPLE PRODUCT DATA -->

    </div>

</div>

Uw pensioenregeling via Koninklijke Philips N.V. vanaf 12 juni 2015

Mevrouw Jansen, in dit Pensioen 1-2-3 leest u wat u wel en niet krijgt in uw pensioenregeling. Dat is belangrijk omdat u dan weet wanneer u in actie dient te komen. De volledige tekst over uw Pensioen 1-2-3 vindt u terug in Mijn documenten

67 jaar

Leeftijd waarop u uw pensioen ontvangt van deze regeling

€ 1.240

Verwachte bruto pensioenuitkering per maand van deze regeling

Klik op de symbolen voor meer informatie

Wat krijgt u wel?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*

Columnhead Columnhead Columnhead Columnhead
Text Text Text Text
Text Text Text Text
Text Text Text Text
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Normaal gesproken wordt geld elk jaar iets minder waard. U kunt met hetzelfde bedrag in 2015 iets minder kopen dan in 2014. Dat heet ‘inflatie’. Vanwege de inflatie probeert <pensioenuitvoerder> uw opgebouwde pensioen jaarlijks te indexeren. Dat wil zeggen dat het opgebouwde pensioen jaarlijks meegroeit met de algemene prijsstijging.

Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*

Head Head
2014 Text text
2013 Text text

Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*

Columnhead Columnhead Columnhead Columnhead
Text Text Text Text
Text Text Text Text
Text Text Text Text

Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*

Head Head
2014 Text text
2013 Text text

Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*

Head Head
2014 Text text
2013 Text text
Sluit Lees meer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Sluit Lees meer

Wat krijgt u niet?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Sluit Lees meer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.

Sluit Lees meer
<section id="pensioen123_widget" class="pensioen123_widget container_12">
    <div class="row-fluid">
        <div class="span12">
            <h1>
        Uw pensioenregeling via Koninklijke Philips N.V. vanaf 12 juni 2015
      </h1>
            <p>Mevrouw Jansen, in dit Pensioen 1-2-3 leest u wat u wel en niet krijgt in uw pensioenregeling. Dat is belangrijk omdat u dan weet wanneer u in actie dient te komen. De volledige tekst over uw Pensioen 1-2-3 vindt u terug in <a href="#">Mijn documenten</a>
            </p>
        </div>
    </div>
    <div class="row-fluid user-details">
        <div class="span4">
            <div class="innerbox">
                <div>
                    <h2>67 jaar</h2>
                </div>
                <div>
                    <p>Leeftijd waarop u uw pensioen ontvangt van deze regeling</p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="innerbox">
                <div>
                    <h2>€ 1.240</h2>
                </div>
                <div>
                    <p>Verwachte bruto pensioenuitkering per maand van deze regeling</p>
                </div>
            </div>
        </div>
        <div class="span4 video">
            <iframe src="https://www.youtube.com/embed/3v_s7LtMaRs" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <!-- Start product overview -->
    <div class="product-overview">
        <div class="row-fluid">
            <div class="span12">
                <div class="span8">
                    <p>Klik op de symbolen voor meer informatie</p>
                </div>
                <div class="span4">
                    <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/logo_laag1_blauw.png" alt="Pensioen123 Logo" class="logo">
                </div>
            </div>
        </div>

        <!-- Start row iteration-->
        <div class="row-fluid">
            <div class="span12">
                <div class="span6">
                    <div>
                        <p class="title">Wat krijgt u wel?</p>
                    </div>
                </div>
                <div class="tab">
                    <!-- Begin Tab !-->
                    <div class="span6">
                        <div>
                            <div class="icon" data-icon="icon1">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png">

                            </div>
                            <div class="icon" data-icon="icon2">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png">
                            </div>
                            <div class="icon" data-icon="icon1">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png">
                            </div>
                            <div class="icon" data-icon="icon2">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png">
                            </div>
                            <div class="icon" data-icon="icon1">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png">
                            </div>
                        </div>
                    </div>

                    <div class="span12 details" data-icon="icon1">
                        <div class="table">
                            <div class="image">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png" class="icon big">

                            </div>
                            <div class="description">
                                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing <strong>elit</strong>. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante
                                    eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum.
                                    Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante.
                                    Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.</p>
                                <div class="full-width">
                                    <p class="title">
                                        Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*
                                    </p>
                                    <table>
                                        <tr>
                                            <th>Columnhead</th>
                                            <th>Columnhead</th>
                                            <th>Columnhead</th>
                                            <th>Columnhead</th>
                                        </tr>
                                        <tr>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                        </tr>
                                        <tr>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                        </tr>
                                        <tr>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                        </tr>
                                    </table>
                                    <p class="footer">
                                        * Footertext Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    </p>
                                </div>
                            </div>
                            <div class="more-details">
                                <span class="title">Title</span>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                    ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                    venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                    magna.
                                </p>
                                <ul class="arrow-list">
                                    <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>
                                <div class="highlighted">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                        ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                        venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                        magna.
                                    </p>
                                </div>
                                <div class="half-width">
                                    <p>
                                        Normaal gesproken wordt geld elk jaar iets minder waard. U kunt met hetzelfde bedrag in 2015 iets minder kopen dan in 2014. Dat heet ‘inflatie’. Vanwege de inflatie probeert &lt;pensioenuitvoerder> uw opgebouwde pensioen jaarlijks te indexeren. Dat wil
                                        zeggen dat het opgebouwde pensioen jaarlijks meegroeit met de algemene prijsstijging.
                                    </p>
                                </div>
                                <div class="half-width right">
                                    <p class="title">
                                        Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*
                                    </p>
                                    <table>
                                        <tr>
                                            <th></th>
                                            <th>Head</th>
                                            <th>Head</th>
                                        </tr>
                                        <tr>
                                            <td>2014</td>
                                            <td>Text</td>
                                            <td>text</td>
                                        </tr>
                                        <tr>
                                            <td>2013</td>
                                            <td>Text</td>
                                            <td>text</td>
                                        </tr>

                                    </table>
                                    <p class="footer">
                                        * Footertext Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    </p>
                                </div>
                                <div class="full-width">
                                    <p class="title">
                                        Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*
                                    </p>
                                    <table>
                                        <tr>
                                            <th>Columnhead</th>
                                            <th>Columnhead</th>
                                            <th>Columnhead</th>
                                            <th>Columnhead</th>
                                        </tr>
                                        <tr>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                        </tr>
                                        <tr>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                        </tr>
                                        <tr>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                            <td>Text</td>
                                        </tr>

                                    </table>
                                    <p class="footer">
                                        * Footertext Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    </p>
                                </div>
                                <div class="half-width">
                                    <p class="title">
                                        Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*
                                    </p>
                                    <table>
                                        <tr>
                                            <th></th>
                                            <th>Head</th>
                                            <th>Head</th>
                                        </tr>
                                        <tr>
                                            <td>2014</td>
                                            <td>Text</td>
                                            <td>text</td>
                                        </tr>
                                        <tr>
                                            <td>2013</td>
                                            <td>Text</td>
                                            <td>text</td>
                                        </tr>

                                    </table>
                                    <p class="footer">
                                        * Footertext Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    </p>
                                </div>
                                <div class="half-width">
                                    <p class="title">
                                        Headertext lorem ipsum dolor sit amet, consectetur adipiscing elit*
                                    </p>
                                    <table>
                                        <tr>
                                            <th></th>
                                            <th>Head</th>
                                            <th>Head</th>
                                        </tr>
                                        <tr>
                                            <td>2014</td>
                                            <td>Text</td>
                                            <td>text</td>
                                        </tr>
                                        <tr>
                                            <td>2013</td>
                                            <td>Text</td>
                                            <td>text</td>
                                        </tr>

                                    </table>
                                    <p class="footer">
                                        * Footertext Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    </p>
                                </div>
                            </div>
                            <a href="#" class="close">Sluit</a>
                            <a href="#" class="more">Lees meer</a>
                        </div>
                    </div>

                    <div class="span12 details" data-icon="icon2">
                        <div class="table">
                            <div class="image">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen.png" class="icon big">
                            </div>
                            <div class="description">
                                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing <strong>elit</strong>. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante
                                    eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum.
                                    Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante.
                                    Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.</p>
                            </div>
                            <div class="more-details">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                    ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                    venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                    magna.
                                </p>
                                <ul class="arrow-list">
                                    <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>
                                <div class="highlighted">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                        ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                        venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                        magna.
                                    </p>
                                </div>
                            </div>
                            <a href="#" class="close">Sluit</a>
                            <a href="#" class="more">Lees meer</a>
                        </div>
                    </div>
                </div>
                <!-- End tab -->
            </div>
        </div>
        <!-- End row iteration-->

        <!-- Start row-->
        <div class="row-fluid">
            <div class="span12">
                <div class="span6">
                    <div>
                        <p class="title">Wat krijgt u niet?</p>
                    </div>
                </div>
                <div class="tab">
                    <div class="span6">
                        <div>
                            <div class="icon" data-icon="icon1">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen_geen.png">
                                <div class="cross"></div>
                            </div>
                            <div class="icon" data-icon="icon2">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen_geen.png">
                                <div class="cross"></div>
                            </div>
                            <div class="icon" data-icon="icon1">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen_geen.png">
                                <div class="cross"></div>
                            </div>
                            <div class="icon" data-icon="icon2">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen_geen.png">
                                <div class="cross"></div>
                            </div>
                        </div>
                    </div>

                    <div class="span12 details" data-icon="icon1">
                        <div class="table">
                            <div class="image">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen_geen.png" class="icon big">
                                <div class="cross"></div>
                            </div>
                            <div class="description">
                                <p>
                                    Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing <strong>elit</strong>. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum
                                    ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum.
                                    Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante.
                                    Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.
                                </p>
                            </div>
                            <div class="more-details">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                    ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                    venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                    magna.
                                </p>
                                <ul class="arrow-list">
                                    <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>
                                <div class="highlighted">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                        ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                        venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                        magna.
                                    </p>
                                </div>
                            </div>
                            <a href="#" class="close">Sluit</a>
                            <a href="#" class="more">Lees meer</a>
                        </div>
                    </div>

                    <div class="span12 details" data-icon="icon2">
                        <div class="table">
                            <div class="image">
                                <img src="https://s3-eu-west-1.amazonaws.com/anl-ma-staticcontent/content/pensioen123/test/arbeidsongeschiktheidspensioen_geen.png" class="icon big">
                                <div class="cross"></div>
                            </div>
                            <div class="description">
                                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing <strong>elit</strong>. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante
                                    eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum.
                                    Donec nec elementum elit. Vestibulum at lorem ut eros venenatis venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante.
                                    Praesent vel felis dictum, vehicula orci sit amet, sagittis magna.</p>
                            </div>
                            <div class="more-details">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                    ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                    venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                    magna.
                                </p>
                                <ul class="arrow-list">
                                    <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>
                                <div class="highlighted">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod posuere odio ut viverra. Etiam viverra, dolor non volutpat mattis, libero metus pellentesque nunc, sed elementum ante eros ut arcu. Donec faucibus ullamcorper scelerisque. Nullam porta
                                        ligula felis, id laoreet odio suscipit a. In aliquet ante sit amet metus tincidunt ullamcorper. Suspendisse aliquet risus eget enim tincidunt bibendum. Donec nec elementum elit. Vestibulum at lorem ut eros venenatis
                                        venenatis a vel lorem. Duis mattis eleifend augue vitae fermentum. Nulla sit amet faucibus metus, at facilisis diam. Nunc et est odio. In eget tortor ante. Praesent vel felis dictum, vehicula orci sit amet, sagittis
                                        magna.
                                    </p>
                                </div>
                            </div>
                            <a href="#" class="close">Sluit</a>
                            <a href="#" class="more">Lees meer</a>
                        </div>
                    </div>
                </div>
                <!-- End tab -->
            </div>
        </div>
        <!-- End row-->


    </div>
    <!-- End product overview desktop -->

    </div>


    <button class="button arrow">Uw totale pensioen in cijfers</button>
</section>

Naam en contact gegevens

  • This is an optional description that gives the opportunity for an introduction. Just delete if not required.
    • Naam
    • Naam content
    • Geslacht
    • Geslacht content
    • Geboorte­datum
    • Geboortedatum content
    • Woonadres
    • Woonadres content 1
      Woonadres content 2
    • Correspondentie­adress
    • Correspondentieadress content 1
      Correspondentieadress content 2
    • Telefoon
    • Telefoon content
<section id="personal_details_widget" class="personal_details_widget container_12">
    <h3 class="row-fluid"><span class="span4">Naam en contact gegevens</span><span class="span8 hidden-mobile">
        </span>
      </h3>
    <ul class="row-fluid">
        <li class="data span12">
            <div class="description">This is an optional description that gives the opportunity for an introduction. Just delete if not required.</div>
            <div class="details container_12">
                <ul class="horizontal name row-fluid">
                    <li class="label span4">Naam</li>
                    <li class="value span8">
                        <span class="content">Naam content</span>
                    </li>
                </ul>
                <ul class="horizontal gender row-fluid">
                    <li class="label span4">Geslacht</li>
                    <li class="value span8">
                        <span class="content">Geslacht content</span>
                    </li>
                </ul>
                <ul class="horizontal birthday row-fluid">
                    <li class="label span4">Geboorte&shy;datum</li>
                    <li class="value span8">
                        <span class="content">Geboortedatum content</span>
                    </li>
                </ul>
                <ul class="horizontal residential_address row-fluid">
                    <li class="label span4"><span class="middle-enforcer"></span>Woonadres</li>
                    <li class="value span8">
                        <address>
                            <span class="content">Woonadres content 1</span>
                            <br/>
                            <span class="content">Woonadres content 2</span>
                        </address>
                    </li>
                </ul>
                <ul class="horizontal correspondential_address row-fluid">
                    <li class="label span4">Correspondentie&shy;adress</li>
                    <li class="value span8">
                        <address>
                            <span class="content">Correspondentieadress content 1</span>
                            <br/>
                            <span class="content">Correspondentieadress content 2</span>
                        </address>
                    </li>
                </ul>
                <ul class="horizontal phone row-fluid">
                    <li class="label span4">Telefoon</li>
                    <li class="value span8">
                        <span class="content">Telefoon content</span>
                    </li>
                </ul>
            </div>
        </li>
    </ul>

</section>

Naam en contact gegevens

  • This is an optional description that gives the opportunity for an introduction. Just delete if not required.
    • Naam
    • Naam content
    • Geslacht
    • Geslacht content
    • Geboortedatum
    • Geboortedatum content
    • Woonadres in Nederland
    • Postcode
    • some error message visible
    • Huisnummer
    • some error message visible
    • Huisnummer­toevoeging
    • some error message visible
    • Straat
    • some error message visible
    • Plaats
    • some error message visible
    • Verhuisdatum
    • some error message visible
    • some error message visible
    • some error message visible
    • some error message visible
    • some error message visible
    • some error message visible
    • Correspondentie adres in NL
    • Postcode
    • some error message visible
    • Huisnummer
    • some error message visible
    • Huisnummertoevoeging
    • some error message visible
    • Straat
    • some error message visible
    • Plaats
    • some error message visible
    • some error message visible
    • some error message visible
    • some error message visible
    • some error message visible
    • some error message visible
    • Telefoon
    • some error message visible
<section id="personal_details_widget" class="personal_details_widget container_12">
    <div id="" class="">
        <!--faceless widget container with unique id, used for ajax loading-->
        <form name="personal_details_form">
            <h3>Naam en contact gegevens</h3>
            <ul class="row-fluid">
                <!--if iterations are taking place, iterate over the elements between this comment-->
                <li class="data edit span12">
                    <div class="description">This is an optional description that gives the opportunity for an introduction. Just delete if not required.
                    </div>
                    <div class="details container_12">
                        <ul class="horizontal name row-fluid">
                            <li class="label span4">Naam</li>
                            <li class="value span8">
                                <span class="content">Naam content</span>
                                <span class="help" title="bla bla bla"></span>
                            </li>
                        </ul>
                        <ul class="horizontal gender row-fluid">
                            <li class="label span4">Geslacht</li>
                            <li class="value span8">
                                <span class="content">Geslacht content</span>
                                <span class="help" title="some more or less helpful text"></span>
                            </li>
                        </ul>
                        <ul class="horizontal birthday row-fluid">
                            <li class="label span4">Geboortedatum</li>
                            <li class="value span8">
                                <span class="content">Geboortedatum content</span>
                                <span class="help" title="test text for the help bubble for account number plus a few more choice words so we get more than one line"></span>
                            </li>
                        </ul>
                        <!--addresses-->
                        <section class="address">
                            <!--residential address-->
                            <div class="residential">
                                <ul class="horizontal ra_NL row-fluid">
                                    <li class="label required span4">Woonadres in Nederland</li>
                                    <li class="value span8">
                                        <span class="content">
                        <label class="radio">
                            <input type="radio" checked name="ra_NL" value="1" />
                            <span class="radio"></span>Ja
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="ra_NL" value="0" />
                                            <span class="radio"></span>Nee
                                        </label>
                                        </span>
                                        <span class="help" title="some more or less helpful text"></span>
                                    </li>
                                </ul>
                                <!--residential address NL-->
                                <div class="NL">
                                    <ul class="horizontal zip row-fluid">
                                        <li class="label required span4">Postcode</li>
                                        <li class="value span8">
                                            <input type="text" name="ra_NL_zip" id="ra_NL_zip" placeholder="Postcode" required data-validate="zip.nl" rel="address-lookup" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal number row-fluid">
                                        <li class="label required span4">Huisnummer</li>
                                        <li class="value span8">
                                            <input type="text" name="ra_NL_number" id="ra_NL_number" placeholder="Huisnummer" required data-validate-restrained="integer" rel="address-lookup" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal addition row-fluid">
                                        <li class="label required span4">Huisnummer&shy;toevoeging</li>
                                        <li class="value span8">
                                            <input type="text" name="ra_NL_addition" id="ra_NL_addition" data-validate-restrained="['house-nr']" placeholder="Huisnummertoevoeging" rel="address-lookup" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal street row-fluid">
                                        <li class="label required span4">Straat</li>
                                        <li class="value span8">
                                            <input type="text" name="ra_NL_street" id="ra_NL_street" pattern="\w*" required placeholder="Straat" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal city row-fluid">
                                        <li class="label required span4">Plaats</li>
                                        <li class="value span8">
                                            <input type="text" name="ra_NL_city" id="ra_NL_city" pattern="\w*" required placeholder="Plaats" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal moving row-fluid">
                                        <li class="label required span4">Verhuisdatum</li>
                                        <li class="value span8">
                                            <input type="text" name="ra_NL_datum" id="ra_NL_datum" class="datepicker-input required" placeholder="dd-mm-jjjj" />
                                            <button type="button" class="datepicker-bttn icon-datepicker"></button>
                                            <span class="errorText">some error message visible</span>
                                        </li>
                                    </ul>
                                </div>
                                <!--/residential address NL-->
                                <!--residential address world-->
                                <div class="world">
                                    <ul class="horizontal zip row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ra_world_field1" data-validate="address.global" id="ra_world_field1" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal number row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ra_world_field2" id="ra_world_field2" pattern="\d*" placeholder="" required />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal addition row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ra_world_field3" id="ra_world_field3" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal street row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ra_world_field4" id="ra_world_field4" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal city row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ra_world_field5" id="ra_world_field5" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                </div>
                                <!--/residential address world-->
                            </div>
                            <!--/residential-->
                            <!--correspondential address-->
                            <div class="correspondential">
                                <ul class="horizontal ca_NL row-fluid">
                                    <li class="label required span4">Correspondentie adres in NL</li>
                                    <li class="value span8">
                                        <span class="content">
                                            <label class="radio">
                                                <input type="radio" name="ca_NL" value="1" />
                                                <span class="radio"></span>Ja
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="ca_NL" value="0" />
                                            <span class="radio"></span>Nee
                                        </label>
                                        </span>
                                        <span class="help" title="some more or less helpful text"></span>
                                    </li>
                                </ul>
                                <!--correspondential address NL-->
                                <div class="NL">
                                    <ul class="horizontal zip row-fluid">
                                        <li class="label required span4">Postcode</li>
                                        <li class="value span8">
                                            <input type="text" name="ca_NL_zip" id="ca_NL_zip" pattern="\w*" placeholder="Postcode" required rel="ca-address-lookup" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal number row-fluid">
                                        <li class="label required span4">Huisnummer</li>
                                        <li class="value span8">
                                            <input type="text" name="ca_NL_number" id="ca_NL_number" pattern="\d*" placeholder="Huisnummer" required rel="ca-address-lookup-" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal addition row-fluid">
                                        <li class="label required span4">Huisnummertoevoeging</li>
                                        <li class="value span8">
                                            <input type="text" name="ca_NL_addition" id="ca_NL_addition" pattern="\w*" required placeholder="Huisnummertoevoeging" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal street row-fluid">
                                        <li class="label required span4">Straat</li>
                                        <li class="value span8">
                                            <input type="text" name="ca_NL_street" id="ca_NL_street" pattern="\w*" required placeholder="Straat" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal city row-fluid">
                                        <li class="label required span4">Plaats</li>
                                        <li class="value span8">
                                            <input type="text" name="ca_NL_city" id="ca_NL_city" pattern="\w*" required placeholder="Plaats" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                </div>
                                <!--/correspondential address NL-->
                                <!--correspondential address world-->
                                <div class="world">
                                    <ul class="horizontal zip row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ca_world_field1" id="ca_world_field1" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal number row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ca_world_field2" id="ca_world_field2" pattern="\d*" placeholder="" required />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal addition row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ca_world_field3" id="ca_world_field3" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal street row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ca_world_field4" id="ca_world_field4" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                    <ul class="horizontal city row-fluid">
                                        <li class="label required span4"></li>
                                        <li class="value span8">
                                            <input type="text" name="ca_world_field5" id="ca_world_field5" pattern="\w*" required placeholder="" />
                                            <span class="errorText">some error message visible</span>
                                            <span class="help" title="some more or less helpful text"></span>
                                        </li>
                                    </ul>
                                </div>
                                <!--/correspondential address world-->
                            </div>
                            <!--/correspondential-->
                    </div>
                    <!--/address-->
                    <ul class="horizontal phone row-fluid">
                        <li class="label span4">Telefoon</li>
                        <li class="value span8">
                            <input type="text" name="phone" id="phone" data-validate="phone" placeholder="Telefoon" />
                            <span class="errorText">some error message visible</span>
                            <span class="help" title="some more or less helpful text"></span>
                        </li>
                    </ul>
    </div>
    </li>
    </ul>
    <div class="email-info">This is an optional description that gives the opportunity for an introduction. Just delete if not required.
    </div>
    </form>
    </div>
    </section>