<!-- Default -->
<div role="alert" class="notification notification-alert">
    <svg width="16" height="16" class="icon icon-face-pain"><use xlink:href="/assets/svg/core.svg#face-pain" /></svg> Something very notable has occured. <a href="#" class="notification-link">Find out more about it.</a>
    <a class="button button-small action-alert" href="/foo">Submit</a>

</div>

<!-- Warning -->
<div role="alert" class="notification notification-warning">
    <svg width="16" height="16" class="icon icon-alert"><use xlink:href="/assets/svg/core.svg#alert" /></svg> Something very notable has occured. <a href="#" class="notification-link">Find out more about it.</a>
    <a class="button button-small action-warning" href="/foo">Submit</a>

</div>

<!-- Info -->
<div role="alert" class="notification notification-info">
    <svg width="16" height="16" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Something very notable has occured. <a href="#" class="notification-link">Find out more about it.</a>
    <a class="button button-small action-info" href="/foo">Submit</a>

</div>

<!-- Success -->
<div role="alert" class="notification notification-success">
    <svg width="16" height="16" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> Something very notable has occured. <a href="#" class="notification-link">Find out more about it.</a>
    <a class="button button-small action-success" href="/foo">Submit</a>

</div>

<div role="alert" class="notification {{ class }}">
{{ icon icon }}
Something very notable has occured. <a href="#" class="notification-link">Find out more about it.</a>
{{ render button }}
</div>
/* Default */
{
  "text": "Go!",
  "class": "notification-alert",
  "icon": "core/face-pain",
  "button": "@button-small--a-alert"
}

/* Warning */
{
  "text": "Go!",
  "class": "notification-warning",
  "icon": "core/alert",
  "button": "@button-small--a-warning"
}

/* Info */
{
  "text": "Go!",
  "class": "notification-info",
  "icon": "core/info-alt",
  "button": "@button-small--a-info"
}

/* Success */
{
  "text": "Go!",
  "class": "notification-success",
  "icon": "core/circle-check",
  "button": "@button-small--a-success"
}

  • Content:
    .notification {
      padding: 10px $main-gutter;
      @include font-scale(m, helvetica);
    }
    
    .notification .button {
      float: right;
    }
    
    .notification svg {
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -3px;
    }
    
    .notification + .notification {
      border-top: 1px solid #fff;
    }
    
    .notification.notification-alert,
    .notification.notification-alert a.notification-link {
      background-color: palette(alert, light);
      color: palette(alert);
    }
    
    .notification.notification-alert svg {
      fill: palette(alert);
    }
    
    .notification.notification-warning,
    .notification.notification-warning a.notification-link {
      background-color: palette(warning, light);
      color: palette(warning);
    }
    
    .notification.notification-warning svg {
      fill: palette(warning);
    }
    
    .notification.notification-info,
    .notification.notification-info a.notification-link {
      background-color: palette(info, light);
      color: palette(info);
    }
    
    .notification.notification-info svg {
      fill: palette(info);
    }
    
    .notification.notification-success,
    .notification.notification-success a.notification-link {
      background-color: palette(success, light);
      color: palette(success);
    }
    
    .notification.notification-success svg {
      fill: palette(success);
    }
    
    
  • URL: /components/raw/notification-bar/notification-bar.scss
  • Filesystem Path: src/components/03-notifications/01-atoms/01-notification-bar/notification-bar.scss
  • Size: 1.2 KB