Card Panel

Component preview

<dso-viewer-grid medium>
    <div slot="main">
        <h1>Overzicht op uw locatie</h1>
        <dso-highlight-box white drop-shadow>
            <div class="dso-rich-content">
                <h2>Activiteiten</h2>
                <p>Als u wilt bouwen of aanpassen kunt u regels zoeken voor deze activiteit.</p>
            </div>
            <div class="dso-search-bar">
                <div class="dso-search-bar-input">

                    <label for="search-bar--default" class="dso-search-icon">Label van de search-bar</label>

                    <input type="text" id="search-bar--default" placeholder="Placeholder van de search-bar" />

                </div>
                <button type="button" class="dso-secondary sr-only">
                    Button

                </button>
            </div>

            <div class="dso-rich-content">
                <p>
                    Veel gebruikt:
                    <a href="#">Boom kappen</a>
                    , <a href="#">Dakkapel plaatsen</a>
                    , <a href="#">Schuur bouwen</a>
                </p>
            </div>

            <div class="dso-context-wrapper">
                <div class="dso-context-container">
                    <button type="button" class="dso-tertiary"><span>Bekijk alle gebieden</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </button>

                </div>
            </div>
        </dso-highlight-box>

        <dso-highlight-box white drop-shadow>
            <div class="dso-rich-content">
                <h2>Gebieden op de kaart</h2>
                <p>Gebieden op deze locatie waar aparte regels voor gelden:</p>
                <p>
                    <img src="../../dummy/images/rectangle1.png" alt="Geel vierkantje">
                    <strong>Tuin</strong> (enkelbestemming) <a href="#">Bekijk de regels</a>

                </p>
                <p>
                    <img src="../../dummy/images/rectangle2.png" alt="Groen vierkantje">
                    <strong>Wonen</strong> (functie) <a href="#">Bekijk de regels</a>

                </p>
            </div>

            <div class="dso-context-wrapper">
                <div class="dso-context-container">
                    <button type="button" class="dso-tertiary"><span>Bekijk alle gebieden</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </button>

                </div>
            </div>
        </dso-highlight-box>

        <dso-highlight-box white drop-shadow>
            <div class="dso-rich-content">
                <h2>Thema's</h2>
                <p>Regels en beleid voor algemene onderwerpen zoals:</p>
            </div>

            <div class="dso-tile-grid">
                <div class="dso-tile dso-theme">
                    <a href="#">
                        <span class="dso-tile-icon">
                            <img src="../../dummy/images/icon-tree.png" alt="">
                        </span>
                        <span class="dso-tile-link">Bodem</span>
                    </a>
                </div>
                <div class="dso-tile dso-theme">
                    <a href="#">
                        <span class="dso-tile-icon">
                            <img src="../../dummy/images/icon-tree.png" alt="">
                        </span>
                        <span class="dso-tile-link">Bodem</span>
                    </a>
                </div>
                <div class="dso-tile dso-theme">
                    <a href="#">
                        <span class="dso-tile-icon">
                            <img src="../../dummy/images/icon-tree.png" alt="">
                        </span>
                        <span class="dso-tile-link">Bodem</span>
                    </a>
                </div>
                <div class="dso-tile dso-theme">
                    <a href="#">
                        <span class="dso-tile-icon">
                            <img src="../../dummy/images/icon-tree.png" alt="">
                        </span>
                        <span class="dso-tile-link">Bodem</span>
                    </a>
                </div>
            </div>

            <div class="dso-context-wrapper">
                <div class="dso-context-container">
                    <button type="button" class="dso-tertiary"><span>Bekijk alle gebieden</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </button>

                </div>
            </div>
        </dso-highlight-box>

        <dso-highlight-box yellow drop-shadow>
            <div class="dso-rich-content">
                <h2>
                    Activiteiten
                    <dso-toggletip secondary>Meer informatie over deze activiteiten</dso-toggletip>
                </h2>
                <p>Als u wilt bouwen of aanpassen kunt u regels zoeken voor deze activiteit.</p>
            </div>

            <div class="dso-context-wrapper">
                <div class="dso-context-label">
                    <dso-label status="bright" removable>Recreatief nachtverblijf bouwen, in stand houden of gebruiken</dso-label>
                </div>
                <div class="dso-context-container">
                    <button type="button" class="dso-tertiary"><span>Bekijk alle gebieden</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </button>

                </div>
            </div>
        </dso-highlight-box>
    </div>
</dso-viewer-grid>

