Container

Anatomy

1. Frame (optional): 1px border to create a separation from the background colour.
2. Slots: By default, the container will have 2 visible slots to populate components with but many more are available and can be shown when necessary.

Slots

The slots that make up our Container are vertically-stacked placeholder elements that can swapped out for any component within our core library. We also provide 7 variants on these slots so consumers can align components horizontally for greater customisation in the container whilst retaining the rigid structure for consistency.

Header

1. Icon (optional): 1px border to create a separation from the background colour.
2. Title: Heading name.
3. Trailing actions: By default, the first button is active but there are up to 3 other available slots to use.
4. Subtext (optional): For further explanation of the content below.

Footer

Two variations of the footer are available - Text and Actions.

Footer

1. Separator (optional): 1px border to create a separation from the background colour.
2. Slots: Placeholder spaces for consumers to add sub-components in to.

Examples

	Up to two action buttons can be placed together. These must always be right-aligned.

	Single or avatar groups to display member volumes.

	Navigation such as keyboard shortcuts and pagination.

Usage

Containers are used in multiple larger pattern components that have any number of variations within the product.

	Card   Cards can contain small and larger more complex components such as Tables. In this example the first slot is the NPS score title and the second slot is made of 3 horizontal slots which display the score, timeframe and percentage Badge component.

	Modal   The container sits within a Header and Footer on Modal. This example uses 3 vertical slots containing the Checkbox component. In the footer, we display action buttons by default, but consumers can also use the Slots to apply additional components.

	Menus   Containers used in context and dropdown Menu are used between a Header and Footer (if either are required).   This example contains 6 vertical slots that sit above a Footer. The first contains the Search component and the remaining 5 the List Item component.

	Sidebar   Follows the same structure as a Menu - the container in this example has 5 slots visible for product features.

Best practice

Containers already live within the components where we need to use them currently. Please seek advice from the Nucleus team should you need to use them in any new component.

Do's and Don'ts

Also see

• Card
• Modal
• Menu