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

Card

Default

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

<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Variations

No title
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-card-no_title

<div class="e-card e-card-no_title">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x240/7a81be/ffffff&amp;text=240x240&amp;fontsize=23">
  </div>
</div>
<div class="e-card e-card-no_title">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x240/7a81be/ffffff&amp;text=240x240&amp;fontsize=23">
  </div>
</div>
JavaScript
Copy JavaScript

No content
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-card-no_content

<div class="e-card e-card-no_content">
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title e-card__title-multiple">
        <p>
          Value 15%
        </p>
        <p>
          Minimum order value
        </p>
      </div>
      <div class="e-card__badge">
        <e-icon class="e-clickable" icon="plus" size="medium"></e-icon>
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-no_content">
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title e-card__title-multiple">
        <p>
          Value 15%
        </p>
        <p>
          Minimum order value
        </p>
      </div>
      <div class="e-card__badge">
        <e-icon class="e-clickable" icon="plus" size="medium"></e-icon>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript

Value 15%

Minimum order value

With emptystate
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-card-emptystate > .e-emptystate

<div class="e-card e-card-no_title e-card-emptystate">
  <div class="e-card__content">
    <div class="e-emptystate">
      <div class="e-emptystate__content">
        <div class="e-emptystate__title">
          Veniam pariatur deserunt laboris sint
        </div>
        <div class="e-emptystate__lead">
          Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
        </div>
        <div class="e-emptystate__button e-btn e-btn-secondary">
          Primary button
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-no_title e-card-emptystate">
  <div class="e-card__content">
    <div class="e-emptystate">
      <div class="e-emptystate__content">
        <div class="e-emptystate__title">
          Veniam pariatur deserunt laboris sint
        </div>
        <div class="e-emptystate__lead">
          Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
        </div>
        <div class="e-emptystate__button e-btn e-btn-secondary">
          Primary button
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Veniam pariatur deserunt laboris sint
Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
Primary button

With auto height emptystate
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-card-emptystate.e-card-auto_height > .e-emptystate

<div class="e-card e-card-no_title e-card-emptystate e-card-auto_height">
  <div class="e-card__content">
    <div class="e-emptystate">
      <div class="e-emptystate__content">
        <div class="e-emptystate__lead">
          Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
        </div>
        <div class="e-emptystate__button e-btn e-btn-secondary">
          Primary button
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-no_title e-card-emptystate e-card-auto_height">
  <div class="e-card__content">
    <div class="e-emptystate">
      <div class="e-emptystate__content">
        <div class="e-emptystate__lead">
          Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
        </div>
        <div class="e-emptystate__button e-btn e-btn-secondary">
          Primary button
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Ea nisi ea commodo laboris occaecat ut laboris consectetur dolore
Primary button

Small size
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card-small

<div class="e-card e-card-small">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/180x130/7a81be/ffffff&amp;text=180x130&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-small">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/180x130/7a81be/ffffff&amp;text=180x130&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Non-square
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card-auto_height

<div class="e-card e-card-auto_height">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x130/7a81be/ffffff&amp;text=240x130&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-auto_height">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x130/7a81be/ffffff&amp;text=240x130&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Smaller image
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/160x160/7a81be/ffffff&amp;text=160x160&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/160x160/7a81be/ffffff&amp;text=160x160&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Smaller image 2
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x60/7a81be/ffffff&amp;text=240x60&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x60/7a81be/ffffff&amp;text=240x60&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

No checkerboard
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card-no_checkerboard

<div class="e-card e-card-no_checkerboard">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x60/7a81be/ffffff&amp;text=240x60&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-no_checkerboard">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x60/7a81be/ffffff&amp;text=240x60&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Cover image
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-card">
  <div class="e-card__content" style="background-image: url('https://place-hold.it/1024x200/7a81be/ffffff&amp;text=1024x200&amp;fontsize=43')"></div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content" style="background-image: url('https://place-hold.it/1024x200/7a81be/ffffff&amp;text=1024x200&amp;fontsize=43')"></div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Description and Footer
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card__footer

<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
    <div class="e-card__description">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="e-card__footer">
      <a class="e-btn e-btn-primary">
        Primary Action
      </a>
      <e-dropdown data-markup-content="&lt;e-icon icon=&quot;dots&quot;&gt;&lt;/e-icon&gt;" data-markup-class="e-btn e-btn-borderless e-btn-onlyicon" data-markup-class-active="e-btn-active" data-dropdown-align="top">
        <div class="e-dropdown__content">
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
             Preview
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
             Edit
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
             Copy
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
             Delete
          </a>
        </div>
      </e-dropdown>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
    <div class="e-card__description">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="e-card__footer">
      <a class="e-btn e-btn-primary">
        Primary Action
      </a>
      <e-dropdown data-markup-content="&lt;e-icon icon=&quot;dots&quot;&gt;&lt;/e-icon&gt;" data-markup-class="e-btn e-btn-borderless e-btn-onlyicon" data-markup-class-active="e-btn-active" data-dropdown-align="top">
        <div class="e-dropdown__content">
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
             Preview
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
             Edit
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="pencil" type="table"></e-icon>
             Copy
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="eye" type="table"></e-icon>
             Delete
          </a>
        </div>
      </e-dropdown>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Primary Action
