DSO Toolkit homepage

Banner

Banners verschijnen helemaal bovenaan het scherm en verschuiven de inhoud eronder. Ze laten algemene meldingen zien over het product of systeem, maar niet over specifieke gebruikersacties.

Ze blijven staan totdat de gebruiker ze verwijdert, of als de status die de banner veroorzaakte is opgelost. Banners kunnen optioneel een button of link bevatten, bijvoorbeeld naar meer informatie. Er mag slechts één banner tegelijk te zien zijn.

Technische opmerkingen

Om de content in een banner goed te tonen, gelden de volgende voorwaarden:

  • een class .dso-rich-content op de omringende <div>
  • een <h2>-heading met een indicatie van ‘Storingsmelding:’ of ‘Onderhoudsmelding:’
  • een <p>-tag om de paragrafen

Wanneer te gebruiken

Gebruik een banner om een status van het product of systeem te laten zien die niet specifiek met een taak van de gebruiker te maken heeft.

Hoe te gebruiken

  • Plaats banners altijd bovenaan het scherm.
  • Bedek andere inhoud niet met een bannermelding.
  • Banners zijn niet ‘sticky’ en scrollen mee met de inhoud op de pagina.
  • Laat slechts één banner per keer zien.

Gedrag en toegankelijkheid

Banners blijven staan totdat de gebruiker ze verwijdert of als de status, die de banner veroorzaakte, is opgelost. Banners hebben altijd een ARIA role="alert", zodat een screenreader ze meteen voorleest wanneer ze verschijnen. Screenreaders en andere hulptechnologie starten vaak bij de <h1>, dus zonder alert role worden ze gemist.

Component in context

Nog aanpassen

Bronvermelding

<!-- 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>&lt;div&gt;</code></li>
                        <li>een <code>&lt;p&gt;</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>
<!-- Banner With Headings -->
<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 <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>
                    <h2>Dit is een H2</h2>
                    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
                    <h3>Dit is een H3</h3>
                    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
                    <h4>Dit is een H4</h4>
                    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
                    <h5>Dit is een H5</h5>
                    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
                    <h6>Dit is een H6</h6>
                    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</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>
<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>&lt;div&gt;</code></li> <li>een <code>&lt;p&gt;</code>-tag om
  paragrafen</li> </ul>

/* Banner With Headings */
__title: banner with headings
modifier: danger
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>

  <h2>Dit is een H2</h2>

  <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende
  informatie of tips.</p>

  <h3>Dit is een H3</h3>

  <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende
  informatie of tips.</p>

  <h4>Dit is een H4</h4>

  <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende
  informatie of tips.</p>

  <h5>Dit is een H5</h5>

  <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende
  informatie of tips.</p>

  <h6>Dit is een H6</h6>

  <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende
  informatie of tips.</p>
status: warning