Banner

Om de content in een banner goed te tonen, moet aan de volgende voorwaarden worden voldaan:

een class .dso-rich-content op de omringende <div>
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">
                <button type="button" title="Sluiten" class="btn btn-link"><span class="sr-only">Sluiten</span><svg class="di di-times">
                        <use href="../../dso-icons.svg#times" />
                    </svg></button>
                <div class="dso-rich-content">
                    <p>Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Warning -->
<section class="banner alert-warning" role="alert">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <button type="button" title="Sluiten" class="btn btn-link"><span class="sr-only">Sluiten</span><svg class="di di-times">
                        <use href="../../dso-icons.svg#times" />
                    </svg></button>
                <div class="dso-rich-content">
                    <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>
            </div>
        </div>
    </div>
</section>

<!-- Rich Content -->
<section class="banner alert-danger" role="alert">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <button type="button" title="Sluiten" class="btn btn-link"><span class="sr-only">Sluiten</span><svg class="di di-times">
                        <use href="../../dso-icons.svg#times" />
                    </svg></button>
                <div class="dso-rich-content">
                    <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>
            </div>
        </div>
    </div>
</section>

<section {{ className('banner', [modifier, 'alert-' + modifier]) }} role="alert">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        {% render '@button', {type: 'button', modifier: 'link', label: 'Sluiten', icon: 'times', iconOnly: true} -%}
        <div class="dso-rich-content">
          {{ message | safe }}
        </div>
      </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>