Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Notification 

<!-- Default -->
<div class="notification ">
    <i class="notification__icon icon -chevron-right"></i>
    <p class="notification__text">This is a information notification!</p>
</div>


<!-- Success -->
<div class="notification -success">
    <i class="notification__icon icon -chevron-right"></i>
    <p class="notification__text">This is a success notification!</p>
</div>


<!-- Warning -->
<div class="notification -warning">
    <i class="notification__icon icon -chevron-right"></i>
    <p class="notification__text">This is a warning notification!</p>
</div>


<!-- 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>
 
/* Default */
{
  "icon": "-chevron-right",
  "text": "This is a information notification!"
}


/* Success */
{
  "icon": "-chevron-right",
  "type": "-success",
  "text": "This is a success notification!"
}


/* Warning */
{
  "icon": "-chevron-right",
  "type": "-warning",
  "text": "This is a warning notification!"
}


/* Error */
{
  "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.