<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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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>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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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>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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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>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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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>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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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>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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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>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"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><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">
  {{#each columns }}
    <div class="{{ modifier }}">
      {{render '@whitebox-regular' whitebox merge=true }}
    </div>
  {{/each}}
</div>
columns:
  - modifier: col-md-3 col-sm-6 col-xs-12
    whitebox:
      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:
      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:
      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:
      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:
      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:
      description: >-
        Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
        melding moet doen?
      count: 6

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