Den Haag Design System

Mededeling: Waarschuwing 

<div class="message-bar message-bar__warning">
    <div class="message-bar__content">
        <div class="message-bar__icon">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
                <path d="M6.3,12.77a1.7,1.7,0,1,1,3.4,0,1.7,1.7,0,1,1-3.4,0ZM6.68,4,6.59,1.46H9.41L9.32,4l-.4,5.86H7.07Z" />
            </svg>
        </div>
        <div class="message-bar__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt.
        </div>
    </div>
</div>
 
<div class="message-bar{{#if themeClass}} {{themeClass}}{{/if}}">
    <div class="message-bar__content">
        <div class="message-bar__icon">
          {{#if info }}
            {{> @icon--info }}
          {{/if}}
          {{#if exclamation }}
            {{> @icon--exclamation }}
          {{/if}}
          {{#if check}}
            {{> @icon--check }}
          {{/if}}
        </div>
        <div class="message-bar__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt.
        </div>
    </div>
</div>
 
{
  "themeClass": "message-bar__warning",
  "exclamation": true
}
  • Content: 
    $message-bar-icon-size: 20px;
$message-bar-icon-padding: 4px;
$message-bar-part-spacing: $space-xs;

// Theme colors
$message-bar-default-color: $grey;
$message-bar-info-color: $blue;

@mixin message-bar-theming($parent, $color: $message-bar-default-color) {
  #{$parent}__icon {
    background-color: $color;
  }
}

.message-bar {
  $parent: &;
  display: flex;
  flex-wrap: wrap;
  padding: $message-bar-part-spacing;
  flex: 0 1 100%;

  &__content {
    display: flex;
  }

  &__icon {
    width: $message-bar-icon-size;
    height: $message-bar-icon-size;
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: $white;
    padding: $message-bar-icon-padding;
    margin-top: $space-xxs;

    .icon {
      padding: 0;
    }
  }

  &__text {
    display: flex;
    flex: 1 1 auto;
    padding-left: $message-bar-part-spacing;
  }

  /**
   * Themes
   */

  // Default
  @include message-bar-theming($parent);

  // Info
  &__info {
    @include message-bar-theming($parent, $message-bar-info-color);
  }

  // Success
  &__success {
    @include message-bar-theming($parent, $green);
  }

  // Warning
  &__warning {
    @include message-bar-theming($parent, $yellow);

    #{$parent}__icon {
      color: $grey-dark;
    }
  }

  /**
   * Custom styling for message-bar that is inside paragraph form fragment
   */
  &__paragraph {
    .message-bar__text {
      display: block;

      ul {
        padding-left: $space-l;
        margin: $space-s 0;
      }

      p {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }
}
  • URL: /components/raw/message/_message.scss
  • Filesystem Path: src/components/01-componenten/message/_message.scss
  • Size: 1.6 KB

Omschrijving

[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