Row Equal Heights

There are no notes for this item.

<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' %}



  

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        col-sm-12 col-md-6 col-lg-3
      {% endcontainer %}
    

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        col-sm-12 col-md-6 col-lg-3
      {% endcontainer %}
    

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        col-sm-12 col-md-6 col-lg-3
      {% endcontainer %}
    

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        col-sm-12 col-md-6 col-lg-3
      {% endcontainer %}
    

  


  

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow', step: 1 } %}
        

          
Ongelijke inhoud

          
Zodra een .row een .dso-equal-heights krijgt, worden voor de volgende componenten de kolommen visueel even hoog:

          
    
            
  • Highlight Box
    • 
            
  • Whitebox
    • 
            
  • Whitebox small
    • 
          

        

      {% endcontainer %}
    

    

      {% container '@highlight-box', { modifier: 'dso-yellow dso-drop-shadow', step: 2 } %}
        

          
Ongelijke inhoud

          
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

          
PS: Ik ben het tweede blokje

        

      {% endcontainer %}
    

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow', step: 3 } %}
        

          
Ongelijke inhoud

          
Oninteressant blokje

        

      {% endcontainer %}
    

    

      {% container '@highlight-box', { modifier: 'dso-drop-shadow', step: 4 } %}
        

          
Ongelijke inhoud

          
Aha

        

      {% endcontainer %}
    

  


  

    

      {% render '@whitebox-small', { label: whiteboxSmall.label } %}
    

    

      {% render '@whitebox-small', { label: whiteboxLarge.label } %}
    

    

      {% render '@whitebox-small', { label: whiteboxSmall.label } %}
    

    

      {% render '@whitebox-small', { label: whiteboxLarge.label } %}
    

    

      {% render '@whitebox-small', { label: whiteboxSmall.label } %}
    

    

      {% render '@whitebox-small', { label: whiteboxLarge.label } %}
    

  


  

    

      {% render '@whitebox-regular' %}
    

    

      {% render '@whitebox-regular' %}
    

    

      {% render '@whitebox-regular' %}
    

  




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