DSO Toolkit homepage

Whitebox

Breedte van het element wordt gedicteerd door de bootstrap class van het omliggende element.

<div class="row">
    <div class="col-lg-2 col-md-4 col-xs-6">
        <div class="dso-whitebox-small">
            <a href="#">
                <span class="dso-whitebox-icon">
                    <img src="../../dummy/images/icon-tree.png" />
                </span>
                <span class="dso-whitebox-link">
                    Boom kappen of snoeien
                </span>
            </a>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
        <div class="dso-whitebox-small">
            <a href="#">
                <span class="dso-whitebox-icon">
                    <img src="../../dummy/images/icon-tree.png" />
                </span>
                <span class="dso-whitebox-link">
                    Boom kappen of snoeien
                </span>
            </a>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
        <div class="dso-whitebox-small">
            <a href="#">
                <span class="dso-whitebox-icon">
                    <img src="../../dummy/images/icon-tree.png" />
                </span>
                <span class="dso-whitebox-link">
                    Boom kappen of snoeien
                </span>
            </a>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
        <div class="dso-whitebox-small">
            <a href="#">
                <span class="dso-whitebox-icon">
                    <img src="../../dummy/images/icon-tree.png" />
                </span>
                <span class="dso-whitebox-link">
                    Boom kappen of snoeien
                </span>
            </a>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
        <div class="dso-whitebox-small">
            <a href="#">
                <span class="dso-whitebox-icon">
                    <img src="../../dummy/images/icon-tree.png" />
                </span>
                <span class="dso-whitebox-link">
                    Boom kappen of snoeien
                </span>
            </a>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
        <div class="dso-whitebox-small">
            <a href="#">
                <span class="dso-whitebox-icon">
                    <img src="../../dummy/images/icon-tree.png" />
                </span>
                <span class="dso-whitebox-link">
                    Boom kappen of snoeien
                </span>
            </a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12 ">
        <div class="dso-whitebox">
            <div class="dso-whitebox-title">
                <h2>Ik wil weten welke wetten en regels er gelden voor mijn huis/bedrijf.</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 ">
        <div class="dso-whitebox">
            <div class="dso-whitebox-title">
                <h2>Ik wil weten welke wetten en regels er gelden voor mijn huis/bedrijf.</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 ">
        <div class="dso-whitebox">
            <div class="dso-whitebox-title">
                <h2>Ik wil weten welke wetten en regels er gelden voor mijn huis/bedrijf.</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                1

            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met counter</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                2

            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met counter</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                3

            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met counter</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                4

            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met counter</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                5

            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met counter</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                6

            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met counter</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                <dso-icon icon="check"></dso-icon>
                <span class="sr-only">afgerond</span>
            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met icon</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                <dso-icon icon="check"></dso-icon>
                <span class="sr-only">afgerond</span>
            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met icon</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                <dso-icon icon="check"></dso-icon>
                <span class="sr-only">afgerond</span>
            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met icon</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                <dso-icon icon="check"></dso-icon>
                <span class="sr-only">afgerond</span>
            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met icon</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                <dso-icon icon="check"></dso-icon>
                <span class="sr-only">afgerond</span>
            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met icon</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="dso-whitebox dso-has-counter">
            <div class="dso-step-counter">
                <dso-icon icon="check"></dso-icon>
                <span class="sr-only">afgerond</span>
            </div>
            <div class="dso-whitebox-title">
                <h2>Whitebox met icon</h2>
            </div>
            <div class="dso-whitebox-link">
                <a href="#" class="btn btn-link">
                    <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                </a>
            </div>
            <div class="dso-whitebox-icon">
                <img src="../../dummy/images/indienen.png" alt="Indienen" />
            </div>
            <div class="dso-rich-content">
                <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
            </div>
        </div>

    </div>

</div>
<div class="row">
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@whitebox-small' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@whitebox-small' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@whitebox-small' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@whitebox-small' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@whitebox-small' -%}
  </div>
  <div class="col-lg-2 col-md-4 col-xs-6">
    {% render '@whitebox-small' -%}
  </div>
</div>

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12 ">
    {% render '@whitebox-regular' -%}
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12 ">
    {% render '@whitebox-regular' -%}
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12 ">
    {% render '@whitebox-regular' -%}
  </div>
</div>

<div class="row">
  {% for column in columns %}
    <div {{ className(column.modifier) }}>
      {% render '@whitebox-regular', column.whitebox, true %}
    </div>
  {% endfor %}
</div>
columns:
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met counter
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 1
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met counter
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 2
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met counter
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 3
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met counter
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 4
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met counter
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 5
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met counter
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 6
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met icon
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      icon: di di-check
      label: afgerond
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met icon
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      icon: di di-check
      label: afgerond
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met icon
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      icon: di di-check
      label: afgerond
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met icon
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      icon: di di-check
      label: afgerond
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met icon
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      icon: di di-check
      label: afgerond
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      title: Whitebox met icon
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      icon: di di-check
      label: afgerond