Source: components/index.scss, line 1
With some text and stuff
Source: components/irma-button.scss, line 1
5.1 IRMA button
A button to press to launch the disclosure flow in the IRMA app (locally on a mobile device)
Example
<button class="irma-web-button">
Open IRMA app
</button>
<a href="#" class="irma-web-button">
Open IRMA app
</a>Source: components/irma-form.scss, line 1
5.2 IRMA 'login form'
A place to nicely show the different states of the IRMA disclosure flow.
Trigger helper:
Example
Inloggen met IRMA
Kom je er niet uit? Kijk dan eerst eens op de website van IRMA.
<section class="irma-web-form">
<header class="header">
<p>Inloggen met <i class="irma-web-logo">IRMA</i></p>
<section class="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="content">
<section class="centered">
<button>Some action here</button>
<p>With some text <a href="#">and stuff</a></p>
</section>
</section>
</section>Source: components/irma-logo.scss, line 1
5.3 IRMA logo
Change an element into the IRMA logo
Example
<div class="irma-web-logo" style="width: 70px; height: 60px;"></div>
<i class="irma-web-logo" style="width: 70px; height: 60px;"></i><br/>
<i class="irma-web-logo" style="width: 200px; height: 160px;"></i>Source: components/qr-code.scss, line 1
5.4 QR code
Styling to apply to the QR code image
Example
<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="/>