sendgrid-gists

<header class="flex-header">
  <div>
    <a class="flex-header-action">
      <i class="sg-icon sg-icon-x"></i>
    </a>
    <div class="flex-header-title">
      <h3>
        Header Including Everything
        <i class="sg-icon sg-icon-info-circle"></i>
      </h3>

sendgrid-gists

<div class="counter">
  Credits
  <span class="counter-bubble">
    100
  </span>
</div>

sendgrid-gists

<div class="alert alert-beta">
  <p>During BETA, Automations isn't connected to the Marketing Campaigns offering in your account. <a href="#">Learn more</a>.</p>
</div>

sendgrid-gists

<div class="btn-list">
  <button class="btn btn-secondary btn-save">
    <span class="btn-save-label">Save</span>
    <svg class="sg-loader is-small">
      <rect class="logo-square bottom-left" width="5" height="5" />
      <rect class="logo-square bottom-middle" width="5" height="5" />
      <rect class="logo-square middle" width="5" height="5" />
      <rect class="logo-square top-middle" width="5" height="5" />
      <rect class="logo-square top-right" width="5" height="5" />
      <rect class="logo-square middle-left" width="5" height="5" />

sendgrid-gists

<div class="tab-component-wrapper">
  <ul class="tab-wrapper is-centered">
    <li class="tab is-active">
      <div class="tab-title">Settings</div>
    </li>
    <li class="tab">
      <div class="tab-title">Tags</div>
    </li>
    <li class="tab">
      <div class="tab-title">A/B Testing</div>

sendgrid-gists

<div class="modal-fullscreen">
  <header class="flex-header">
    <div>
      <a class="flex-header-action modal-close">
        <i class="sg-icon sg-icon-x"></i>
      </a>
      <div class="flex-header-title">
        <h3>Fullscreen Modal</h3>
      </div>
    </div>

sendgrid-gists

<div class="template-wrap">
  <div class="thumb">
    <img src="https://placeholdit.co//i/300x300?&bg=e9ecef&fc=546b81&text=Template%20Image" alt="Template Image">
    <div class="btn-list">
      <button class="btn btn-primary">Select</button>
    </div>
  </div>
  <p class="is-size-h4">Code Template</p>
  <p class="editor-type"><i class="sg-icon sg-icon-editor-code"></i> Code Editor</p>
</div>

sendgrid-gists

<table class="table-wrap is-billing">
  <tr>
    <th>Base Plan</th>
    <td>
      <p>Pro 100K</p>
      <p class="plan-details">100,000 emails/mo</p>
      <button class="btn btn-small btn-secondary">Change Plan</button>
    </td>
    <td>
      $67.96

sendgrid-gists

<table class="table-wrap is-billing">
  <tr>
    <th><strong>Payment Method</strong></th>
    <td>
      <p>Mastercard ending in 0163 <span class="expiration">Expires 12/2018</span></p>
    </td>
    <td class="align-right">
      <a href="#"><i class="sg-icon sg-icon-pencil"></i></a>
    </td>
  </tr>

sendgrid-gists

<table class="table-wrap">
  <tr>
    <td><span class="label label-error">Failed</span></td>
    <td><strong><a href="#">April 30, 2018</a></strong></td>
    <td>Mastercard ending in 0163</td>
    <td class="align-right">$93.43</td>
  </tr>
  <tr>
    <td class="has-alert" colspan="4">
      <div class="alert alert-danger">