Den Haag Design System

Gestructureerde lijst: Zonder titel 

<dl>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__header">
                <div class="file-thumbnail__name">Bestand 1</div>
            </div>
            <div class="file-thumbnail__description"><span>Omschrijving:</span> Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Aspernatur doloremque laboriosam placeat vel voluptate. Amet architecto assumenda atque
                blanditiis deleniti eveniet facere iste laudantium nemo nesciunt optio quae repellat, totam!
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="/download-link" class="button button--secondary button--sm">
                    <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 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" />
                            </g>
                        </svg>
                    </span>
                    <span>Download bestand 1</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>PDF</span>
                <span>123 KB</span>
                <span>23-10-2017</span>
            </div>
        </div>
    </dd>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__header">
                <div class="file-thumbnail__name">Bestand 1</div>
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="/download-link" class="button button--secondary button--sm">
                    <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 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" />
                            </g>
                        </svg>
                    </span>
                    <span>Download bestand 1</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>PDF</span>
                <span>123 KB</span>
                <span>23-10-2017</span>
            </div>
        </div>
    </dd>
    <dd>
        <div class="file-thumbnail">
            <div class="file-thumbnail__header">
                <div class="file-thumbnail__name">Bestand 1</div>
                <div class="file-thumbnail__delete-button">
                    <button type="button" class="button button--icon button--close">
                        <span aria-hidden="true">
                            <svg x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
                                <rect x="-2.1" y="6.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.3137 8)" width="20.1" height="2.5" />
                                <rect x="-2.1" y="6.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 8 -3.3137)" width="20.1" height="2.5" />
                            </svg>
                        </span>
                        <span class="screen-reader-only">Uitleg over perceel</span>
                    </button>
                </div>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>PDF</span>
                <span>123 KB</span>
                <span>23-10-2017</span>
            </div>
        </div>
    </dd>
</dl>
 
<dl>
  <dd>{{> @file-thumbnail hasDescription=true hasDownloadButton=true }}</dd>
  <dd>{{> @file-thumbnail hasDownloadButton=true }}</dd>
  <dd>{{> @file-thumbnail hasDeleteButton=true }}</dd>
</dl>
 
/* No context defined for this component. */
  • Content: 
    $structured-list-title-font: $font-serif;
$structured-list-font-size: $fs-down-1;
$structured-list-title-weight: $fw-bold;
$structured-list-title-color: $green;
$structured-list-space-x: $space-xs;
$structured-list-space-y: $space-s;
$structured-list-border: 1px solid $grey-light;

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: $structured-list-font-size;
}

dt,
dd {
  flex: 0 1 100%;
  padding: $structured-list-space-x $structured-list-space-y;
  &:first-letter {
    text-transform: capitalize;
  }
}

dt {
  font-family: $structured-list-title-font;
  font-weight: $structured-list-title-weight;
  color: $structured-list-title-color;

}

.dt--title {
  color: #4b4b4b; 
  
}

dd {
  border-bottom: $structured-list-border;
}

@media (min-width: $tablet-portrait) {

  dt {
    border-bottom: $structured-list-border;
    flex: 1 1 (math.div(4, 12) * 100%);
  }

  dt + dd {
    flex: 1 1 (math.div(8, 12) * 100%);
  }
}

@media (min-width: $desktop) {

  dt { 
    word-break: break-word;
  }

  .dt_fullwidth {
    flex-basis: 100%;
    max-width: 100%;
  }
}
  • URL: /components/raw/structured-list/_structured-list.scss
  • Filesystem Path: src/components/01-componenten/structured-list/_structured-list.scss
  • Size: 1.1 KB

There are no notes for this item.