Den Haag Design System

Media link: Lijst 

<a href="/" class="media-link">
    <div class="media-link__icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
            <g>
                <polygon fill="currentColor" points="2 0 2 16 14 8 2 0" />
            </g>
        </svg>
    </div>
    <div class="media-link__body">
        <span class="media-link__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        <span class="media-link__info">(YouTube-kanaal van de gemeente)</span>
    </div>
</a>
<a href="/" class="media-link">
    <div class="media-link__icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
            <g>
                <polygon fill="currentColor" points="2 0 2 16 14 8 2 0" />
            </g>
        </svg>
    </div>
    <div class="media-link__body">
        <span class="media-link__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        <span class="media-link__info">(YouTube-kanaal van de gemeente)</span>
    </div>
</a>
<a href="/" class="media-link">
    <div class="media-link__icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
            <g>
                <polygon fill="currentColor" points="2 0 2 16 14 8 2 0" />
            </g>
        </svg>
    </div>
    <div class="media-link__body">
        <span class="media-link__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        <span class="media-link__info">(YouTube-kanaal van de gemeente)</span>
    </div>
</a>
 
{{> @media-link }}
{{> @media-link }}
{{> @media-link }}
 
/* No context defined for this component. */
  • Content: 
    $media-link-outer-space: $space-s;

.media-link {

  $parent: &;

  display: flex;
  align-items: center;
  text-decoration: none;
  padding: $media-link-outer-space;
  border-top: $border;
  border-bottom: $border;

  & + & {
    border-top: none;
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: $blue;
    color: #fff;
    font-size: 1.5rem;
    margin-right: $media-link-outer-space;

    #{$parent}:hover & {
      background-color: $brown;
    }
  }

  &__title {
    font-weight: $fw-medium;
  }

  &__info {
    color: $grey-dark;
  }
}
  • URL: /components/raw/media-link/_media-link.scss
  • Filesystem Path: src/components/01-componenten/media-link/_media-link.scss
  • Size: 687 Bytes
  • Content: 
    export default function MediaLink() {
  // Component logic
}
  • URL: /components/raw/media-link/media-link.js
  • Filesystem Path: src/components/01-componenten/media-link/media-link.js
  • Size: 61 Bytes

Omschrijving

Message zorgt ervoor dat de gebruiker [gebruik van het component].

[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