<dso-viewer-grid medium>
  <div slot="main">
    <h1>Overzicht op uw locatie</h1>
    <dso-highlight-box white drop-shadow>
      <div class="dso-rich-content">
        <h2>Activiteiten</h2>
        <p>Als u wilt bouwen of aanpassen kunt u regels zoeken voor deze activiteit.</p>
      </div>
      {% render '@search-bar', {label: 'Label van de search-bar', placeholder: 'Placeholder van de search-bar', hiddenLabel: true, icon: true, hideSearchButton: true } %}
      <div class="dso-rich-content">
        <p>
          Veel gebruikt:
          {% render '@anchor', {url: '#', label: 'Boom kappen'} -%}, {% render '@anchor', {url: '#', label: 'Dakkapel plaatsen'} -%}, {% render '@anchor', {url: '#', label: 'Schuur bouwen'} -%}
        </p>
      </div>

      <div class="dso-context-wrapper">
        <div class="dso-context-container">
          {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Bekijk alle gebieden', iconAfter: 'chevron-right'} %}
        </div>
      </div>
    </dso-highlight-box>

    <dso-highlight-box white drop-shadow>
      <div class="dso-rich-content">
        <h2>Gebieden op de kaart</h2>
        <p>Gebieden op deze locatie waar aparte regels voor gelden:</p>
        <p>
          {% render '@image', {source: '/dummy/images/rectangle1.png', alt: 'Geel vierkantje'} %}
          <strong>Tuin</strong> (enkelbestemming) {% render '@anchor', {url: '#', label: 'Bekijk de regels'} %}
        </p>
        <p>
          {% render '@image', {source: '/dummy/images/rectangle2.png', alt: 'Groen vierkantje'} %}
          <strong>Wonen</strong> (functie) {% render '@anchor', {url: '#', label: 'Bekijk de regels'} %}
        </p>
      </div>

      <div class="dso-context-wrapper">
        <div class="dso-context-container">
          {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Bekijk alle gebieden', iconAfter: 'chevron-right'} %}
        </div>
      </div>
    </dso-highlight-box>

    <dso-highlight-box white drop-shadow>
      <div class="dso-rich-content">
        <h2>Thema's</h2>
        <p>Regels en beleid voor algemene onderwerpen zoals:</p>
      </div>

      <div class="dso-tile-grid">
        <div class="dso-tile dso-theme">
          <a href="#">
            <span class="dso-tile-icon">
              {% render '@image', {source: '/dummy/images/icon-tree.png', alt: ''} %}
            </span>
            <span class="dso-tile-link">Bodem</span>
          </a>
        </div>
        <div class="dso-tile dso-theme">
          <a href="#">
            <span class="dso-tile-icon">
              {% render '@image', {source: '/dummy/images/icon-tree.png', alt: ''} %}
            </span>
            <span class="dso-tile-link">Bodem</span>
          </a>
        </div>
        <div class="dso-tile dso-theme">
          <a href="#">
            <span class="dso-tile-icon">
              {% render '@image', {source: '/dummy/images/icon-tree.png', alt: ''} %}
            </span>
            <span class="dso-tile-link">Bodem</span>
          </a>
        </div>
        <div class="dso-tile dso-theme">
          <a href="#">
            <span class="dso-tile-icon">
              {% render '@image', {source: '/dummy/images/icon-tree.png', alt: ''} %}
            </span>
            <span class="dso-tile-link">Bodem</span>
          </a>
        </div>
      </div>

      <div class="dso-context-wrapper">
        <div class="dso-context-container">
          {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Bekijk alle gebieden', iconAfter: 'chevron-right'} %}
        </div>
      </div>
    </dso-highlight-box>

    <dso-highlight-box yellow drop-shadow>
      <div class="dso-rich-content">
        <h2>
          Activiteiten
          <dso-toggletip secondary>Meer informatie over deze activiteiten</dso-toggletip>
        </h2>
        <p>Als u wilt bouwen of aanpassen kunt u regels zoeken voor deze activiteit.</p>
      </div>

      <div class="dso-context-wrapper">
        <div class="dso-context-label">
          <dso-label status="bright" removable>Recreatief nachtverblijf bouwen, in stand houden of gebruiken</dso-label>
        </div>
        <div class="dso-context-container">
          {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Bekijk alle gebieden', iconAfter: 'chevron-right'} %}
        </div>
      </div>
    </dso-highlight-box>
  </div>
</dso-viewer-grid>