Preview Edit Copy Delete

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

<div class="e-card">
  <div class="e-card__content">
    <iframe class="e-card__preview e-card__preview-stretch" src="https://via.placeholder.com/240x190/7a81be/FFFFFF?text=Iframe+content"></iframe>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content">
    <iframe class="e-card__preview e-card__preview-stretch" src="https://via.placeholder.com/240x190/7a81be/FFFFFF?text=Iframe+content"></iframe>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Iframe with prevent click inside
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card__content-prevent_click

<div class="e-card">
  <div class="e-card__content e-card__content-prevent_click">
    <iframe class="e-card__preview e-card__preview-stretch" src="https://via.placeholder.com/240x190/7a81be/FFFFFF?text=Iframe+content"></iframe>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content e-card__content-prevent_click">
    <iframe class="e-card__preview e-card__preview-stretch" src="https://via.placeholder.com/240x190/7a81be/FFFFFF?text=Iframe+content"></iframe>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

With badge
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card__badge

<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-card">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
Default

No hover
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card-no_hover

<div class="e-card e-card-auto_height e-card-no_hover">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x100/7a81be/ffffff&amp;text=240x100&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-auto_height e-card-no_hover">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x100/7a81be/ffffff&amp;text=240x100&amp;fontsize=23">
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Default
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
Default

Fluid
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card-fluid

<div class="e-row">
  <div class="e-col-5">
    <div class="e-card e-card-fluid">
      <div class="e-card__content">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-5">
    <div class="e-card e-card-fluid">
      <div class="e-card__content">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Empty with icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card__content-empty

<div class="e-card e-clickable">
  <div class="e-card__content e-card__content-empty">
    <e-icon icon="plus" size="middle"></e-icon>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Add new item
      </div>
    </div>
  </div>
</div>
<div class="e-card e-clickable">
  <div class="e-card__content e-card__content-empty">
    <e-icon icon="plus" size="middle"></e-icon>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Add new item
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Add new item

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

<div class="e-card e-card-has_overlay">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__buttons">
    <div class="e-buttongroup e-buttongroup-sticky">
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="pencil"></e-icon>
        </button>
      </e-tooltip>
    </div>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <input class="e-input e-card__input" type="text" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    </div>
  </div>
</div>
<div class="e-card e-card-has_overlay">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__buttons">
    <div class="e-buttongroup e-buttongroup-sticky">
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="pencil"></e-icon>
        </button>
      </e-tooltip>
    </div>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <input class="e-input e-card__input" type="text" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    </div>
  </div>
</div>
JavaScript
Copy JavaScript

With buttons
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-card-has_overlay > .e-card__buttons, .e-card__action

<div class="e-card e-card-has_overlay">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__buttons">
    <div class="e-buttongroup e-buttongroup-sticky">
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="pencil"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="files-o"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="trash-o"></e-icon>
        </button>
      </e-tooltip>
    </div>
  </div>
  <div class="e-card__action">
    <a class="e-btn e-btn-primary" href="#">
      Edit this item
    </a>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
<div class="e-card e-card-has_overlay">
  <div class="e-card__content">
    <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
  </div>
  <div class="e-card__buttons">
    <div class="e-buttongroup e-buttongroup-sticky">
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="pencil"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="files-o"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Edit item">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="trash-o"></e-icon>
        </button>
      </e-tooltip>
    </div>
  </div>
  <div class="e-card__action">
    <a class="e-btn e-btn-primary" href="#">
      Edit this item
    </a>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Edit this item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Active

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

<div class="e-row">
  <div class="e-col-3">
    <div class="e-card e-card-active">
      <div class="e-card__content">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-3">
    <div class="e-card e-card-active">
      <div class="e-card__content">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum assumenda iusto perspiciatis.

Usage

Components next to each other
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-grid e-grid-medium e-grid-wrap">
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid e-clickable">
      <div class="e-card__content e-card__content-empty">
        <e-icon icon="plus" size="middle"></e-icon>
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Add new item
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="e-grid e-grid-medium e-grid-wrap">
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid">
      <div class="e-card__content e-card__content-nopadding">
        <img class="e-card__preview" src="https://place-hold.it/240x190/7a81be/ffffff&amp;text=240x190&amp;fontsize=23">
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-3 e-cell-medium">
    <div class="e-card e-card-fluid e-clickable">
      <div class="e-card__content e-card__content-empty">
        <e-icon icon="plus" size="middle"></e-icon>
      </div>
      <div class="e-card__lead">
        <div class="e-card__caption">
          <div class="e-card__title">
            Add new item
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Add new item