Card-panel is een voorbeeld van het <dso-viewer-grid>
, zie Web Components Storybook
<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>
/* No context defined for this component. */