Springboard

Notices 

<!-- Info -->
<div class="notice notice--default">
    <h2 class="notice__heading">Informational Notice</h2>
    <p>This is a default notice. <a href="#">Links are styled to match</a></p>
</div>


<!-- Success -->
<div class="notice notice--success">
    <h2 class="notice__heading">Success Notice</h2>
    <p>This is a success notice. <a href="#">Links are styled to match</a></p>
</div>


<!-- Warning -->
<div class="notice notice--warning">
    <h2 class="notice__heading">Warning Notice</h2>
    <p>This is a warning notice. <a href="#">Links are styled to match</a></p>
</div>


<!-- Error -->
<div class="notice notice--error">
    <h2 class="notice__heading">Error Notice</h2>
    <p>This is an error notice. <a href="#">Links are styled to match</a></p>
</div>


<div class="notice notice--{{ modifier }}">
  <h2 class="notice__heading">{{ notice.heading }}</h2>
  <p>{{ notice.message }} {{{ linkMessage }}}</p>
</div>
 
/* Info */
{
  "linkMessage": "<a href=\"#\">Links are styled to match</a>",
  "modifier": "default",
  "notice": {
    "heading": "Informational Notice",
    "message": "This is a default notice."
  }
}


/* Success */
{
  "linkMessage": "<a href=\"#\">Links are styled to match</a>",
  "modifier": "success",
  "notice": {
    "heading": "Success Notice",
    "message": "This is a success notice."
  }
}


/* Warning */
{
  "linkMessage": "<a href=\"#\">Links are styled to match</a>",
  "modifier": "warning",
  "notice": {
    "heading": "Warning Notice",
    "message": "This is a warning notice."
  }
}


/* Error */
{
  "linkMessage": "<a href=\"#\">Links are styled to match</a>",
  "modifier": "error",
  "notice": {
    "heading": "Error Notice",
    "message": "This is an error notice."
  }
}
  • Content: 
    /*
  Notice 

  Use to alert the user about a current or potential outcome such as success, failure or a warning. There are four types of messages.
*/
.notice {
  display: block;
  padding: 1em 1.4em;
  margin: $line-height 0;

  background: #c8edfd;
  color: $color-info;
  border-color: #0ca3e1;
  border-radius: .25em;
  border-style: solid;
  border-width: 1px;

  line-height: 1.4;

  >.notice__heading {
    margin: 0 0 .25em;
    padding: 0;
    color: $color-soft-black;
    color: rgba(0,0,0,.7);
    font-size: 1em;
    font-weight: bold;
  }

  >:last-child {
    margin-bottom: 0;
  }

  a:link,
  a:visited,
  a:active,
  a:focus {
    border: 0;
    color: $color-info;
    text-decoration: underline;
  }

  a:hover {
    text-decoration: none;
    border: 0;
  }
}

.notice--success {
  background: #D0FDCF;
  color: $color-success;
  border-color: #79c279;

  >.notice__heading {
    color: $color-success;
  }

  a:link,
  a:visited,
  a:hover,
  a:active,
  a:focus {
    color: $color-success;
  }
}

.notice--warning {
  background: #FFFEDF;
  color: $color-warning;
  border-color: #cfcf70;

  >.notice__heading {
    color: $color-warning;
  }

  a:link,
  a:visited,
  a:hover,
  a:active,
  a:focus {
    color: $color-warning;
  }
}

.notice--error {
  background: #FFEEEE;
  color: $color-error;
  border-color: #cc0000;

  >.notice__heading {
    color: $color-error;
  }

  a:link,
  a:visited,
  a:hover,
  a:focus,
  a:active,
  a:focus {
    color: $color-error;
  }
}
  • URL: /components/raw/notice/_sass.scss
  • Filesystem Path: components/02-modules/messaging/notice/_sass.scss
  • Size: 1.5 KB

Use to alert the user about a current or potential outcome such as success, failure or a warning.