Den Haag Design System

Document overview 

<h3 class="dl__description">Besluitvorming</h3>
<dl class="document__overview">
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Verslag hoorzitting (externe)</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> VSHZ0005-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="." class="button button--secondary button--sm" target="_blank">
                    <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                            <g>
                                <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
                                <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
                            </g>
                        </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
                    01 december 2001
                </span>
            </div>
        </div>
    </dd>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Conceptbesluit</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> COBS0007-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="." class="button button--secondary button--sm" target="_blank">
                    <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                            <g>
                                <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
                                <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
                            </g>
                        </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
                    01 december 2011
                </span>
            </div>
        </div>
    </dd>
</dl>
<h3 class="dl__description">Correspondentie</h3>
<dl class="document__overview">
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Verslag hoorzitting (externe)</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> VSHZ0005-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="." class="button button--secondary button--sm" target="_blank">
                    <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                            <g>
                                <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
                                <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
                            </g>
                        </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
                    01 december 2001
                </span>
            </div>
        </div>
    </dd>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Conceptbesluit</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> COBS0007-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="." class="button button--secondary button--sm" target="_blank">
                    <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                            <g>
                                <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
                                <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
                            </g>
                        </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
                    01 december 2011
                </span>
            </div>
        </div>
    </dd>
</dl>
 
<h3 class="dl__description">Besluitvorming</h3>
<dl class="document__overview">
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Verslag hoorzitting (externe)</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> VSHZ0005-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="." class="button button--secondary button--sm" target="_blank">
												<span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                      xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"
                                                      class="icon">
        <g>
            <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
            <polygon
                    points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
        </g>
    </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
											01 december 2001
										</span>
            </div>
        </div>
    </dd>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Conceptbesluit</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> COBS0007-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="."
                   class="button button--secondary button--sm" target="_blank">
												<span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                      xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"
                                                      class="icon">
        <g>
            <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
            <polygon
                    points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
        </g>
    </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
											01 december 2011
										</span>
            </div>
        </div>
    </dd>
</dl>
<h3 class="dl__description">Correspondentie</h3>
<dl class="document__overview">
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Verslag hoorzitting (externe)</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> VSHZ0005-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="." class="button button--secondary button--sm" target="_blank">
												<span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                      xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"
                                                      class="icon">
        <g>
            <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
            <polygon
                    points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
        </g>
    </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
											01 december 2001
										</span>
            </div>
        </div>
    </dd>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__name">Conceptbesluit</div>
            <div class="file-thumbnail__description">
                <span>project.objection_documents_description:</span> COBS0007-B.2.19.0065.001
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="."
                   class="button button--secondary button--sm" target="_blank">
												<span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                      xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"
                                                      class="icon">
        <g>
            <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1"></polygon>
            <polygon
                    points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9"></polygon>
        </g>
    </svg></span>
                    <span>Download</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>pdf</span>
                <span>
											01 december 2011
										</span>
            </div>
        </div>
    </dd>
</dl>
 
/* No context defined for this component. */
  • Content: 
    h3.dl__description {
  margin: 0;
}

.document__overview {
  dt,
  dd {
    border: none;
    padding: 0;
    margin: $space-xs $space-s;
  }
}

.document__overview + h3.dl__description {
  margin-top: $space-s;
}
  • URL: /components/raw/document-overview/_document-overview.scss
  • Filesystem Path: src/components/01-componenten/document-overview/_document-overview.scss
  • Size: 214 Bytes
  • Handle: @document-overview
  • Preview:
  • Filesystem Path: src/components/01-componenten/document-overview/document-overview.hbs

Omschrijving

Document overview

[Afbeelding in live omgeving]

Gedrag

Wanneer een gebruiker x doet, dan gebeurt er y.

Algemene richtlijnen

Waarvoor kun je dit component gebruiken?

Content richtlijnen

Zijn er specifieke content richtlijnen?

Accessibility richtlijnen

Zijn er specifieke accessibility richtlijnen?

Varianten

Variant 1: gebruik je in situatie x. Variant 2: gebruik je in situatie y. Variant 3: gebruik je in situatie z.

Changelog

Versie 0.1: component aangemaakt