Banner Styles

Banner Primary (Default)

                        <div class="banner banner--primary" id="banner-1">
                            <div class="wrap wrap--padded">
                                <div class="grid">
                                    <div class="grid__col--12 grid__col-md--4 grid__col-lg--6">
                                        <div class="banner__header">
                                            <h1>Primary Banner Header</h1>
                                        </div>
                                        <div class="banner__image" style="background-image: url(../../static/images/banner-placeholder.png);"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

Banner Secondary

                        <div class="banner banner--secondary" id="banner-2">
                            <div class="wrap wrap--padded">
                                <div class="grid">
                                    <div class="grid__col grid__col--12 grid__col-lg--6">
                                        <div class="banner__header">
                                            <h1>Secondary Banner Header</h1>
                                        </div>
                                        <div class="banner__image" style="background-image: url(../../static/images/banner-placeholder.png);"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

Banner Tertiary

                        <div class="banner banner--tertiary">
                            <div class="wrap wrap--padded">
                                <div class="grid">
                                    <div class="grid__col grid__col--12 grid__col-md--6">
                                        <div class="banner__header">
                                            <h1>Tertiary Banner Header</h1>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Banner Hero

                        <div class="banner banner--hero" id="banner-4" style="background-image: url(../../static/images/banner-placeholder.png);">
                            <div class="wrap wrap--padded">
                                <div class="grid">
                                    <div class="grid__col grid__col--12 grid__col-md--8 grid__col-lg--6 flex">
                                        <h1 class="text--white">Hero Banner Header</h1>
                                    </div>
                                </div>
                            </div>
                        </div>

Campaign Banner

                        <div class="portal-banner portal-banner--primary" id="banner-campaign" style="background-image: url(../../static/images/banner-campaign.jpg)">
                        </div>

Banner Promotional

                        <div class="banner banner--promotional">
                            <div class="wrap wrap--padded">
                                <div class="grid">
                                    <div class="grid__col grid__col--12 grid__col-md--6 banner--promotional__header">
                                        <h3 class="text--bravo text--regular">Promotion</h3>
                                    </div>
                                    <div class="grid__col grid__col--12 grid__col-md--6 banner--promotional__button">
                                        <button type="button" class="button button--secondary">Secondary Button</button>
                                    </div>
                                </div>
                            </div>
                        </div>

Campaign Icon Banner

                    <div class="banner--campaign">
                        <div class="wrap wrap--padded">
                            <div class="grid">
                                <div class="grid__col grid__col--12 grid__col-md--4">
                                    <div class="flex flex--center flex--column">
                                        <i class="ico ico--lg ico--i ico--i-trophy"></i>
                                        <h4>Ranked among the top 1% <br>
                                            of universities in the world</h4>
                                        <a href="#LINK" class="link--cta--white">See our rankings</a>
                                    </div>
                                </div>
                                <div class="grid__col grid__col--12 grid__col-md--4">
                                    <div class="flex flex--center flex--column">
                                        <i class="ico ico--lg ico--i ico--i-star"></i>
                                        <h4>Australia’s best employability <br>
                                            program 2017 AFR Higher Ed Awards</h4>
                                        <a href="#LINK" class="link--cta--white">Learn more</a>
                                    </div>
                                </div>
                                <div class="grid__col grid__col--12 grid__col-md--4">
                                    <div class="flex flex--center flex--column">
                                        <i class="ico ico--lg ico--i ico--i-building"></i>
                                        <h4>300+ industry partners on campus <br>
                                            and within our innovation precinct</h4>
                                        <a href="#LINK" class="link--cta--white">Read more</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Intranet Banner

Banner Hero

Banner Documentation

Use

Banners should be full width and sit outsite of the main body wrap.

Background Image

Background image should be center focused to match all screen sizes.

For Primary and Secondary banners, the image is set as background-image in the ".banner__image" div.

For Hero banner, the image is set as background-image in the ".banner--hero" div.

Variations

Variations of heights - listed above

Content

Should contain a title only and background image. Ensure the image looks good on large screens.