IRMA css

IRMA css

Source: src/examples/helpers.scss, line 1

1.1 Helpers

The IRMA form has a notification area for non-state errors that occur outside the disclosure flow. We call these "helpers", and they're supposed to give the user hints about known issues or point to specific resources to help the user along.

You can trigger these helpers to show in each and every example on this page.

Trigger helper:

<section class="irma-web-form">
  <header class="irma-web-header irma-web-show-helper">
    <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
    <section class="irma-web-helper">
      <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
    </section>
  </header>
  <section class="irma-web-content">
  </section>
</section>

Source: src/examples/happy-path.scss, line 1

1.2 Happy path

This is what the entire flow should look like if everything works as intended.

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

Volg de instructies in de IRMA app

Gelukt!

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content" data-animate>
      <section class="irma-web-centered" data-duration="2000">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
      <section class="irma-web-centered" data-duration="5000">
        <img class="irma-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
      </section>
      <section class="irma-web-centered" data-duration="5000">
        <div class="irma-web-waiting-for-user-animation"></div>
        <p>Volg de instructies in de IRMA app</p>
      </section>
      <section class="irma-web-centered" data-duration="2000">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

Vul de koppelcode in die in jouw IRMA-app verschijnt.

Annuleer

Volg de instructies in de IRMA app

Gelukt!

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content" data-animate>
      <section class="irma-web-centered" data-duration="2000">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
      <section class="irma-web-centered" data-duration="5000">
        <img class="irma-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
      </section>
      <section class="irma-web-centered" data-duration="5000">
        <form class="irma-web-pairing-form" onsubmit="alert('Input logic is disabled for this example')">
          <p>Vul de koppelcode in die in jouw IRMA-app verschijnt.</p>
          <div class="irma-web-pairing-code">
            <input inputmode="numeric" pattern="\d" maxlength="1" required oninput="alert('Input logic is disabled for this example')" />
            <input inputmode="numeric" pattern="\d" maxlength="1" required oninput="alert('Input logic is disabled for this example')" />
            <input inputmode="numeric" pattern="\d" maxlength="1" required oninput="alert('Input logic is disabled for this example')" />
            <input inputmode="numeric" pattern="\d" maxlength="1" required oninput="alert('Input logic is disabled for this example')" />
          </div>
          <button type="submit">
            Volgende
          </button>
          <p><a>Annuleer</a></p>
        </form>
      </section>
      <section class="irma-web-centered" data-duration="5000">
        <div class="irma-web-waiting-for-user-animation"></div>
        <p>Volg de instructies in de IRMA app</p>
      </section>
      <section class="irma-web-centered" data-duration="2000">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red; margin: 0 auto;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content" data-animate>
      <section class="irma-web-centered" data-duration="2000">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
      <section class="irma-web-centered" data-duration="3000">
        <button class="irma-web-button">Open IRMA-app</button>
        <p><a href="#">Toon QR code</a></p>
      </section>
      <section class="irma-web-centered" data-duration="2000">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>

Source: src/examples/states.scss, line 1

1.3 States

