DSO Toolkit | Component Library

Row Equal Heights 

<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="" class="btn btn-link"><svg class="di di-user">
                        <use href="../../dso-icons.svg#user" />
                    </svg><span>Inloggen</span></a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <svg class="di di-bars">
                    <use href="../../dso-icons.svg#bars" />
                </svg> <span class="sr-only">Ga naar menu</span>
            </button>
        </div>
        <ul class="dso-nav dso-nav-main">
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li class="dso-active">
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>
    <ol class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li class="active">Checken</li>
    </ol>
</header>

<main>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow">

                <code>col-sm-12 col-md-6 col-lg-3</code>

            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow">

                <code>col-sm-12 col-md-6 col-lg-3</code>

            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow">

                <code>col-sm-12 col-md-6 col-lg-3</code>

            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow">

                <code>col-sm-12 col-md-6 col-lg-3</code>

            </div>
        </div>
    </div>

    <div class="row dso-equal-heights">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    1
                </div>
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Zodra een <code>.row</code> een <code>.dso-equal-heights</code> krijgt, worden voor de volgende componenten de kolommen visueel even hoog:</p>
                    <ul>
                        <li>Highlight Box</li>
                        <li>Whitebox</li>
                        <li>Whitebox small</li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-yellow dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    2
                </div>
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Dit blok is hoger, dit blok heeft meer te vertellen omdat het een veel boeiender blok is. Mijn broertjes zijn minder interessant, dat zie je aan de inhoud</p>
                    <p>PS: Ik ben het tweede blokje</p>
                </div>

            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    3
                </div>
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Oninteressant blokje</p>
                </div>

            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    4
                </div>
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Aha</p>
                </div>

            </div>
        </div>
    </div>

    <div class="row dso-equal-heights">
        <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">
                        Kort verhaal
                    </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">
                        Lang verhaal waardoor dit blok hoger op je scherm wordt
                    </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">
                        Kort verhaal
                    </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">
                        Lang verhaal waardoor dit blok hoger op je scherm wordt
                    </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">
                        Kort verhaal
                    </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">
                        Lang verhaal waardoor dit blok hoger op je scherm wordt
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="row dso-equal-heights">
        <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>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Service</h2>
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Over deze site</h2>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Cookies</a></li>
                <li><a href="#">Toegankelijkheid</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Volg ons ook op</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">LinkedIn</a></li>
            </ul>
        </div>
    </div>
</footer>
 
{{render '@header' }}

<main>
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" }}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {{/highlightBox}}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" }}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {{/highlightBox}}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" }}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {{/highlightBox}}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" }}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {{/highlightBox}}
    </div>
  </div>

  <div class="row dso-equal-heights">
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" step=1 }}
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Zodra een <code>.row</code> een <code>.dso-equal-heights</code> krijgt, worden voor de volgende componenten de kolommen visueel even hoog:</p>
          <ul>
            <li>Highlight Box</li>
            <li>Whitebox</li>
            <li>Whitebox small</li>
          </ul>
        </div>
      {{/highlightBox}}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-yellow dso-drop-shadow" step=2 }}
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Dit blok is hoger, dit blok heeft meer te vertellen omdat het een veel boeiender blok is. Mijn broertjes zijn minder interessant, dat zie je aan de inhoud</p>
          <p>PS: Ik ben het tweede blokje</p>
        </div>
      {{/highlightBox}}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" step=3 }}
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Oninteressant blokje</p>
        </div>
      {{/highlightBox}}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {{#highlightBox modifier="dso-drop-shadow" step=4 }}
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Aha</p>
        </div>
      {{/highlightBox}}
    </div>
  </div>

  <div class="row dso-equal-heights">
    <div class="col-lg-2 col-md-4 col-xs-6">
      {{#with whiteboxSmall }}
        {{> '@whitebox-small' }}
      {{/with}}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {{#with whiteboxLarge }}
        {{> '@whitebox-small' }}
      {{/with}}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {{#with whiteboxSmall }}
        {{> '@whitebox-small' }}
      {{/with}}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {{#with whiteboxLarge }}
        {{> '@whitebox-small' }}
      {{/with}}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {{#with whiteboxSmall }}
        {{> '@whitebox-small' }}
      {{/with}}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {{#with whiteboxLarge }}
        {{> '@whitebox-small' }}
      {{/with}}
    </div>
  </div>

  <div class="row dso-equal-heights">
    <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>
</main>

{{render '@footer' }}
 
whiteboxSmall:
  label: Kort verhaal
whiteboxLarge:
  label: Lang verhaal waardoor dit blok hoger op je scherm wordt

There are no notes for this item.