DSO Toolkit homepage

Info

Component preview opent in nieuw tabblad

Afbeeldingen worden in form .dso-info in het midden uitgelijnd

<!-- Default -->
<div class="dso-info">

    <button type="button">
        <span class="sr-only">Sluiten</span>
    </button>

    <div class="dso-rich-content">
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. <a href="#">Nullam</a> lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.</p>
        <a href="#" class="dso-primary">Primaire button</a>
        <a href="#" class="dso-secondary">Secundaire button</a>
        <a href="#" class="dso-tertiary btn-align">
            Tertiaire button
            <dso-icon icon="chevron-down"></dso-icon>
        </a>

    </div>
</div>
<!-- Static Info -->
<div class="dso-info">

    <div class="dso-rich-content">
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. <a href="#">Nullam</a> lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.</p>
        <a href="#" class="dso-primary">Primaire button</a>
        <a href="#" class="dso-secondary">Secundaire button</a>
        <a href="#" class="dso-tertiary btn-align">
            Tertiaire button
            <dso-icon icon="chevron-down"></dso-icon>
        </a>

    </div>
</div>
<div class="dso-info"{% if id and static %} id="{{ id }}"{% endif %}>
  {% if not static %}
    <button type="button">
      <span class="sr-only">Sluiten</span>
    </button>
  {% endif %}
  <div class="dso-rich-content">
    {{ infoText | safe }}
  </div>
</div>
/* Default */
__title: default
infoText: >
  <h2>Heading 2</h2>

  <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit.
  Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit
  amet, porta semper est.

  Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis
  sollicitudin arcu. <a href="#">Nullam</a> lacinia non ipsum sit amet varius.

  Praesent consequat ligula id tortor elementum pretium. Integer ligula justo,
  volutpat sed tellus eu, faucibus fringilla lectus.</p>

  <a href="#" class="dso-primary">Primaire button</a>

  <a href="#" class="dso-secondary">Secundaire button</a>

  <a href="#" class="dso-tertiary btn-align">
    Tertiaire button
    <dso-icon icon="chevron-down"></dso-icon>
  </a>
/* Static Info */
__title: Vaste toelichting
infoText: >
  <h2>Heading 2</h2>

  <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit.
  Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit
  amet, porta semper est.

  Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis
  sollicitudin arcu. <a href="#">Nullam</a> lacinia non ipsum sit amet varius.

  Praesent consequat ligula id tortor elementum pretium. Integer ligula justo,
  volutpat sed tellus eu, faucibus fringilla lectus.</p>

  <a href="#" class="dso-primary">Primaire button</a>

  <a href="#" class="dso-secondary">Secundaire button</a>

  <a href="#" class="dso-tertiary btn-align">
    Tertiaire button
    <dso-icon icon="chevron-down"></dso-icon>
  </a>
static: true