Tab Styles
Tab - Two
Heading
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
Heading
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
- Ordered list item 1
- 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
Heading
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.
Heading
Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.
Heading
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
Heading
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.
Heading
Morbi sed quam sit amet ipsum venenatis gravida. Suspendisse pulvinar viverra vestibulum. Maecenas ultricies imperdiet nulla, id tristique sapien venenatis sit amet.
Heading
Aliquam ligula mauris, vehicula ut posuere vitae, tempus sed arcu. Vestibulum rhoncus libero at sodales feugiat. In placerat tortor ac odio mollis laoreet.
Heading
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>
Tab Documentation
Use
Minimum tabs is 2, maximum is 4. Must set the tab number using the mx--tab--col-{ TAB NUMBER } class
Tab headings should be one word in length.
Never nest an accordion within a tab