Den Haag Design System

Card 

<div class="card">
    <div class="user-avatar">
        <div class="user-avatar__oval user-avatar__oval--user">DW</div>
        <div class="user-avatar__content">
            <div class="user-avatar__name">D. Willemsen</div>
            <div class="user-avatar__date">17 juli</div>
        </div>
    </div>
    <div class="card__text">
        Goedemorgen D. Willemsen, bedankt voor het document. Er ontbreekt nog een document. U heeft het bewijsdocument
        niet toegevoegd. Zou u dit kunnen opsturen? Alvast bedankt.
    </div>
    <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>
</div>
 
<div class="card">
    {{> @user-avatar  type=type }}
    <div class="card__text">
      Goedemorgen D. Willemsen, bedankt voor het document. Er ontbreekt nog een document. U heeft het bewijsdocument
      niet toegevoegd. Zou u dit kunnen opsturen? Alvast bedankt.
    </div>
    {{> @file-thumbnail hasDownloadButton=true }}
</div>
 
{
  "type": "user"
}
  • Content: 
    .card {

  $parent: &;

  border: $border;
  padding: $space-m;
  background-color: $white;

  &__text {
    margin-top: $space-m;
  }

  .file-thumbnail {
    padding: 0;
    margin-top: $space-m;
  }
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/components/01-componenten/card/_card.scss
  • Size: 204 Bytes

Omschrijving

Omschrijving volgt nog van UX.