sendgrid-gists’s gists

sendgrid-gists / category-list.html

Created May 22, 2019 21:37

SendGrid style-guide category list

sendgrid-gists / accordion-templates.html

Last active May 22, 2019 22:04

SendGrid style-guide templates accordion

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

Last active May 14, 2019 17:14

SendGrid style-guide modal header

sendgrid-gists / card-upsell.html

Created April 3, 2019 21:45

SendGrid style-guide upsell card

	<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 / field-mapping.html

Last active March 27, 2019 20:28

SendGrid style-guide field mapping

	<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 / menu-filter.html

Created March 5, 2019 18:06

SendGrid style-guide filter dropdown menu

	<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 / stats-card-secondary.html

Created February 25, 2019 20:09

SendGrid style-guide secondary stats card

	<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 / stats-card.html

Created February 25, 2019 20:06

SendGrid style-guide stats card

sendgrid-gists / table-checkboxes.html

Last active December 5, 2018 23:55

SendGrid style-guide table with checkboxes in cells.

	<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 / pie-chart.html

Created November 14, 2018 17:39

SendGrid style-guide pie chart

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

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

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

SendGrid DX sendgrid-gists