Inline notice

an in-flow severity banner for a message tied to the surrounding content.

Example

Heads upYour trial ends in 3 days.
Changes saved.
<div class="lucent-inline-notice lucent-inline-notice--info" role="status">
  <span class="lucent-icon lucent-icon--sm lucent-inline-notice__icon" aria-hidden="true">
    <span class="material-icons lucent-icon__glyph">info</span>
  </span>
  <div class="lucent-inline-notice__content">
    <span class="lucent-inline-notice__title">Heads up</span>Your trial ends in 3 days.</div>
  </div>
  <div class="lucent-inline-notice lucent-inline-notice--success" role="status">
    <span class="lucent-icon lucent-icon--sm lucent-inline-notice__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">check_circle</span>
    </span>
    <div class="lucent-inline-notice__content">Changes saved.</div>
  </div>
  <div class="lucent-inline-notice lucent-inline-notice--warning" role="alert">
    <span class="lucent-icon lucent-icon--sm lucent-inline-notice__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">warning</span>
    </span>
    <div class="lucent-inline-notice__content">Storage is almost full.</div>
    <span class="lucent-icon-button lucent-icon-button--text lucent-icon-button--sm lucent-inline-notice__dismiss">
      <button class="lucent-icon-button__inner" type="button" aria-label="Dismiss" data-lucent-dismiss=".lucent-inline-notice">
        <span class="lucent-icon lucent-icon--md" aria-hidden="true">
          <span class="material-icons lucent-icon__glyph">close</span>
        </span>
      </button>
    </span>
  </div>
  <div class="lucent-inline-notice lucent-inline-notice--error" role="alert">
    <span class="lucent-icon lucent-icon--sm lucent-inline-notice__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">error</span>
    </span>
    <div class="lucent-inline-notice__content">
      <span class="lucent-inline-notice__title">Payment failed</span>We couldn’t charge your card.</div>
    </div>

Playground

Heads upYour trial ends in 3 days.
variant
dismissible 
 
 
  
Do & Don't
 
 
 
 
check_circleDo
 
use it for a message tied to a region of the page (a form section, a settings panel).
 
 
 
cancelDon't
 
use it for transient confirmations; reach for Toast or Snackbar instead.
 
 
 
 
Using it
 
 
  
 Angular  lucent-inline-notice 
import { LucentInlineNotice } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-inline-notice 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 variant input info | success | warning | error info severity and default glyph. 
 title input string '' optional bold title line. 
 icon input string '' overrides the per-variant glyph. 
 dismissible input boolean false shows a dismiss button. 
 dismissed output void  emits on dismiss. 
  
 
  
Theming
 
 
 
Color (7)
  
 
Size & spacing (5)
  
 
Border & radius (1)
  
 
Type (5)