Emarsys Design System



Link copied!
  • Welcome
  • Getting Started
    • For Developers
    • For Designers
    • Design Principles
    • Contributing
    • Guideline Writing
    • Usage with Frameworks
  • Style
    • Colors
    • Icons
      • Guidelines
      • Library
      • Examples
      • Icons for Common Actions
      • API
    • Typography
    • Grid & Spacing
      • Guidelines
      • Basic Grid
      • Flex Grid
    • UI Text
      • Guidelines
      • Tone of Voice
      • Vocabulary
    • Style Rules
      • Styles and States
      • Elevation and Shadows
      • Rounded Corners
    • Images
      • Guidelines
      • Image Library
      • Examples
      • API
  • Structure
    • Table Page
      • Guidelines
      • Examples
    • Tabbed Page
      • Examples
    • Form Page
      • Guidelines
      • Examples
    • Card Page
      • Examples
    • Editor Page
      • Guidelines
      • Examples
    • Steps Page
      • Guidelines
      • Examples
    • Iframe Page
    • Navigation
      • Guidelines
      • Examples
      • API
  • Components
    • Accordion
      • Guidelines
      • Examples
      • API
    • Action List
      • Guidelines
      • Examples
      • API
    • Box
      • Examples
    • Button
      • Guidelines
      • Examples
    • Card
      • Examples
    • Checkbox
      • Guidelines
      • Examples
      • API
    • Checklist
      • Examples
    • Color Picker
      • Examples
      • API
    • Compare
      • Examples
      • API
    • Confetti
      • Examples
      • API
    • Datagrid
      • Guidelines
      • Examples
      • Examples With Card
      • Examples With Group
      • API
    • Date-Time Picker
      • Examples
      • API
    • Device Display
      • Examples
      • API
    • Dialog
      • Guidelines
      • Examples
      • API
    • Dropdown
      • Guidelines
      • Examples
      • Dropdown API
    • Ellipsis
      • Examples
      • API
    • Emoji Picker
      • Examples
      • API
      • Test API
    • Field
      • Examples
    • Helper Link
      • Examples
    • Illustrated Message
      • Guidelines
      • Examples
      • API
    • Inplace Editor
      • Examples
      • API
    • Input Group
      • Examples
    • Label
      • Guidelines
      • Examples
    • Legend
      • Guidelines
      • Examples
    • List
      • Examples
    • Multiselect
      • Examples
      • Guidelines
      • API
    • Notification
      • Guidelines
      • Examples
      • API
    • Number Input
      • Examples
      • Guidelines
      • API
    • Order
      • Examples
      • API
    • Overlay
      • Examples
    • Pagination
      • Guidelines
      • Examples
      • API
    • Password Input
      • Examples
      • API
    • Popup Panel
      • Examples
    • Progress
      • Guidelines
      • Examples
    • Radio Button
      • Guidelines
      • Examples
      • API
    • Ring Chart
      • Examples
      • API
    • Rule List
      • Guidelines
      • Examples
      • API
    • Search Input
      • Guidelines
      • Examples
    • Select
      • Examples
      • API
    • Separator
      • Examples
      • API
    • Skeleton
      • Examples
      • API
    • Slider
      • Examples
      • API
    • Snackbar
      • Examples
    • Spinner
      • Guidelines
      • Examples
      • API
    • Step Bar
      • Examples
      • API
    • Suggest Input
      • Guidelines
      • Examples
      • API
    • Suggest Multiple Input
      • Guidelines
      • Examples
      • API
    • Switch
      • Guidelines
      • Examples
      • API
    • Tab Bar
      • Examples
      • API
    • Table
      • Examples
    • Text Input
      • Examples
      • Guidelines
    • Textarea
      • Examples
      • Guidelines
    • Time Picker
      • Examples
      • API
    • Toolbox
      • Examples
    • Tooltip
      • Guidelines
      • Examples
      • API
    • Truncate
      • Examples
      • API
    • File Upload
      • Examples
      • API
    • Validator
      • Guidelines
      • Examples
      • API
    • Widget
      • Examples
      • Guidelines
  • Collections
    • Action Trigger
    • Charts
    • Data Display
    • Data Input
    • Floating
    • Forms
    • Page Layout
    • Navigation
    • System Feedback
  • Patterns
    • Dashboard Guidelines
    • Editor Guidelines
    • Scheduling Guidelines
    • Form Guidelines
    • Data Visualization
    • Error Handling Guidelines
    • Permission Handling Guidelines
    • Product News Guidelines
  • Utilities
    • CSS Utility Classes
    • Functions
      • Auth
        • Authentication Token
        • EMSAdmin Authentication Token
        • Reauthentication
      • Config
        • Get Config
        • Get Current Config
        • Get Feature Service
        • Get Flipper Service
        • Consent Accepted Check
      • DOM
        • Sanitize
      • Navigation
        • Get Top Origin
        • Get Top URL
        • Navigate To Route
      • UI
        • Create Popup
          • Examples
    • Components
      • Numeric
        • Examples
        • API
      • Time
        • Examples
        • API
      • Iframe Loader
        • Examples
      • Duration
        • Examples
        • API
    • Deprecated Functions
      • Authentication Token
      • Translation
      • Tracking
      • Navigate
      • Get Top URL
      • Get Top Origin
      • Top Hash Change
  • Accessibility
    • Product Accessibility
    • Keyboard Support
    • Screen Reader Support
  • Migration
    • Criteria & Rule Builder
    • Tab (CSS)
    • Vertical Tab (CSS)
  • Release Notes
  • Playground
    • Learn Playground Basics
    • Tips and Tricks
  • Product Components
    • Charts
      • Guidelines
      • Examples
      • API
    • VCE
      • Variable Configurations
        • Examples
        • API
      • Variables Editor
        • Examples
        • API
      • Code Editor
        • Examples
        • API
      • HTML Editor
        • Examples
        • API
      • Preview Content Block
        • Examples
        • API
      • Preview Javascript Content
        • Examples
        • API
      • Plugins (WIP)
        • borderer
          • Borderer
            • API
          • Borderer Core
            • API
          • Borderer Image Focus Strategy
            • API
          • Borderer Editable Text Strategy
            • API
          • Borderer Editable Text Strategy
            • API
          • Borderer Window Resize Strategy
            • API
        • image
          • Replace Broken Image
            • API
          • Image Link Editor
            • API
        • link
          • Prevent Link Click
            • API
        • personalization
          • Personalization
            • API
          • Personalization Button
            • API
          • Personalization Drop
            • API
        • text
          • Editable Text Plugin
            • API
          • Text Inner Link Editor
            • API
          • Editable Text Custom Button
            • API
        • toolbar
          • Toolbar
            • Examples
            • API
          • Toolbar Custom Button
            • Examples
            • API
        • misc
          • Clean Device Width
            • API
          • Clean Pixel Ratio
            • API
      • Language
        • Language Name
          • Examples
          • API
        • Languages Selector
          • Examples
          • API
        • Languages Editor
          • Examples
          • API
      • Contacts (WIP)
        • Examples
        • API
      • Dialogs (WIP)
        • Examples
        • API

Notification Component

Emarsys Design System / Release Notes / Notification Component

The new Notification component merges our old Notice and Alert components into one neat, flexible web component! This new component can be used in a myriad of different ways: for displaying useful heads-ups inside the page, or floating an error message over the whole layout. You can check out this new component at the design system website

Published: 2020-11-23 10:00:00

View this page on GitHub

© 2025 Emarsys