SendGrid style-guide email cards with alerts

email-cards-alerts.html

<div class="email-card-wrap is-live has-alert">
  <div class="email-card-send-time has-value">
    <a class="btn btn-secondary" href="#">Send Instantly</a>
    <div class="alert alert-warning">
      <p><i class="sg-icon sg-icon-info-circle"></i>Changes you've made to this email have not been applied to your live automation.<button class="btn btn-small btn-primary">Save and Apply</button></p>
    </div>
  </div>
  <div class="email-card-stats">
    ...
  </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">
      ...
    </div>
  </div>
  <div class="alert alert-warning">
    <p><i class="sg-icon sg-icon-info-circle"></i>Changes you've made to this email have not been applied to your live automation.<button class="btn btn-small btn-primary">Save and Apply</button></p>
  </div>
</div>