Marble Design System

Banners

These are self-contained components that span all the way across their parent containers, providing particular prominence to the content, information, and user flow entry points contained within. From alerts, page heroes, to content promotions, banners provide moments of emphasis and hierarchy to experiences.

This banner introduces an editorial experience and demarcates a new section. Along with a header and description, an image or video is used to provide context and encourage the user to stay engaged and explore the content below. If a video is selected, it will automatically play when in view, muted and looping. The user can pause the video by tapping the overlaying pause/play button.

Action banners are used to promote a selection of actions (up to 3) with a contextual header, description, and image.

The notification banner displays an important, succinct message, and is persistent and nonmodal on the page. Banners are interruptive, but their level of interruption should match the information they contain and the context in which they appear.