Lesson Design

Screen Types

Viewer themes include a series of different screen types designed for a variety of uses and content types.

Cover Screen

Can be applied by adding the class cover to any screen. This screen type is useful for title screens at the beginning of a lesson, or to divide content into themed chapters. This screen type uses a full screen background image, a transparent stage background, and removes the navigation tray. It is intended to be used with the button component to provide a central point of focus for the learner.

Viewer design template

Adding the class banner to any screen places a banner in the background (as opposed to a full screen image). This screen type is useful as a break between sections, or when introducing a new idea. It can be a useful tool to provide some stylistic variety in your lesson.

Viewer design template

Full Screen Sim/Embed

The class full-screen will remove the header and tray backgrounds and push the tray controls to the outer corners to provide a more immersive experience. Apply full-frame to the element you want to take up the whole screen. This is useful for full screen experiences like simulations, videos, or embedded content. You can add dark-ui or light-ui classes to change the color of the header/tray elements to be dark or light to fit the content.

Viewer design template