Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

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
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>
Learn more

Variations

Without padding
Copy Pug
Copy HTML
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>
Learn more

Label
Copy Pug
Copy HTML
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>

Input
Copy Pug
Copy HTML
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>
Learn more

Table
Copy Pug
Copy HTML
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>
        Dolore, voluptate in aliqua sint occaecat exercitation. 
      </td>
      <td>
        Sunt ut do in sed adipiscing sint, esse. 
      </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>
        Dolor commodo laboris labore anim ipsum, nisi, non veniam, sit velit laborum magna proident? 
      </td>
      <td>
        Cupidatat non, excepteur, est do duis excepteur non sit, deserunt, dolore. 
      </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>Dolor minim dolore ex et, anim laborum, elit adipiscing cillum minim dolor. </td><td>Ea, ullamco qui deserunt, sit amet commodo, magna et enim? </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>Laborum, aliqua id magna, consequat in ullamco aliqua, in ipsum. </td><td>Ut sed, sunt proident laboris ea. </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>
Learn more
Email nameStatus
Laboris dolor, tempor labore, nulla, nulla irure proident sint. Velit amet in esse ut in in, tempor, cupidatat laborum commodo minim nulla dolor deserunt?
Do est laboris consectetur duis duis excepteur cupidatat labore quis dolor, adipiscing. Lorem exercitation, nulla, dolor ex lorem laboris, anim nisi veniam.

Fullheight header
Copy Pug
Copy HTML
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>
Learn more