SendGrid DX sendgrid-gists

sendgrid-gists / textarea-standard.html

Last active November 28, 2018 22:44

SendGrid style-guide standard textarea

	<div class="textarea-wrap is-required">
	<label class="textarea-label" for="textarea-required">Description</label>
	<textarea class="textarea-input" id="textarea-required" data-max-height="250"></textarea>
	</div>

sendgrid-gists / tooltips-underline.html

Last active September 5, 2018 22:16

SendGrid style-guide underline tooltips

	<span class="has-underline" data-tooltip="Tooltip up!" data-tooltip-pos="up">Tooltip Up</span>
	<span class="has-underline" data-tooltip="Tooltip right!" data-tooltip-pos="right">Tooltip Right</span>
	<span class="has-underline" data-tooltip="Tooltip down!" data-tooltip-pos="down">Tooltip Down</span>
	<span class="has-underline" data-tooltip="Tooltip left!" data-tooltip-pos="left">Tooltip Left</span>

sendgrid-gists / tabs-ab-testing.html

Created March 14, 2017 17:42

SendGrid style-guide a/b testing tabs

	<ul class="tab-wrapper is-ab-testing is-6-up">
	<li class="tab is-active"><span class="badge crown">A</span></li>
	<li class="tab"><span class="badge screample">B</span></li>
	<li class="tab"><span class="badge ron-burgundy">C</span></li>
	<li class="tab"><span class="badge carrot">D</span></li>
	<li class="tab"><span class="badge mango">E</span></li>
	<li class="tab"><span class="badge spruce">F</span></li>
	</ul>

sendgrid-gists / dropzone.html

Created March 6, 2017 16:58

SendGrid style-guide dropzone

	<div class="dropzone"></div>
	<div class="row">
	<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
	<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
	<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
	<div class="drag col-3"><img src="http://placehold.it/300x200" alt="Image"></div>
	</div>

sendgrid-gists / typography-classes.html

Last active July 24, 2018 21:45

SendGrid style-guide typography classes

	<p class="is-size-h1">I'm a paragraph using the h1 font-size.</p>
	<p class="is-size-h2">I'm a paragraph using the h2 font-size.</p>
	<p class="is-size-h3 is-medium">I'm a paragraph using the h3 font-size and medium font-weight.</p>
	<p class="is-size-h4">I'm a paragraph using the h4 font-size.</p>

sendgrid-gists / tabs-editor.html

Created February 20, 2017 22:10

SendGrid style-guide editor tabs

	<ul class="tab-wrapper is-editor is-4-up">
	<li class="tab is-active">Settings</li>
	<li class="tab">Build</li>
	<li class="tab">Tags</li>
	<li class="tab">A/B Testing</li>
	</ul>

sendgrid-gists / accordion-editor.html

Last active February 20, 2017 18:18

SendGrid style-guide editor accordion

	<div class="accordion-wrapper is-editor">
	<div class="accordion-panel">
	<div class="accordion-title">
	<h4>Add Modules</h4>
	</div>
	<div class="accordion-content">
	<div class="card is-module is-centered">
	<p><i class="sg-icon sg-icon-images"></i> Image</p>
	</div>
	...

sendgrid-gists / card-module.html

Created February 17, 2017 20:21

SendGrid style-guide module card

	<div class="card is-module is-centered">
	<p><i class="sg-icon sg-icon-images"></i> Image</p>
	</div>

sendgrid-gists / loader-fragment.html

Last active October 25, 2017 16:45

SendGrid style-guide fragment loader

	<svg class="fragment-loader">
	<rect class="fragment-square left" width="10" height="10" />
	<rect class="fragment-square middle" width="10" height="10" />
	<rect class="fragment-square right" width="10" height="10" />
	</svg>

sendgrid-gists / modal-center-large.html

Created February 15, 2017 23:01

SendGrid style-guide large center modal

	<div class="center-modal is-large has-padding">
	<h2>Import Custom Drag & Drop HTML</h2>
	<div class="modal-inner-scroll">
	<div class="example-code-editor"></div>
	<div class="modal-footer">
	<div class="btn-list">
	<button class="btn btn-small btn-secondary">Secondary</button>
	<button class="btn btn-small btn-primary">Primary</button>
	</div>
	</div>