<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.