Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Notification: Error 

<div class="notification -error">
    <i class="notification__icon icon -chevron-right"></i>
    <p class="notification__text">This is an error notification!</p>
</div>
 
<div class="notification {{type}}">
  <i class="notification__icon icon {{icon}}"></i>
  <p class="notification__text">{{{text}}}</p>
</div>
 
{
  "icon": "-chevron-right",
  "type": "-error",
  "text": "This is an error notification!"
}
  • Content: 
    .notification {
  display: flex;
  align-items: center;
  margin-bottom: 3 * $base-margin;
  padding: $base-padding;
  border: $line-width--wide solid $tertiary;
  border-right-style: none;
  border-left-style: none;

  &.-success {
    border-color: $success;

    .notification__icon {
      color: $success;
    }
  }

  &.-error {
    border-color: $danger;

    .notification__icon {
      color: $danger;
    }
  }

  &.-warning {
    border-color: $danger;

    .notification__icon {
      color: $danger;
    }
  }

  .notification__icon {
    margin-right: $base-margin;
  }
}
  • URL: /components/raw/atoms-notification/_notifcation.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/09-notification/_notifcation.scss
  • Size: 588 Bytes

There are no notes for this item.