Link copied!

Card Examples

<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">
        Title Goes Here
      </div>
    </div>
  </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>
<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">
        <button type="button" class="e-btn e-btn-borderless e-btn-onlyicon">
          <e-icon icon="plus" size="medium"></e-icon>
        </button>
      </div>
    </div>
  </div>
</div>

<a href="#" 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>
  </div>
</a>
<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">
          Title Goes Here
        </div>
        <div class="e-emptystate__lead">
          Description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </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">
          Descriptio goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div class="e-emptystate__button e-btn e-btn-secondary">
          Primary Button
        </div>
      </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">
        Text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </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">
        Title Goes Here
      </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">
        Title Goes Here
      </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">
        Title Goes Here
      </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">
        Title Goes Here
      </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">
        Title Goes Here
      </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">
        Title Goes Here
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Label
        </div>
      </div>
    </div>
    <div class="e-card__description">
      Description goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </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="auto">
        <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="e-copy" type="table"></e-icon>
             Copy
          </a>
          <a class="e-dropdown__item" href="#0">
            <e-icon icon="trash-o" type="table"></e-icon>
             Delete
          </a>
        </div>
      </e-dropdown>
    </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">
        Title Goes Here
      </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">
        Title Goes Here
      </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">
        Title Goes Here
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Label
        </div>
      </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="Delete">
        <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__labels">
    <div class="e-label">
      <e-icon class="e-margin-right-xs" icon="save" size="small"></e-icon>
      Saved
    </div>
  </div>
  <div class="e-card__action">
    <a class="e-btn e-btn-primary" href="#">Insert Into Campaign</a>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">Title Goes Here</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">
        Title Goes Here
      </div>
      <div class="e-card__badge">
        <div class="e-label e-label-secondary">
          Label
        </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">
            Text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </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 Item
      </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">
        <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="Text input value">
    </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">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="pencil"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Copy">
        <button class="e-btn e-btn-onlyicon e-svgclickfix" type="button">
          <e-icon icon="e-copy"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Delete">
        <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="#">
      Create Email
    </a>
  </div>
  <div class="e-card__lead">
    <div class="e-card__caption">
      <div class="e-card__title">
        Title Goes Here
      </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">
            Title Goes Here
          </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 adipiscing 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 Item
          </div>
        </div>
      </div>
    </div>
  </div>
</div>