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

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

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

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

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

Signup Summary

Container(s) .signup-summary-wrap
Required .signup-summary-today .plan-option .plan-total

Dividers

Modifiers .is-thin .has-label

Browser Chrome

Container(s) .browser-chrome-wrap
Required .chrome-header .chrome-control .chrome-address .chrome-content