SONOS
Menu
Get Started
Using Suit
Writing Code
Writing CSS
Writing JavaScript
Starter HTML Template
Image Guidelines
Framework Utilities
CSS Utilities
JavaScript Utilities
Browser Support
Building Blocks
Colors & Gradients
Section
Grids
Grid
Block Grid
Responsive Helpers
Interchange
JS
Media Queries
Visibility Classes
Navs
Primary Navigation Elements
Top Bar
JS
Offcanvas
JS
Icon Bar
Magellan Sticky Nav
JS
Navigation Lists
Side Nav
Sub Nav
Inline List
Breadcrumbs
Pagination
Media
Image Presentation
Image Thumbnails
Clearing Lightbox
JS
Pixlee
JS
Lazy Load
JS
Image Zoom
JS
Video Plugins
YouTube
YouTube Embed
JS
YouTube Playlist Example
JS
jwPlayer Embed
JS
Inputs
Building Forms
Form Examples
Switch Input
Slider Input
Input Validation
JS
Buttons
Buttons
Button Groups
Dropdown Buttons
JS
Split Buttons
JS
Type
Type
Labels
Keystrokes
Font Icons
Language Support
Callouts
Action Prompts
Reveal Modal
JS
Embed Video Into Modal
JS
Joyride
JS
Language Selector
JS
Callout Content
Alerts
JS
Panels
Tooltips
JS
Modules
Touts
Configurator
Fill
Center
Left
Right
Layered
Bottom
Left
Middle
Left
Right
Right
Full Bleed
Centered
Interactive Content
Dropdowns
JS
Accordion
Tabs
Table Content
Pricing Tables
Tables
Progress Bars
Social Blocks
Column Equalizer
Footer Module
Overlapping Panels
Overlapping panels
This is for dislaying two panels, consiting of a copy block and an image, one slightly over the other.
Note that the panels stack on small and medium viewports.
An example headline
An example body text