Tab

Tabs separate content into panes, housing multiple sections within the same space on the page. GEM supports groupings of two, three or four tabs.

Status
Released
Version

2.0.1

Last updated

23 Nov 2019

Usage

Tabs are useful when users need to switch between sections of related content, such as comparing a list of transport options with a map.

They can also be effective where different versions of equivalent content exist – for instance allowing a user to show course details for either international or domestic students.

2 tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Hello
  • Here is a list
  • Here is a list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3 tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Hello
  2. Here is a list
  3. Here is a list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Hello
  2. Here is a list
  3. Here is a list

4 tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Hello
  2. Here is a list
  3. Here is a list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Hello
  2. Here is a list
  3. Here is a list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text labels

A tab's heading must accurately indicate what content users can find if they open the tab.

Categories

Each tab should contain a distinct category of information. In a group of tabs, categories are of equal importance and share a common thread, making the group a cohesive whole.

Components

Tables can be used inside tabs, but accordions and images are not allowed.

Tab Styles

Tab - Two

These days employability is not just about what you know, but in creasingly, what you can do and how adaptable you are.

At Macquarie we provide innovative opportunities to build on your academic studies with authentic workplace experiences.

Our multi award-winning PACE program is for all undergraduate students and is a vital part of your career preparation.

  • List item
  • List item
  • List item

Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.

  • Testing list items
  • List item 2
  • List item 3
    1. Ordered list item 1
    2. Ordered list item 2
                        <div class="tab tab--col-2">
                            <div class="tab__item">
                                <div class="tab__heading" id="tab1id" role="button" aria-expanded="false" aria-controls="sect1" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect1" role="region" aria-labelledby="tab1id" tabindex="-1">
                                    <p>These days employability is not just about what you know, but in creasingly, what you can do and how adaptable you are.</p>
                                    <p>At Macquarie we provide innovative opportunities to build on your academic studies with authentic workplace experiences.</p>
                                    <p>Our multi award-winning PACE program is for all undergraduate students and is a vital part of your career preparation.</p>
                                </div>
                            </div>
                            <div class="tab__item">
                                <div class="tab__heading" id="tab2id" role="button" aria-expanded="false" aria-controls="sect2" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect2" role="region" aria-labelledby="tab2id" tabindex="-1">
                                    <p>Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.</p>
                                </div>
                            </div>
                        </div>

Tab - Three

These days employability is not just about what you know, but in creasingly, what you can do and how adaptable you are.

At Macquarie we provide innovative opportunities to build on your academic studies with authentic workplace experiences.

Our multi award-winning PACE program is for all undergraduate students and is a vital part of your career preparation.

Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.

Aliquam ligula mauris, vehicula ut posuere vitae, tempus sed arcu. Vestibulum rhoncus libero at sodales feugiat. In placerat tortor ac odio mollis laoreet. 

                        <div class="tab tab--col-3">
                            <div class="tab__item">
                                <div class="tab__heading" id="tab1id" role="button" aria-expanded="false" aria-controls="sect1" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect1" role="region" aria-labelledby="tab1id" tabindex="-1">
                                    <p>These days employability is not just about what you know, but in creasingly, what you can do and how adaptable you are.</p>
                                    <p>At Macquarie we provide innovative opportunities to build on your academic studies with authentic workplace experiences.</p>
                                    <p>Our multi award-winning PACE program is for all undergraduate students and is a vital part of your career preparation.</p>
                                </div>
                            </div>
                            <div class="tab__item">
                                <div class="tab__heading" id="tab2id" role="button" aria-expanded="false" aria-controls="sect2" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect2" role="region" aria-labelledby="tab2id" tabindex="-1">
                                    <p>Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.</p>
                                </div>
                            </div>
                            <div class="tab__item">
                                <div class="tab__heading" id="tab3id" role="button" aria-expanded="false" aria-controls="sect3" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect3" role="region" aria-labelledby="tab3id" tabindex="-1">
                                    <p>Aliquam ligula mauris, vehicula ut posuere vitae, tempus sed arcu. Vestibulum rhoncus libero at sodales feugiat. In placerat tortor ac odio mollis laoreet.</p>
                                </div>
                            </div>
                        </div>

Tab - Four

These days employability is not just about what you know, but in creasingly, what you can do and how adaptable you are.

At Macquarie we provide innovative opportunities to build on your academic studies with authentic workplace experiences.

Our multi award-winning PACE program is for all undergraduate students and is a vital part of your career preparation.

Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.

Aliquam ligula mauris, vehicula ut posuere vitae, tempus sed arcu. Vestibulum rhoncus libero at sodales feugiat. In placerat tortor ac odio mollis laoreet.

libero at sodales feugiat. In placerat tortor ac odio mollis laoreet. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet. 

                        <div class="tab tab--col-4">
                            <div class="tab__item">
                                <div class="tab__heading" id="tab1id" role="button" aria-expanded="false" aria-controls="sect1" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect1" role="region" aria-labelledby="tab1id" tabindex="-1">
                                    <p>These days employability is not just about what you know, but in creasingly, what you can do and how adaptable you are.</p>
                                    <p>At Macquarie we provide innovative opportunities to build on your academic studies with authentic workplace experiences.</p>
                                    <p>Our multi award-winning PACE program is for all undergraduate students and is a vital part of your career preparation.</p>
                                </div>
                            </div>
                            <div class="tab__item">
                                <div class="tab__heading" id="tab2id" role="button" aria-expanded="false" aria-controls="sect2" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect2" role="region" aria-labelledby="tab2id" tabindex="-1">
                                    <p>Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.</p>
                                </div>
                            </div>
                            <div class="tab__item">
                                <div class="tab__heading" id="tab3id" role="button" aria-expanded="false" aria-controls="sect3" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect3" role="region" aria-labelledby="tab3id" tabindex="-1">
                                    <p>Aliquam ligula mauris, vehicula ut posuere vitae, tempus sed arcu. Vestibulum rhoncus libero at sodales feugiat. In placerat tortor ac odio mollis laoreet.</p>
                                </div>
                            </div>
                            <div class="tab__item">
                                <div class="tab__heading" id="tab4id" role="button" aria-expanded="false" aria-controls="sect4" tabindex="0">
                                    <h3 class="h5">Heading</h3>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="tab__body" id="sect4" role="region" aria-labelledby="tab4id" tabindex="-1">
                                    <p>libero at sodales feugiat. In placerat tortor ac odio mollis laoreet. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.</p>
                                </div>
                            </div>
                        </div>