Contents Menu Expand Light mode Dark mode Auto light/dark mode
GNOME Human Interface Guidelines
Logo
GNOME Human Interface Guidelines
  • Design Principles
  • Tools & Resources
  • Guidelines
    • App Naming
    • App Icons
    • Pointer & Touch
    • Keyboard
    • UI Icons
    • UI Styling
    • Writing Style
    • Typography
    • Navigation
    • Scaling & Adaptiveness
    • Accessibility
  • Patterns
    • Containers
      • Windows
      • Header Bars
      • Popovers
      • Utility Panes
      • Boxed Lists
      • Grid Views
      • List & Column Views
      • Selection & Edit Modes
    • Navigation
      • Browsing
      • View Switchers
      • Tabs
      • Sidebars
      • Search
    • Controls
      • Buttons
      • Menus
      • Switches
      • Text Fields
      • Checkboxes
      • Radio Buttons
      • Drop-Down Lists
      • Sliders
      • Spin Buttons
      • Overlaid Controls
    • Feedback
      • Notifications
      • Toasts
      • Banners
      • Progress Bars
      • Spinners
      • Dialogs
      • Placeholder Pages
      • Tooltips
  • Reference
    • Standard Keyboard Shortcuts
    • Palette
    • Backgrounds
Back to top
Edit this page

Containers#

Containers are some of the main UI building blocks. They include the primary containers for other UI elements, like windows and header bars. They also include some of the main layout frameworks, in the shape of boxed lists, grid views and list views.

  • ../_images/containers-windows.svg ../_images/containers-windows-dark.svg

    Windows

  • ../_images/containers-headerbars.svg ../_images/containers-headerbars-dark.svg

    Headerbars

  • ../_images/containers-popovers.svg ../_images/containers-popovers-dark.svg

    Popovers

  • ../_images/containers-utilitypanes.svg ../_images/containers-utilitypanes-dark.svg

    Utility Panes

  • ../_images/containers-boxedlists.svg ../_images/containers-boxedlists-dark.svg

    Boxed Lists

  • ../_images/containers-gridviews.svg ../_images/containers-gridviews-dark.svg

    Grid Views

  • ../_images/containers-listcolumnviews.svg ../_images/containers-listcolumnviews-dark.svg

    List & Column Views

  • ../_images/containers-selectionmode.svg ../_images/containers-selectionmode-dark.svg

    Selection & Edit Modes

Next
Windows
Previous
Patterns