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

  • Accordion

    Shows and hides related content in interactive sections.

  • Application card

    Presents list and table items as a card.

  • Background image block

    Draws attention to particular content.

  • Block banner

    Presents as a dominant element on a page with embedded videos or images with call to action links.

  • Call to action block

    Highlights calls to action along with short descriptions.

  • Card

    Combines visual and textual elements to introduce, sort and group related topics.

  • Card set

    Groups cards into organized collections with optional filtering and pagination.

  • Card slider

    Displays multiple cards sequentially in a single row.

  • Contact information block

    Groups addresses, phone numbers and other contact information.

  • Content block

    Visually groups and showcases important information.

  • Do's and don'ts block

    Visually advises rules in a particular situation.

  • Hero banner

    Catches users' attention by featuring large image and bold typography.

  • Icon subject layout

    Visually groups and displays content with associated icon or an SVG image.

  • Modal

    Intentionally interrupts user attention for a specific purpose.

  • Show more/show less

    Assists in compressing and expanding content.

  • Tab

    Organizes related groups of content within the same context.

  • Tooltip

    Displays short, informative messages upon user interaction.