Twilio SendGrid Style Guide Deprecated
  • Introduction
  • Style
    • Colors
    • Typography
    • Icons
  • Layout
    • Containers
    • Grid
  • Components
    • Accordions
    • Alerts
    • Buttons
    • Cards
    • Dropzones
    • Email Cards
    • Field Mapping
    • Filters
    • Lists
    • Loaders
    • Menus
    • Misc.
    • Modals
    • Pickers
    • Progress & Activity
    • Select Fields
    • Selection Controls
    • Sliders
    • Stats
    • Status
    • Tables
    • Tables - Billing
    • Tables - Stats
    • Tabs
    • Text Fields
    • Tooltips
  • Page Examples
    • Campaigns
    • Contacts
    • Email Activity
    • Landing Page
    • Full Page Message
    • Upload CSV Wizard
    • Custom Fields
    • Senders
    • Unsubscribe Groups
    • 404 Error
    • 500 Error
  • Changelog

Menus

Menus display a list of choices for the user to select. Typically, our menus originate from buttons or icons and allow the user to create, read, update and delete sections of data.

  1. Menus
  • Standard
  • Small
  • Filter

Standard

Primary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Secondary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Tertiary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
  • Add new Sender
  • Add new API Key
  • Add new Template
Primary Icon Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Secondary Icon Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Tertiary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
  • Add new Sender
  • Add new API Key
  • Add new Template
2 Primary Badge Dropdown
  • Bulk Edit
  • Duplicate
  • Delete
2 Secondary Badge Dropdown
  • Bulk Edit
  • Duplicate
  • Delete
4 Tertiary Badge Dropdown
  • Bulk Edit
  • Duplicate
  • Delete
Container(s) .dropdown
Required .dropdown-menu
Modifiers .btn-dropdown .btn-dropdown-icon .has-icon .rotate-icon
HTML Elements a.dropdown-link

Small

Primary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Secondary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Tertiary Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
  • Add new Sender
  • Add new API Key
  • Add new Template
Primary Icon Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Secondary Icon Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
Tertiary Icon Dropdown
  • Add new Sender
  • Add new API Key
  • Add new Template
  • Add new Sender
  • Add new API Key
  • Add new Template
2 Primary Badge Dropdown
  • Bulk Edit
  • Duplicate
  • Delete
4 Secondary Badge Dropdown
  • Bulk Edit
  • Duplicate
  • Delete
4 Tertiary Badge Dropdown
  • Bulk Edit
  • Duplicate
  • Delete
Container(s) .dropdown
Required .dropdown-menu
Modifiers .btn-small .btn-dropdown .btn-dropdown-icon .has-icon .rotate-icon
HTML Elements a.dropdown-link

Filter

Filter Dropdown
Container(s) .dropdown
Required .dropdown-menu
Modifiers .btn-dropdown .btn-dropdown-icon .has-icon .rotate-icon
HTML Elements a.dropdown-link

Style Guide

  • Introduction
  • Colors
  • Typography
  • Icons
  • Containers
  • Grid
  • Changelog

Components

  • Accordions
  • Alerts
  • Buttons
  • Cards
  • Dropzones
  • Email Cards
  • Filters
  • Lists
  • Loaders
  • Menus
  • Misc.
  • Modals
  • Pickers
  • Progress & Activity
  • Select Fields
  • Selection Controls
  • Sliders
  • Stats
  • Status
  • Tables
  • Tables - Billing
  • Tables - Stats
  • Tabs
  • Text Fields
  • Tooltips

Page Examples

  • Campaigns
  • Contacts
  • Email Activity
  • Landing Page
  • Full Page Message
  • Upload CSV Wizard
  • Custom Fields
  • Senders
  • Unsubscribe Groups
  • 404 Error
  • 500 Error

Copyright © 2019 Twilio SendGrid