Link copied!

Card Class Examples

This component of the Design System is deprecated, which means it'll be replaced or removed soon. Until that, the Design System team will support existing implementations, but please avoid implementing this component in new projects.
<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 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-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-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" 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" 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" type="button">
          <e-icon icon="pencil"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Copy">
        <button class="e-btn e-btn-onlyicon" type="button">
          <e-icon icon="e-copy"></e-icon>
        </button>
      </e-tooltip>
      <e-tooltip content="Delete">
        <button class="e-btn e-btn-onlyicon" 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>
New AI Feature!

Try our new AI skill to implement designs easier and faster with guided generation and best-practice patterns. For more info, visit this page.