SendGrid DX sendgrid-gists

sendgrid-gists / flex-header.html

Created November 7, 2018 22:40

SendGrid style-guide flexible header

	<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 / counter.html

Created November 7, 2018 21:04

SendGrid style-guide counter

sendgrid-gists / alerts-beta.html

Created September 10, 2018 18:57

SendGrid style-guide beta inline alerts

	<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 / buttons-save.html

Last active August 27, 2018 22:12

SendGrid style-guide save button

	<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 / tabs-addon.html

Created August 13, 2018 19:48

SendGrid style-guide tabs with addon

	<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 / modal-fullscreen.html

Last active November 16, 2018 23:17

SendGrid style-guide fullscreen modal

sendgrid-gists / template-thumbnails.html

Created August 6, 2018 22:08

SendGrid style-guide template thumbnails

	<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 / tables-billing-plan.html

Last active May 30, 2021 17:14

SendGrid style-guide plan table

	<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 / tables-billing-details.html

Created July 24, 2018 21:16

SendGrid style-guide billing details tables

	<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 / tables-billing-invoices.html

Created July 24, 2018 20:18

SendGrid style-guide billing invoice tables

	<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">

	<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>