Misc.

Miscellaneous components that are used within the SendGrid user interface. These components are typically global elements and some can be used in conjunction with other components in Style Guide.

Badges

Default SendGrid Blue Slate Ron Burgundy Burnt Orange Carrot Mango Mantis Spruce Grass Stain Lime Cobalt Bluebird Seafoam Caribbean Crown Screample Sangria Lavender Wild Strawberry Steel Beta New
Required .badge
Modifiers .sg-blue .slate .ron-burgundy .burnt-orange .carrot .mango .mantis .spruce .grass-stain .lime .cobalt .bluebird .seafoam .caribbean .crown .screample .sangria .lavender .wild-strawberry .steel .is-beta .is-new .is-small .is-subtle
<span class="badge">Default</span>
<span class="badge sg-blue">SendGrid Blue</span>
<span class="badge slate">Slate</span>
<span class="badge ron-burgundy">Ron Burgundy</span>
<span class="badge burnt-orange">Burnt Orange</span>
<span class="badge carrot">Carrot</span>
<span class="badge mango">Mango</span>
<span class="badge mantis">Mantis</span>
<span class="badge spruce">Spruce</span>
<span class="badge grass-stain">Grass Stain</span>
<span class="badge lime">Lime</span>
<span class="badge cobalt">Cobalt</span>
<span class="badge bluebird">Bluebird</span>
<span class="badge seafoam">Seafoam</span>
<span class="badge caribbean">Caribbean</span>
<span class="badge crown">Crown</span>
<span class="badge screample">Screample</span>
<span class="badge sangria">Sangria</span>
<span class="badge lavender">Lavender</span>
<span class="badge wild-strawberry">Wild Strawberry</span>
<span class="badge steel">Steel</span>
<span class="badge is-beta">Beta</span>
<span class="badge is-new">New</span>
view raw badges.html hosted with ❤ by GitHub

Guidelines

  • Labels should be uppercase and ≤ 20 characters long.
  • Avoid using Mango, Lime, and Caribbean colors except in situations where all other colors are in use.
Don't use colors that don't have AA or higher contrast.
Don't use long labels.

Counter

Credits 100
Containers .counter
HTML Elements .counter-bubble
<div class="counter">
Credits
<span class="counter-bubble">
100
</span>
</div>
view raw counter.html hosted with ❤ by GitHub

Labels

Sent Delivered Live Success Scheduled Pick Winner Draft Global List In Progress Bounced Canceled Paused Error Optimized
Required .label
Modifiers .label-sent .label-delivered .label-live .label-success .label-scheduled .label-pick-winner .label-draft .label-global .label-list .label-progress .label-bounced .label-canceled .label-paused .label-error .label-optimized
<span class="label label-sent">Sent</span>
<span class="label label-delivered">Delivered</span>
<span class="label label-live">Live</span>
<span class="label label-success">Success</span>
<span class="label label-scheduled">Scheduled</span>
<span class="label label-pick-winner">Pick Winner</span>
<span class="label label-draft">Draft</span>
<span class="label label-global">Global</span>
<span class="label label-list">List</span>
<span class="label label-progress">In Progress</span>
<span class="label label-bounced">Bounced</span>
<span class="label label-canceled">Canceled</span>
<span class="label label-paused">Paused</span>
<span class="label label-error">Error</span>
<span class="label label-optimized">Optimized</span>
view raw labels.html hosted with ❤ by GitHub

Templates

Blank Template

Blank Template

Template Image

Code Template

Code Editor

Template Image

Design Template

Design Editor

Containers .template-thumb-wrap
Modifiers .thumb.is-blank
HTML Elements .thumb .btn-list .btn-list .btn.btn-primary
<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>

Feature Comparison

