Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Helper link

The learn more link opens a related documentation page in a new browser window.

The link must be opened in a new browser window, so the user’s workflow isn’t broken by accident.

Since the function is slightly different, we use a different icon for it — so users can distinguish between tooltip helpers and learn more links instantly.

Guidelines

  • Don’t use the learn more link to:
    • Only display a tooltip — use the helper tooltip instead.
    • Redirect the user to a page that’s not the Emarsys Documentation.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-helperlink

<a class="e-helperlink" href="#0" target="_blank">
  <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
  <span class="e-helperlink__text">
    Learn more
  </span>
</a>
<a class="e-helperlink" href="#0" target="_blank">
  <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
  <span class="e-helperlink__text">
    Learn more
  </span>
</a>
JavaScript
Copy JavaScript
Learn more

Variations

Without padding
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-helperlink-nopadding

<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
  <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
  <span class="e-helperlink__text">
    Learn more
  </span>
</a>
<a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
  <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
  <span class="e-helperlink__text">
    Learn more
  </span>
</a>
JavaScript
Copy JavaScript
Learn more

Label
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-field">
  <label class="e-field__label">
    Label
    <a class="e-helperlink" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </label>
  <input class="e-input">
</div>
<div class="e-field">
  <label class="e-field__label">
    Label
    <a class="e-helperlink" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </label>
  <input class="e-input">
</div>
JavaScript
Copy JavaScript

Input
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-field">
  <input class="e-input">
  <div class="e-field__message">
    <a class="e-helperlink" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </div>
</div>
<div class="e-field">
  <input class="e-input">
  <div class="e-field__message">
    <a class="e-helperlink" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </div>
</div>
JavaScript
Copy JavaScript
Learn more

Table
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<table class="e-table" data-e-version="2">
  <thead>
    <tr>
      <td class="e-table__col e-table__col-filter" colspan="3">
        <div class="e-table__filter">
          <label class="e-field__label e-field__label-inline e-field__label-small" for="campaign_category">
            Email category
          </label>
          <select class="e-select e-select__select2 e-select-large" id="campaign_category" name="campaign_category">
            <option value>
              All categories
            </option>
            <option value="0">
              No category
            </option>
            <option value="100000091">
              Animals
            </option>
          </select>
        </div>
        <div class="float-right e-table__settings">
          <a class="e-helperlink" href="#0" target="_blank">
            <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
            <span class="e-helperlink__text">
              Learn more
            </span>
          </a>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        Email name
      </th>
      <th>
        Status
      </th>
      <th class="e-table__col e-table__col-actions"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Ullamco duis non dolore enim in? 
      </td>
      <td>
        Tempor velit, fugiat ex eu in ea duis irure sint reprehenderit aliquip. 
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Ad lorem mollit dolore, amet sint ea mollit et, laborum, et laboris. 
      </td>
      <td>
        Ipsum cillum ut, ad voluptate ullamco aliqua adipiscing. 
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
<table class="e-table" data-e-version="2">
  <thead>
    <tr>
      <td class="e-table__col e-table__col-filter" colspan="3">
        <div class="e-table__filter">
          <label class="e-field__label e-field__label-inline e-field__label-small" for="campaign_category">
            Email category
          </label>
          <select class="e-select e-select__select2 e-select-large" id="campaign_category" name="campaign_category">
            <option value>
              All categories
            </option>
            <option value="0">
              No category
            </option>
            <option value="100000091">
              Animals
            </option>
          </select>
        </div>
        <div class="float-right e-table__settings">
          <a class="e-helperlink" href="#0" target="_blank">
            <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
            <span class="e-helperlink__text">
              Learn more
            </span>
          </a>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        Email name
      </th>
      <th>
        Status
      </th>
      <th class="e-table__col e-table__col-actions"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        In mollit do, aliquip ex laboris anim. 
      </td>
      <td>
        Laboris dolor dolor irure ut consequat nisi eu sed, proident, sunt ut? 
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
    <tr>
      <td>
        Non ad sit eiusmod duis qui, occaecat, quis dolor est deserunt? 
      </td>
      <td>
        Culpa laborum voluptate adipiscing, fugiat quis velit excepteur irure dolor? 
      </td>
      <td class="e-table__col e-table__col-actions">
        <e-tooltip valign="baseline" content="Edit">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
          </a>
        </e-tooltip>
        <e-tooltip valign="baseline" content="Copy">
          <a class="e-svgclickfix" href="#0">
            <e-icon icon="files-o" type="table"></e-icon>
          </a>
        </e-tooltip>
      </td>
    </tr>
  </tbody>
</table>
JavaScript
Copy JavaScript
Learn more
Email nameStatus
Aute, ea amet magna eiusmod enim ut, est occaecat dolore, pariatur. Ipsum dolore sunt incididunt ut ut proident ut sed, lorem.
Laborum, nulla aliquip deserunt mollit minim ea, ipsum minim lorem. Esse do aliqua nostrud, aliqua reprehenderit quis mollit, pariatur do.

Fullheight header
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-fullheight__header">
  <div class="e-fullheight__actions">
    <div class="e-btn e-btn-onlyicon">
      <e-icon icon="user"></e-icon>
    </div>
    <a class="e-helperlink" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </div>
</div>
<div class="e-fullheight__header">
  <div class="e-fullheight__actions">
    <div class="e-btn e-btn-onlyicon">
      <e-icon icon="user"></e-icon>
    </div>
    <a class="e-helperlink" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </div>
</div>
JavaScript
Copy JavaScript
Learn more