Card Examples

<div class="e-grid e-grid-medium e-grid-wrap">
  <div class="e-cell e-cell-3 e-cell-medium">
    <e-card>
      <img slot='thumbnail' class="e-card__preview" src="https://place-hold.it/289x216/7a81be/ffffff&amp;text=289x216&amp;fontsize=23">
      <div slot="header-start">Product launch</div>
      <button slot='header-end' class="e-btn e-btn-onlyicon">
        <e-icon icon="more-horizontal"></e-icon>
      </button>
      <div slot="content">
        <p>Plan the launch timeline and assets.</p>
      </div>
      <button slot='actions' class="e-btn e-btn-onlyicon">
        <e-icon icon="edit"></e-icon>
      </button>
    </e-card>
  </div>
</div>
<div class="e-grid e-grid-medium e-grid-wrap">
  <div class="e-cell e-cell-3 e-cell-medium">
    <e-card>
      <div slot="content">
        <h3>Quarterly update</h3>
        <p>Highlights and performance summary for Q1.</p>
      </div>
      <div slot="actions">
        <button class="e-btn e-btn--secondary">View report</button>
      </div>
    </e-card>
  </div>
</div>
<div class="e-grid e-grid-medium e-grid-wrap">
  <div class="e-cell e-cell-3 e-cell-medium">
    <e-card highlight>
      <div slot="content">
        <strong>Priority item</strong>
        <p>This card uses the highlight style.</p>
      </div>
    </e-card>
  </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.