SendGrid style-guide standard email cards

email-cards-standard.html

<div class="email-card-wrap is-live">
  <div class="email-card-send-time has-value">
    <a class="btn btn-secondary" href="#">Send Instantly</a>
  </div>
  <div class="email-card-stats">
    <div class="email-stat">
      <p class="stat">12,230</p>
      <p class="label">Emails Sent</p>
    </div>
    <div class="email-stat">
      <p class="stat delivered">96.60%</p>
      <p class="label">Delivered</p>
    </div>
    <div class="email-stat">
      <p class="stat unique-opens">82.20%</p>
      <p class="label">Unique Opens</p>
    </div>
    <div class="email-stat">
      <p class="stat unique-clicks">60.24%</p>
      <p class="label">Unique Clicks</p>
    </div>
    <div class="email-stat">
      <p class="stat unsubscribes">2.04%</p>
      <p class="label">Unsubscribes</p>
    </div>
  </div>
  <div class="email-card">
    <div class="email-card-count">
      <p>Email 1</p>
    </div>
    <div class="email-card-content">
      <a class="btn btn-secondary" href="#">
        <span class="email-card-content-edit"><i class="sg-icon sg-icon-pencil"></i> Edit</span>
      </a>
    </div>
    <div class="email-card-details">
      <table>
        <tr>
          <td class="label">Subject</td>
          <td><a href="#">Welcome to SendGrid</a></td>
        </tr>
        <tr>
          <td class="label">Preheader</td>
          <td><a href="#">Get started sending up to 12,000 emails today</a></td>
        </tr>
        <tr>
          <td class="label">From Sender</td>
          <td><a href="#">Tyler Hale &lt;[email protected]&gt;</a></td>
        </tr>
      </table>
    </div>
    <div class="email-row-actions">
      <i class="sg-icon sg-icon-ellipsis"></i>
      <div class="action-icons">
        <span data-tooltip="Edit" data-tooltip-pos="up"><i class="sg-icon sg-icon-pencil"></i></span>
        <span data-tooltip="Duplicate" data-tooltip-pos="up"><i class="sg-icon sg-icon-copy"></i></span>
        <span data-tooltip="Create Template" data-tooltip-pos="up"><i class="sg-icon sg-icon-create"></i></span>
        <span data-tooltip="Export HTML" data-tooltip-pos="up"><i class="sg-icon sg-icon-export"></i></span>
        <span data-tooltip="Preview" data-tooltip-pos="up"><i class="sg-icon sg-icon-view"></i></span>
        <span data-tooltip="Delete" data-tooltip-pos="up"><i class="sg-icon sg-icon-trash"></i></span>
      </div>
    </div>
  </div>
</div>