Containers overview

Containers use borders or background colour to visually organize and group related items. This provides visual cues to help users understand the user interface at a glance, which content is connected and where to complete their task. Keep in mind that things that are closer together appear to be more related than things that are spaced further apart.

Considerations and cautions

Overuse of containers can create a busy and cluttered page. White space alone can be sufficient to create groupings and reduce the visual complexity. Use containers when white space doesn't clearly separate content.

Sometimes containers create a "false floor" illusion, which may prevent users from scrolling down the rest of the page because they feel like they've reached the end of the content.

Container components