Portal Tab Styles

Best Practice

Appropriately interruptive

Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.

Focused

Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.

Dismissing banners

An alert remains on the screen until the user dismisses it.

Code

Alert Styles

Error Alert

<div class="alert alert--error" role="alert" aria-hidden="false">
    <div class="wrap">
        <span>Error Text example. This is an example of an error warning that falls over two or more lines.</span>
        <button type="button" class="alert__deactivator icon icon--close">
            <span class="visually-hidden">Click to close alert</span>
        </button>
    </div>
</div>

Success Alert

<div class="alert alert--success" role="alert" aria-hidden="false">
    <div class="wrap">
        <span>Success Text example. This is an example of a success message that is one line only. </span>
        <button type="button" class="alert__deactivator icon icon--close">
            <span class="visually-hidden">Click to close alert</span>
    </button>
</div>

Occassion Alert

<div class="alert alert--occasion" role="alert" aria-hidden="false">
    <div class="wrap">
        <span>Occassion  Text example. This is an example of an occasion message that is one line only.</span>
        <button type="button" class="alert__deactivator icon icon--close">
            <span class="visually-hidden">Click to close alert</span>
    </button>
</div>

Support Alert

<div class="alert alert--support" role="alert" aria-hidden="false">
    <div class="wrap">
        <span>Support Text example. This is an example of a support message that is one line only.</span>
        <button type="button" class="alert__deactivator icon icon--close">
            <span class="visually-hidden">Click to close alert</span>
    </button>
</div>

Information Alert

<div class="alert alert--info" role="alert" aria-hidden="false">
    <div class="wrap">
        <span>Information Text example. This is an example of an info message that is one line only.</span>
        <button type="button" class="alert__deactivator icon icon--close">
            <span class="visually-hidden">Click to close alert</span>
    </button>
</div>

                        <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 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