Source: src/examples/index.scss, line 1
Source: src/examples/index.scss, line 1
Source: src/examples/helpers.scss, line 1
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:
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
<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
This is what the entire flow should look like if everything works as intended.
Source: src/examples/happy-path.scss, line 32
Ga verder met IRMA
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>
Source: src/examples/happy-path.scss, line 67
Ga verder met IRMA
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">
<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>
Source: src/examples/happy-path.scss, line 117
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
Eén moment alsjeblieft
Gelukt!
<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
These examples show the different states that the disclosure flow can move through.
Source: src/examples/states.scss, line 10
Ga verder met IRMA
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>
Source: src/examples/states.scss, line 34
Ga verder met IRMA
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>
Source: src/examples/states.scss, line 58
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
<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>
Source: src/examples/states.scss, line 81
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
<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>
Source: src/examples/states.scss, line 105
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
<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>
Source: src/examples/states.scss, line 192
Ga verder met IRMA
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>
Source: src/examples/states.scss, line 216
Ga verder met IRMA
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
<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>
Source: src/examples/states.scss, line 241
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
Sorry! We hebben te lang
niks van je gehoord
<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>
Source: src/examples/states.scss, line 266
Ga verder met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
Sorry! Er is een fout opgetreden
<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>
Source: src/examples/states.scss, line 291
Ga verder met IRMA
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>
Source: src/examples/states.scss, line 315
Ga verder met IRMA
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>