Start Using The Design System
In this guide, we'll help you getting started coding a page using the Emarsys Design System.
If you have a question regarding components or layouts, get in touch with us using the chat application at the bottom right.
Writing in Pug
It's easier to write your HTML markup in the Pug template language. Our Design System provides Pug (formerly known as Jade) code for each component.
Inside an iframe
There are some instances when you want to display your UI inside an iframe. (e.g. when you're making plug-ins which is used in multiple services)
If you use an iframe, you'll have to declare the full header:
- You'll need to declare the proper Doctype for HTML5:
<!DOCTYPE html> - You'll need to declare the UTF-8 charset:
<meta charset=utf-8> - Emarsys Design System CSS:
<link rel='stylesheet' href='https://redirector.eservice.emarsys.net/ui/latest/css/app.css'> - Emarsys Design System JavaScript:
<script src='https://redirector.eservice.emarsys.net/ui/latest/js/app.js'></script>
Grid and layout
There are different grid systems you can use in the Design System.
Some of them require you to use specific content wrappers, so please read their component pages to get the exact details how to use them.
We have a base e-layout component you have to use to have consistent frame with the rest of our application.
Bootstrap grid
Our Design System provides a grid that's similar to the one you can find in Bootstrap, so it's easier to understand and to use.
Flex grid
Our Design System also provides a modern, flex-box-based grid.
Adding components
Please use this Design System site to find components you need, learn about when to use them, and how to implement them.
- Use the search bar at the top to find a specific component (e.g "button"), or browse by category in the left sidebar.
- See the variations of the component, and pick the one you need.
- Check and copy the code of the component (both HTML and Pug (Jade) are available!)
- You can also find common Emarsys page layouts under "Templates".