These examples show the different states that the disclosure flow can move through.

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Eén moment alsjeblieft

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-loading-animation"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <p>Eén moment alsjeblieft</p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <img class="irma-web-qr-code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADOElEQVRIx+2XP2rlMBDGx6hQE+z2FQJdQ2miq+QINmmDZfPaYF/gQa6iNNE1BCpea5NGC8Kzo3WSYtlkkdtdFQb/DPoz8+mbMcA/PSRuGuTWOPSds5gqRF+MBdQgw4w2hIlbkKOFA9hMXAYctE/GQmKji4cwnFIzIojuBTF1f8Uc6l4RsTpcqkMYag6p77UXoFR6rD5PWYApsOoqukkF0b2qcOk+412AaWgM88S93BQEXD6zXIDlL4KTxtTqiM/r+waLMDwspJOhBwTaGw2noBjLMyUNl85KNmKEe3MEs6cKeZgAkjDoAGpl/Tf4bdLXVA0q4bqpgFmfxRjMwGnuWoFcrcZ8ZXw5bnvKzrpwmeAWkYKjy7FcWpJ9X2uUg8orqQOYvW36JJqFeza+kmxJv1COcSTP6FuObEXHLg2l6ACeI0/dpAUOt5H5fg/VF1jiijxVqwseKkeBhV0nRVg8kByzoIJoNTJcdDyAb1qIvq2BUrTxgOsuzUJMQeBh6DWjwIJg8xEs31a8irpzPqwxZ2aXfRmmufFEh1OI66sOz4gfSxZgeBhUxHVSnmRPjtpy5YuxaCZF8V4p3iaSWD9s/c+YFK1Pcly0l8sdh8eW63IszxRYpJtGRSDq9Ghwd80iLMwC1+xVIdDcLDVoD2AwpFgAzsKg6EHFzRdjlqpI1ltF6ev8bY7qAD5v+ur7XgFb7jRhi+VY3FBxTd2WHxiT6N7lU4Tl22xBVPnajK9K3LfwLabjXIUZHeD6w3k5wC77MvxUK0k6USGQNNl5jg7K8XnhMQw1WRi+WP9o3G5hRZhmc9QVjFb6KtICdOfLsXyC7Fzkv7jcAWlfYzlmQ614mEeLQHPTBuNeL4uwzB0JGxeQoiWdPKPb4/0Fnjd+ClPjIIyk0UtlYzlmS4VUhidgWd/h0jhdjuGmsVefLYj8H0NAjAcwmS3KzVifW258XriGYkwvZDxtY4McdBT3nYNy/KthpU5JeZGNh3zQHcBm0jG1VBQTNazyYj6crRArKtEzBjA/LPX+oL/HnLoCpL+U5oX0OX9YbxGGOu+kiYwNd9wL89nyF+CcE8nWkXRqqFF/P00h/j9+Hz8BKgnu5v9Z8jEAAAAASUVORK5CYII="/>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <button class="irma-web-button">Open IRMA-app</button>
        <p><a href="#">Toon QR code</a></p>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Vul de koppelcode in die in je IRMA-app verschijnt.

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <form class="irma-web-pairing-form" id="states-pairing-form">
          <p>Vul de koppelcode in die in je IRMA-app verschijnt.</>
          <div class="irma-web-pairing-code">
            <input inputmode="numeric" pattern="\d" maxlength="1" required />
            <input inputmode="numeric" pattern="\d" maxlength="1" required />
            <input inputmode="numeric" pattern="\d" maxlength="1" required />
            <input inputmode="numeric" pattern="\d" maxlength="1" required />
          </div>
          <div class="irma-web-pairing-loading-animation" style="visibility: hidden">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
          </div>
          <input type="submit" style="display: none" />
          <script type="application/javascript">
            let form = document.querySelector('#states-pairing-form');
            let inputFields = form.querySelectorAll('#states-pairing-form .irma-web-pairing-code input');
            inputFields.forEach(field => {
              field.onkeydown = (e) => {
                e.target.prevValue = e.target.value;
                if (e.key != 'Enter') e.target.value = '';
              };
              field.onkeyup = (e) => {
                let prevField = e.target.previousElementSibling;
                if (prevField && e.key == 'Backspace' && e.target.value === e.target.prevValue) {
                  prevField.value = '';
                  prevField.focus();
                }
              };
              field.oninput = (e) => {
                let nextField = e.target.nextElementSibling;
                if (!nextField || !e.target.checkValidity()) {
                  e.target.form.querySelector('input[type=submit]').click();
                } else {
                  nextField.focus();
                }
              };
              field.onfocus = (e) => {
                if (!e.target.value) {
                  e.preventDefault();
                  e.target.form.querySelector('input:invalid').focus();
                }
              };
            });
            inputFields[0].parentElement.onclick = (e) => {
              if (e.target.tagName !== 'INPUT') {
                let firstInvalidField = form.querySelector('input:invalid');
                if (firstInvalidField) firstInvalidField.focus();
              }
            };
            form.onsubmit = (e) => {
              e.preventDefault();
              let code = Array.prototype.map.call(inputFields, f => {
                f.disabled = true;
                return f.value;
              }).join('');
              e.target.querySelector('.irma-web-pairing-loading-animation').style.visibility = 'visible';
              setTimeout(() => {
                e.target.reset();
                inputFields.forEach(f => f.disabled = false);
                inputFields[0].focus();
                e.target.querySelector('p').innerHTML = `De ingevoerde koppelcode ${code} komt niet overeen met de code in jouw IRMA-app. Probeer het opnieuw.`;
                e.target.querySelector('.irma-web-pairing-loading-animation').style.visibility = 'hidden';
              }, 500);
            };
          </script>
        </form>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Volg de instructies in de IRMA app

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-waiting-for-user-animation"></div>
        <p>Volg de instructies in de IRMA app</p>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen

Opnieuw proberen

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-forbidden-animation"></div>
        <p>We hebben de attributen niet ontvangen. Het spijt ons, maar dan kunnen we je niet inloggen</p>
        <p><a href="#">Opnieuw proberen</a></p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-clock-animation"></div>
        <p>Sorry! We hebben te lang<br/>niks van je gehoord</p>
        <p><a href="#">Opnieuw proberen</a></p>
      </section>
    </section>
  </section>
</section>
<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-forbidden-animation"></div>
        <p>Sorry! Er is een fout opgetreden</p>
        <p><a href="#">Opnieuw proberen</a></p>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Het spijt ons, maar je browser voldoet niet aan de minimale eisen

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-forbidden-animation"></div>
        <p>Het spijt ons, maar je browser voldoet niet aan de minimale eisen</p>
      </section>
    </section>
  </section>
</section>

Example

Ga verder met

Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.

Gelukt!

<section class="irma-web-center-child" style="/** Parent styles **/ width: 100%; height: 700px; border: 2px solid red;">
  <section class="irma-web-form">
    <header class="irma-web-header">
      <p>Ga verder met <i class="irma-web-logo">IRMA</i></p>
      <section class="irma-web-helper">
        <p>Kom je er niet uit? Kijk dan eerst eens op <a href="https://irma.app/">de website van IRMA</a>.</p>
      </section>
    </header>
    <section class="irma-web-content">
      <section class="irma-web-centered">
        <div class="irma-web-checkmark-animation"></div>
        <p>Gelukt!</p>
      </section>
    </section>
  </section>
</section>