<div class="dso-example-wrapper">
    <div class="dso-example-text">
        <h2>Buttons in sectieberichten</h2>
    </div>
    <div class="dso-example">
        <table class="table">
            <caption>Verschijningsvormen van buttons in sectieberichten (<code>.alert</code>).</caption>
            <thead>
                <tr>
                    <th scope="col">Beschrijving</th>
                    <th scope="col">Weergave</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Waarschuwing</td>
                    <td class="plain-content">
                        <div class="alert alert-warning" role="alert">

                            <div class="dso-rich-content">
                                <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
                                <p><button type="button" class="btn">Zoekopdracht afbreken</button></p>
                            </div>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Info</td>
                    <td class="plain-content">
                        <div class="alert alert-info" role="alert">

                            <div class="dso-rich-content">
                                <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
                                <p><button type="button" class="btn">Ok</button></p>
                            </div>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Fout</td>
                    <td class="plain-content">
                        <div class="alert alert-danger" role="alert">

                            <div class="dso-rich-content">
                                <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
                                <p><button type="button" class="btn">Ok</button></p>
                            </div>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Succes</td>
                    <td class="plain-content">
                        <div class="alert alert-success" role="alert">

                            <div class="dso-rich-content">
                                <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
                                <p><button type="button" class="btn">Hoera</button></p>
                            </div>

                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="dso-example-wrapper">
  <div class="dso-example-text">
    <h2>Buttons in sectieberichten</h2>
  </div>
  <div class="dso-example">
    <table class="table">
      <caption>Verschijningsvormen van buttons in sectieberichten (<code>.alert</code>).</caption>
      <thead>
        <tr>
          <th scope="col">Beschrijving</th>
          <th scope="col">Weergave</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Waarschuwing</td>
          <td class="plain-content">
            {{> '@alert' modifier='warning' message='
              <div class="dso-rich-content">
                <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
                <p><button type="button" class="btn">Zoekopdracht afbreken</button></p>
              </div>
            '}}
          </td>
        </tr>
        <tr>
          <td>Info</td>
          <td class="plain-content">
            {{> '@alert' modifier='info' message='
              <div class="dso-rich-content">
                <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
                <p><button type="button" class="btn">Ok</button></p>
              </div>
            '}}
          </td>
        </tr>
        <tr>
          <td>Fout</td>
          <td class="plain-content">
            {{> '@alert' modifier='danger' message='
              <div class="dso-rich-content">
                <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
                <p><button type="button" class="btn">Ok</button></p>
              </div>
            '}}
          </td>
        </tr>
        <tr>
          <td>Succes</td>
          <td class="plain-content">
            {{> '@alert' modifier='success' message='
              <div class="dso-rich-content">
                <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
                <p><button type="button" class="btn">Hoera</button></p>
              </div>
            '}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
/* No context defined for this component. */
  • Handle: @buttons-in-alerts
  • Preview:
  • Filesystem Path: components/_previews/_buttons-in-alerts/buttons-in-alerts.hbs
  • References (1): @alert

There are no notes for this item.