Mededeling

<div class="message-bar message-bar__info">
    <div class="message-bar__content">
        <div class="message-bar__icon">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">
                <rect x="7" width="2" height="2" />
                <polygon points="5,4 5,6 7,6 7,16 9,16 9,6 9,4 7,4" />
            </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>
/* No context defined for this component. */
  • 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