Introduction

Most product interfaces are designed with a common pattern for surfacing identity, context, global navigation, etc. This application shell convention is available as the Shell 3 pattern in CoralUI.

The following components make up this pattern:

This documentation covers the components of the Shell 3 pattern in isolation, with a visual example of what they look like when assembled together into a typical configuration. The full assembly of these components into the Shell 3 pattern is can be explored in more detail in the Shell 3 Example repository.

You many notice the examples for these components imply they are data-driven, but our documentation doesn't provide detail on how to accomplish those connections. CoralUI has attempted to remain agnostic to the method in which data is provided to components. Because of the variety of ways data can be provided, going into detail here is beyond the scope of this documentation. There is a reference implementation of the Shell 3 pattern that includes examples of how this data integration can be done for Digital Marketing applications.

Examples

This illustration attempt shows how the Shell components are assembled into the full Shell 3 pattern. Click the image to see a larger version.

Below is the output of the Shell 3 Example repository. You can click through to the full example to get feel for the interaction of each component and what the pattern is like as a whole experience.