Style Guide Guide

  • Getting started
  • Guidelines
    • Overview
    • Design Principles
    • Theming
    • Code conventions
    • Accessibility
    • Data display
    • Data entry
    • Data validation
    • Input modes
    • Navigation
    • Notifications
    • Writing
    • Browser support
  • Styles
    • Overview
    • The New Yorker
    • Vogue
  • Components
    • Advertising
      • Ad container
    • Blocks and cards
      • Overview
      • Card
      • Hero
      • Lede
      • Tile
    • Buttons
      • Overview
      • Button group
      • Button
      • Text button
    • Charts and graphs
      • Overview
      • Bar graph
    • Form controls
      • Overview
      • Text field
    • Headers and footers
      • Overview
      • Footer
      • Horizontal header
      • Vertical header
    • Icons
      • Overview
      • Icons
    • Interactive panels
      • Overview
      • Tabs
    • Lists and collections
      • Overview
      • Card list
      • Numbered Card list
      • Tile list
    • Media
      • Overview
      • Video
    • Messaging
      • Overview
      • Alert
      • Tooltip
    • Navigation
      • Overview
      • Breadcrumbs
      • Social share
      • Tags
    • Tables
      • Overview
      • Table
    • Text
      • Overview
      • Content header
      • Page header
      • Section header
      • Text passage
  • Utilities
    • Overview
  • Page templates
  • Downloads
  • Support
  • Contribute

Headers and footers

Responsive containers for app title, navigation, and search

  • Headers and footers

    Footer

    Logo and housekeeping links displayed at page bottom

  • Headers and footers

    Horizontal header

    Displays a full-width header on wide screens and a hamburger menu on small screens.

  • Headers and footers

    Vertical header

    Vertical sidebar navigation on wide screens and hamburger navigation on small screens.

  • About
  • Roadmap
  • Release History
  • Contribute