AWS Basic AWS Pro
Monthly plan price $10.00 $80.00
Emails/month included in plan 40,000 100,000
Price per extra 1,000 emails $0.50 $0.50
Price per extra 10,000 contacts $10.00 $10.00
Other Features
Teammate accounts 1 Teammate 1,000 Teammates
APIs and webhooks
DKIM customization
SendGrid Marketing Campaigns
Dedicated IP
Subuser management
Show all features
Container(s) .compare-table-wrap
Modifiers th.alt th.transparent td.val td.val-alt
Optional Elements tr.no-highlight tr.spacer tr.is-top tr.is-bottom .color-mantis
<table class="compare-table-wrap">
<thead>
<tr>
<th class="transparent"></th>
<th>AWS Basic</th>
<th class="alt">AWS Pro</th>
</tr>
</thead>
<tbody>
<tr class="no-highlight spacer">
<td></td>
<td class="val"></td>
<td class="val val-alt"></td>
</tr>
<tr class="is-top">
<td>Monthly plan price</td>
<td class="val">$10.00</td>
<td class="val val-alt">$80.00</td>
</tr>
<tr>
<td><span class="has-underline" data-tooltip="You may send up to this number of emails at no additional charge." data-tooltip-pos="down" data-tooltip-length="large">Emails/month included in plan</span></td>
<td class="val">40,000</td>
<td class="val val-alt">100,000</td>
</tr>
<tr class="is-bottom">
<td><span class="has-underline" data-tooltip="All SendGrid Marketing Campaigns features are available in either plan for an extra $10/month for every 10,000 contacts stored. Your first 2,000 contacts are free." data-tooltip-pos="down" data-tooltip-length="large">Price per extra 10,000 contacts</span></td>
<td class="val">$10.00</td>
<td class="val val-alt">$10.00</td>
</tr>
<tr class="no-highlight spacer">
<td></td>
<td class="val"></td>
<td class="val val-alt"></td>
</tr>
<tr class="is-top no-highlight">
<td>Other Features</td>
<td class="val"></td>
<td class="val val-alt"></td>
</tr>
<tr>
<td>APIs and webhooks</td>
<td class="val"><i class="sg-icon sg-icon-check color-mantis"></i></td>
<td class="val val-alt"><i class="sg-icon sg-icon-check color-mantis"></i></td>
</tr>
<tr class="no-highlight">
<td><a href="#">Show all features <i class="sg-icon sg-icon-caret" style="top: 3px; position: relative;"></i></a></td>
<td class="val"></td>
<td class="val val-alt"></td>
</tr>
<tr class="is-bottom no-highlight">
<td></td>
<td class="val color-mantis">
<button class="btn btn-primary">Choose</button>
</td>
<td class="val val-alt">
<button class="btn btn-primary">Choose</button>
</td>
</tr>
</tbody>
</table>

Signup Summary

Container(s) .signup-summary-wrap
Required .signup-summary-today .plan-option .plan-total
<div class="signup-summary-wrap">
<h2>Summary <span data-tooltip="The exact amount you pay will vary month-to-month based on your sending volume and contact list size." data-tooltip-length="large" data-tooltip-pos="up"><i class="sg-icon sg-icon-info-circle"></i></span></h2>
<table>
<tr>
<th>
<div class="btn-list">
<div class="btn btn-dropdown dropdown">
...
</div>
</div>
</th>
<td><strong>$79.95</strong></td>
</tr>
<tr>
<th>2,000 contacts (Estimated)</th>
<td><strong>$0.00</strong></td>
</tr>
<tr>
<th>
<div class="btn-list">
<div class="btn btn-dropdown dropdown">
...
</div>
</div>
</th>
<td><strong>$30.00</strong></td>
</tr>
<tr class="plan-total">
<th>Estimated monthly cost*</th>
<td><strong>$109.95</strong></td>
</tr>
</table>
<div class="signup-summary-today">
<h3>What you'll pay today <span data-tooltip="Your plan is prorated to the first of the month." data-tooltip-length="large" data-tooltip-pos="up"><i class="sg-icon sg-icon-info-circle"></i></span></h3>
<table>
<tr>
<th>Pro 100k (Prorated)</th>
<td><strong>$37.31</strong></td>
</tr>
<tr class="plan-total">
<th>Due Today*</th>
<td><strong>$37.31</strong></td>
</tr>
</table>
</div>
</div>

Dividers



Modifiers .is-thin .has-label
<hr>
<hr class="is-thin">
<hr class="has-label" data-label="Label">
view raw hr.html hosted with ❤ by GitHub

Browser Chrome

Container(s) .browser-chrome-wrap
Required .chrome-header .chrome-control .chrome-address .chrome-content
<div class="browser-chrome-wrap">
<div class="chrome-header">
<div class="chrome-control"></div>
<div class="chrome-address"></div>
</div>
<div class="chrome-content">
...
</div>
</div>