The divider is used for visual separation of content on the display. It is most often used with headers and text lists to keep list items separated and easier to read.

Layouts Package

The design recommendations in the guide reference the Layouts Package, which is an additional set of properties that you will need to import to use responsive components in your skill. Check out Alexa Layouts Package for more information.

Example showing the use of dividers between items in a text list on two hub devices.

How to use the divider component

When content such as lists do not have an anchoring element such as an avatar or icon, spacing alone is not always enough to separate content in terms of legibility and architecture hierarchy. Header dividers separate the scroll view from the header divider itself so the content scrolls behind. For text and image list items, dividers help separate the item descriptions so that they’re easier to parse.

Additional resources