Notices

Flash message styles for success, warning, and error states.

Notice variants

This is a success notice. Everything worked as expected!

This is a warning notice. Please review this information carefully.

This is an error notice. Something went wrong and needs attention.

<div class="l-ui-notice l-ui-notice--success">Success message</div>
<div class="l-ui-notice l-ui-notice--warning">Warning message</div>
<div class="l-ui-notice l-ui-notice--error">Error message</div>

Rails integration

The layout automatically renders flash messages. Set flash in your controller:

# Success
flash[:notice] = "Record created successfully"
redirect_to @record

# Warning
flash[:warning] = "Please review the changes"

# Error
flash[:alert] = "Something went wrong"

CSS classes

Notice CSS classes
Class	Flash key	Description
`l-ui-notice l-ui-notice--success`	`:notice`	Green success message
`l-ui-notice l-ui-notice--warning`	`:warning`	Yellow warning message
`l-ui-notice l-ui-notice--error`	`:alert`	Red error message