Emarsys Design System



Welcome
Getting Started

Style

- Colors
- Icons
  
- Typography
- Grid & Spacing
  
- UI Text
  
- Style Rules
  
- 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
  
- Date-Time Picker
  
  - Examples
  - API
- Device Display
  
  - Examples
  - API
- Dialog
  
  - Guidelines
  - Examples
  - API
- Dropdown
  
- 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

Patterns

Utilities

- CSS Utility Classes
- Functions
  
  - Flipper Service
  - Feature Service
  - Config
  - Authentication Token
  - Translation
  - Tracking
  - Navigate
  - Get Top URL
  - Get Top Origin
  - Top Hash Change
  - Popup
    
    - Examples
    - API
  - Reauthentication
  - Consent Accepted Check
- Components
  
  - Numeric
    
    - Examples
    - API
  - Time
    
    - Examples
    - API
  - Iframe Loader
    
    - Examples
  - Duration
    
    - Examples
    - API
Accessibility

Migration

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

"customer-lifecycle/quality-trade-up" Image

Emarsys Design System / Style / Images / Image Library / "customer-lifecycle/quality-trade-up" Image

Example Code

<e-image name="customer-lifecycle/quality-trade-up" type="tactics"></e-image>

Description

—

View this page on GitHub

© 2025 Emarsys