City of Ghent Style Guide

Important note

When to use this component

Whenever you need a (colored) text with an icon to display an important note.

<p class="important-note note--{{ type }}">{{ note }}</p>
<p class="important-note note--important">Important info</p>
{
  "type": "important",
  "icon": "exclamation-circle",
  "note": "Important info"
}
  • Content:
    // Important note styling
    .important-note {
      @include icon('exclamation-circle', before);
      @include theme('color', 'color-primary');
      @include semi-bold-text;
    
      display: flex;
      align-items: center;
      font-size: .9rem;
      line-height: 177.778%;
    
      &::before {
        margin-right: 10px;
        color: inherit;
        font-size: 1.6rem;
      }
    }
    
    .note {
      &--timebound,
      &--payment {
        @include theme('color', 'color-warning');
      }
    
      &--timebound {
        @include icon('clock', before);
      }
    
      &--payment {
        @include icon('euro', before);
      }
    
      &--unmissable {
        @include theme('color', 'color-error');
      }
    }
    
  • URL: /components/raw/important-note/_important-note.scss
  • Filesystem Path: components/31-molecules/important-note/_important-note.scss
  • Size: 608 Bytes