<!-- Default -->
<div role="alert" class="notification-block notification-alert">
    <h2 class="notification-heading"><svg width="16" height="16" class="icon icon-face-pain"><use xlink:href="/assets/svg/core.svg#face-pain" /></svg> This is a notification. Take note.</h2>
    <p>Something very notable has occured. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#"
            class="notification-link">Find out more about it.</a>
    </p>
</div>

<!-- Warning -->
<div role="alert" class="notification-block notification-warning">
    <h2 class="notification-heading"><svg width="16" height="16" class="icon icon-alert"><use xlink:href="/assets/svg/core.svg#alert" /></svg> This is a notification. Take note.</h2>
    <p>Something very notable has occured. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#"
            class="notification-link">Find out more about it.</a>
    </p>
</div>

<!-- Info -->
<div role="alert" class="notification-block notification-info">
    <h2 class="notification-heading"><svg width="16" height="16" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> This is a notification. Take note.</h2>
    <p>Something very notable has occured. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#"
            class="notification-link">Find out more about it.</a>
    </p>
</div>

<!-- Success -->
<div role="alert" class="notification-block notification-success">
    <h2 class="notification-heading"><svg width="16" height="16" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> This is a notification. Take note.</h2>
    <p>Something very notable has occured. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#"
            class="notification-link">Find out more about it.</a>
    </p>
</div>

<div role="alert" class="notification-block {{ class }}">
	<h2 class="notification-heading">{{ icon icon }} This is a notification. Take note.</h2>
	<p>Something very notable has occured. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#" class="notification-link">Find out more about it.</a>
	</p>
</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-block {
      padding: $half-gutter $main-gutter 1px $main-gutter;
      @include font-scale(m, helvetica);
      margin: $half-gutter $main-gutter;
    }
    
    .notification-block .notification-heading {
      @include font-scale(l, helvetica);
      font-weight: 500;
    }
    
    
    .notification-block svg {
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -3px;
    }
    
    .notification-block + .notification-block {
      border-top: 1px solid #fff;
    }
    
    .notification-block.notification-alert,
    .notification-block.notification-alert a.notification-link {
      background-color: palette(alert, light);
      color: palette(alert);
    }
    
    .notification-block.notification-alert svg {
      fill: palette(alert);
    }
    
    .notification-block.notification-warning,
    .notification-block.notification-warning a.notification-link {
      background-color: palette(warning, light);
      color: palette(warning);
    }
    
    .notification-block.notification-warning svg {
      fill: palette(warning);
    }
    
    .notification-block.notification-info,
    .notification-block.notification-info a.notification-link {
      background-color: palette(info, light);
      color: palette(info);
    }
    
    .notification-block.notification-info svg {
      fill: palette(info);
    }
    
    .notification-block.notification-success,
    .notification-block.notification-success a.notification-link {
      background-color: palette(success, light);
      color: palette(success);
    }
    
    .notification-block.notification-success svg {
      fill: palette(success);
    }
    
    
  • URL: /components/raw/notification-block/notification-block.scss
  • Filesystem Path: src/components/03-notifications/01-atoms/02-notification-block/notification-block.scss
  • Size: 1.4 KB

There are no notes for this item.