sendgrid-gists

<h4>Categories</h4>
<ul class="category-list">
  <li><a class="is-active" href="#">All Designs (100)</a></li>
  <li><a href="#">Birthday (3)</a></li>
  <li><a href="#">Ecommerce (4)</a></li>
  <li><a href="#">Feedback (6)</a></li>
  <li><a href="#">Holidays (10)</a></li>
  <li><a href="#">Newsletters (20)</a></li>
  <li><a href="#">Promotional (7)</a></li>
  <li><a href="#">Transaction (12)</a></li>

sendgrid-gists

<header class="accordion-header">
  <p>Template</p>
  <p class="sort sort-desc">Last Edited</p>
</header>
<div class="accordion-wrapper accordion-caret-left is-templates" id="accordion-example-templates">
  <div class="accordion-panel is-visible">
    <div class="accordion-title">
      <h3>Password Reset</h3>
      <p class="date">March 25, 2019 1:01 PM PDT</p>
      <div class="actions">

sendgrid-gists

<header class="flex-header is-light">
  <!-- same children as flexible header -->
</header>

sendgrid-gists

<div class="card is-upsell">
  <h3>100/day not enough? Send 40,000 emails/mo through our API for free for 30 days!</h3>
  <p>Interested in testing out the best that our Email API has to offer? With our Free Trial, you’ll have access to 40,000 emails through the API for 30 days.</p>
  <div class="btn-list">
    <a href="#" class="btn btn-primary btn-small">Send 40K Emails for Free</a>
    <a href="#" class="btn btn-tertiary btn-small">Learn More</a>
  </div>
</div>

sendgrid-gists

<div class="field-mapping-wrap">
  <div class="field-mapping-header">
    <p class="field-mapping-title">email</p>
    <p class="field-mapping-status"><i class="sg-icon sg-icon-check-circle"></i>Mapped</p>
  </div>
  <div class="field-mapping-list">
    <div class="row">
      <div class="col-4">
        <div class="input-select-wrap is-required">
          <label class="input-select-label" for="select2-example-default">Field mapped to:</label>

sendgrid-gists

<div class="btn-list">
  <div class="btn btn-secondary btn-dropdown dropdown has-icon">
    <i class="sg-icon sg-icon-filter"></i>
    Filter Dropdown
    <ul class="dropdown-menu">
      <li class="input-checkbox-wrap">
        <input type="checkbox" id="test1"/>
        <label class="input-checkbox-label" for="test1"><span>All Filters</span></label>
      </li>
      <li class="input-checkbox-wrap">

sendgrid-gists

<div class="stats-card secondary">
  <div class="card-stat">
    <p class="stat">873</p>
    <p class="label">Results</p>
  </div>
  <div class="card-stat">
    <p class="stat small-stat valid">81.56%</p>
    <p class="stat valid">712</p>
    <p class="label">Valid</p>
  </div>

sendgrid-gists

<div class="stats-card">
  <div class="card-stat">
    <p class="stat">12,230</p>
    <p class="label">Emails Sent</p>
  </div>
  <div class="card-stat">
    <p class="stat delivered">96.60%</p>
    <p class="label">Delivered</p>
  </div>
  <div class="card-stat">

sendgrid-gists

<table class="table-wrap has-internal-checkboxes">
  <thead>
    <tr>
      <th colspan="2">Desktop Clients</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="list-name">Apple Mail</td>
      <td class="checkbox-grid">

sendgrid-gists

<div class="card is-centered pie-chart-card">
  <span class="badge mantis">Good</span>
  <div class="pie-chart">
    <div class="pie-chart-svg">
      <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
        <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
        <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#9e9e9e" stroke-width="2"></circle>
        <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#18c96e" stroke-width="2" stroke-dasharray="60 40" stroke-dashoffset="0"></circle>
        <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b71c1c" stroke-width="2" stroke-dasharray="20 80" stroke-dashoffset="45"></circle>
        <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#9e9e9e" stroke-width="2" stroke-dasharray="25 75" stroke-dashoffset="25"></circle>