Banner
Om de content in een banner goed te tonen, moet aan de volgende voorwaarden worden voldaan:
- een class
.dso-rich-contentop de omringende<div> - een
<h2>-heading met een indicatie van ‘Storingsmelding:’ of ‘Onderhoudsmelding:’ - een
<p>-tag om de paragrafen
<!-- Default -->
<section class="banner alert-danger" role="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="dso-rich-content">
<h2>
Storingsmelding:
</h2>
<p>Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.</p>
</div>
<button type="button" class="btn btn-link"><span class="sr-only">Sluiten</span>
<dso-icon icon="times"></dso-icon>
</button>
</div>
</div>
</div>
</section>
<!-- Warning -->
<section class="banner alert-warning" role="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="dso-rich-content">
<h2>
Onderhoudsmelding:
</h2>
<p>Op <strong>zondag 8 december 2019 van 10.00 uur tot 17.00 uur</strong> vindt er onderhoud plaats aan het Omgevingsloket. <a href="#">Meer informatie</a></p>
</div>
<button type="button" class="btn btn-link"><span class="sr-only">Sluiten</span>
<dso-icon icon="times"></dso-icon>
</button>
</div>
</div>
</div>
</section>
<!-- Rich Content -->
<section class="banner alert-danger" role="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="dso-rich-content">
<h2>
Storingsmelding:
</h2>
<p>Banners zullen vaak worden ingezet voor 'one-liners', maar kunnen ook rijkere content bevatten, zoals meerdere paragrafen, en/of een geordende lijst. Zolang de markup maar aan de juiste voorschriften voldoet gaat dit prima:</p>
<ul>
<li>class <code>.dso-rich-content</code> op de omringende <code><div></code></li>
<li>een <code><p></code>-tag om paragrafen</li>
</ul>
</div>
<button type="button" class="btn btn-link"><span class="sr-only">Sluiten</span>
<dso-icon icon="times"></dso-icon>
</button>
</div>
</div>
</div>
</section>
<section {{ className('banner', [modifier, 'alert-' + modifier]) }} role="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="dso-rich-content">
<h2>
{% if modifier === "danger" -%}
Storingsmelding:
{%- endif %}
{%- if modifier === "warning" -%}
Onderhoudsmelding:
{%- endif %}
</h2>
{{ message | safe }}
</div>
{% render '@button', {type: 'button', modifier: 'link', label: 'Sluiten', icon: 'times', iconOnly: true} -%}
</div>
</div>
</div>
</section>
/* Default */
__title: danger
modifier: danger
message: >-
<p>Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een
aanvraag of melding indienen.</p>
/* Warning */
__title: warning
modifier: warning
message: >-
<p>Op <strong>zondag 8 december 2019 van 10.00 uur tot 17.00 uur</strong>
vindt er onderhoud plaats aan het Omgevingsloket. <a href="#">Meer
informatie</a></p>
/* Rich Content */
__title: rich content
modifier: danger
message: >-
<p>Banners zullen vaak worden ingezet voor 'one-liners', maar kunnen ook
rijkere content bevatten, zoals meerdere paragrafen, en/of een geordende
lijst. Zolang de markup maar aan de juiste voorschriften voldoet gaat dit
prima:</p> <ul> <li>class <code>.dso-rich-content</code> op de omringende
<code><div></code></li> <li>een <code><p></code>-tag om
paragrafen</li> </ul>