SendGrid style-guide templates accordion

accordion-templates.html

<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">
        <div class="btn btn-dropdown dropdown">
          <i class="sg-icon sg-icon-ellipsis-vertical"></i>
          <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-pencil"></i> Edit Name</a></li>
            <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-copy"></i> Duplicate</a></li>
            <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-trash"></i> Delete</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="accordion-content">
      <div class="template-details">
        <p class="template-id">Template ID: 431537ed-09a1-44db-b7a0-04713722fd9</p>
        <button class="btn btn-secondary btn-small">Add Version</button>
      </div>
      <table class="table-wrap">
        <thead>
          <tr>
            <th>Dynamic Email Version</th>
            <th>Editor</th>
            <th>Last Edited</th>
            <th class="actions">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="template-version">
              <a href="#">2019 Update</a>
              <span class="badge mantis">Active</span>
            </td>
            <td class="template-type"><i class="sg-icon sg-icon-code"></i> Code</td>
            <td>March 22, 2019 1:01 PM PDT</td>
            <td class="actions">
              <div class="btn btn-dropdown dropdown">
                <i class="sg-icon sg-icon-ellipsis-vertical"></i>
                <ul class="dropdown-menu">
                  <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-check-thin"></i> Make Active</a></li>
                  <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-pencil"></i> Edit</a></li>
                  <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-view"></i> Preview</a></li>
                  <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-copy"></i> Duplicate</a></li>
                  <li><a href="#" class="dropdown-link"><i class="sg-icon sg-icon-trash"></i> Delete</a></li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>