The Horizontal Tabs Container and Tab Item for Cards components work together to create a simple tabbed layout for displaying content. Authors can use the container to group tabs, while the tab items define each individual tab and its title. Inside each tab item, authors can add any cards that will be placed in a grid-like layout. To maintain consistency, it’s recommended to keep the background color the same as the section containing the tabs. These components are ideal for organizing related cards into a compact, easily navigable layout, especially when presenting different types of information in the same space.

Example

    Tab item with 3 cards
    cup

    This is a Title

    This is a Subtitle

    This is some Body text

    This is a CTA
    chair

    This is a Title

    This is a Subtitle

    This is some Body text

    This is a CTA
    statue

    This is a Title

    This is a Subtitle

    This is some Body text

    This is a CTA
    Tab item with 2 cards

    This is a Title

    This is a Subtitle

    This is some Body text

    This is a CTA

    This is a Title

    This is a Subtitle

    This is some Body text

    This is a CTA

    Content Options

    Horizontal tab container

    The Horizontal Tabs Container component has no content options. It is designed to have Tab Item components dropped inside of it.

    Tab item for cards

    The Tab Item for Cards component has one field:

    • Tab title: This is the text that will appear for users to click on.
    • Number of card columns: This sets the number of cards that will appear per row.
    • Grid spacing: This controls how much space there is between cards.
    • Center items: This toggle controls whether or not the cards are centered inside the tab.

    Number of card columns

      1 Item

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA
      2 Items

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA
      3 Items (default)

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA
      4 Items

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      This is a Title

      This is a Subtitle

      This is some Body text

      This is a CTA

      Grid spacing

        Small (default)

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA
        Medium

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA
        Large

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA
        Collapse

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        This is a Title

        This is a Subtitle

        This is some Body text

        This is a CTA

        Center items

          Off (default)

          This is a Title

          This is a Subtitle

          This is some Body text

          This is a CTA

          This is a Title

          This is a Subtitle

          This is some Body text

          This is a CTA
          On

          This is a Title

          This is a Subtitle

          This is some Body text

          This is a CTA

          This is a Title

          This is a Subtitle

          This is some Body text

          This is a CTA

          Layout and Styling Options

          Background Color

          It’s recommended to keep the background color the same as the section containing the tabs. We may remove the background color option in the future.

            Background Color

            Default (white)

              Background Color

              Muted (grey)

                Background Color

                Primary (brand red)

                  Background Color

                  Secondary (teal/blue)

                    Background Color

                    Tertiary (dark grey)

                      Background Color

                      Gradient

                      Tab item for cards

                      The Tab Item component has no layout and style options.

                      Usage

                      Do

                      • Use the Horizontal Tabs Container to group related content into distinct sections for easy navigation.
                      • Keep tab titles short and descriptive so users understand what each tab contains.
                      • Ensure the order of the tabs makes sense and follows a logical flow.
                      • Add engaging and relevant content inside each Tab Item for Cards that aligns with the tab title.
                      • Use consistent formatting and style across all tabs for a polished appearance.
                      • Leave enough space around the tabs to prevent them from feeling crowded.
                      • Place this component in areas where users would benefit from switching between multiple pieces of information quickly.
                      • Combine the component with clear headings or context to help users understand its purpose on the page.

                      Don't

                      • Avoid overloading the tabs with too many cards, as this can make navigation confusing.
                      • Do not use vague or overly generic titles like “Tab 1” or “More Info.”
                      • Refrain from placing unrelated cards into tabs just to fill space.
                      • Avoid adding so many cards that it requires excessive scrolling inside a single tab.
                      • Do not rely on the tabs as the sole way to access critical information; provide alternatives if necessary.
                      • Refrain from using conflicting or inconsistent styles between tabs and the rest of the page.
                      • Do not change the background color of the container if it creates contrast issues or clashes with the overall design.
                      • Refrain from embedding tabs within other tabs, as it can confuse users and make navigation cumbersome.

                      Accessibility

                      • Use your best judgement when picking colors for the Gloss Container, Horizontal Tabs Container & Tab Item for Cards components. Choose colors that don't clash and allow the text to be readable.