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

# Filters

Search emails by all of the following:

Container(s) | .filter-wrap
Required | .filter-header .filter-title .filter-list .filter-buttons
Optional Elements | .filter-option-toggle .filter-search-toggle

# 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

# 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

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

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

# Meters

Health 95%
Mana 42%
Stamina 13%

Container(s) | .meter-container .meter-bar
Required | .meter-bar-fill
Modifiers | .is-above-50 .is-below-50 .is-below-25
HTML Elements | div.meter-title div.meter-value

#### Guidelines

- Labels should be uppercase and ≤ 20 characters.
- Use only in isolated cases like emails remaining and reputation status.
- Use only when data can logically be represented as a percentage.

Don't use to demonstate progress through multiple steps.

# Dropzones

Required | .dropzone
Modifiers | .is-active .is-hovered .is-large

# Dropzone Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Required | .dropzone .has-inline-alert

# Dividers

Modifiers | .is-thin .has-label