Home
Components
Banners
CTAs Buttons
Banner advanced

Alt colour with right aligned hero image and cta
Figma
<!-- Start of section -->
<section class="qld__banner qld__banner__advanced qld__banner--alt qld__banner--breadcrumbs qld__banner--has-hero qld__banner--hero-right">

    <!-- Breadcrumb navigation for mobile -->
    <nav class="qld__breadcrumbs qld__breadcrumbs--alt qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">
        <ul class="qld__link-list qld__link-list--inline">
            <li>
                <a href="https://www.design-system.health.qld.gov.au/components/banners">Banners</a>    
            </li>
        </ul>
    </nav>

    <div class="container-fluid">
        <div class="qld__banner__wrapper">
            <div class="qld__banner__main row">

                <!-- Hero Image Section -->
                <div class="qld__banner__hero col-xs-12 col-md-7 col-lg-5 col-xl-4">
                    <div class="qld__banner__image" style="background-image: url('https://www.design-system.health.qld.gov.au/__data/assets/image/0017/110276/Hero-placeholder-Crop.jpg');"></div>
                </div>

                <!-- Content Section -->
                <div class="qld__banner__content col-xs-12 col-md-6 col-lg-7">

                    <!-- Breadcrumb navigation for desktop -->
                    <nav class="qld__breadcrumbs qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb">
                        <ul class="qld__link-list qld__link-list--inline">
                            <li><a href="https://www.design-system.health.qld.gov.au">Home</a></li>
                            <li><a href="https://www.design-system.health.qld.gov.au/components">Components</a></li>
                            <li><a href="https://www.design-system.health.qld.gov.au/components/banners">Banners</a></li>
                            <li aria-current="page">CTAs Buttons</li>
                        </ul>
                    </nav>

                    <!-- Heading -->
                    <h1>Banner advanced</h1>
                    
                    <!-- Body Content -->
                    <div class="qld__banner__content--body qld__abstract">
                        <p>Alt colour with right aligned hero image and cta</p>
                    </div>

                    <!-- CTA Links -->
                    <ul class="qld__banner__content--cta qld__link-list">
                        <li><a class="qld__btn qld__btn--primary" data-type="class" href="javascript:void(0)">Primary button</a></li>
                        <li><a class="qld__btn qld__btn--secondary" data-type="class" href="javascript:void(0)">Secondary button</a></li>
                    </ul>
                    
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End of section -->
Last updated: March 2024