Promo

<div class="ds-block">

    <div class="ds-promo">
        <div class="ds-promo__content">
            <div class="ds-promo__image">
                <div class="ds-promo__image-wrapper">
                    <img src="/ltu-components/src/banner/snippets/images/1920-cropped.jpg" alt="">
                    <!-- 
                    NOTE: Where possible You should use the image srcset attribute to provide for responsive images.

                    For La Trobe squiz matrix use this:

                    <img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
                    srcset="{ 480 wide variety URL } 480w,
                    { 720 wide variety URL } 720w,
                    { 1024 wide variety URL } 1024w,
                    { 1280 wide variety URL } 1280w,
                    { full size (2056) image URL } 2560w" sizes="100vw">
                -->
                </div>
            </div>
            <div class="ds-promo__text">
                <div class="ds-promo__text-wrapper">
                    <h2 class="ds-promo__heading">Flexible options starting July, September and November</h2>
                    <p>Start your degree online now and study on campus later. Same world-class education, different mode of learning – with support every step of the way.</p>
                    <p class="ds-promo__button-group"><a href="#" class="ds-btn-secondary ds-icon-chevron-right">Discover new terms</a></p>
                </div>
            </div>
        </div>
    </div>
        
</div>

<div class="ds-block">

    <div class="ds-promo ds-promo--reverse">
        <div class="ds-promo__content">
            <div class="ds-promo__image">
                <div class="ds-promo__image-wrapper">
                    <img src="/ltu-components/src/promo/snippets/images/1920-cropped.jpg" alt="">
                    <!-- 
                    NOTE: Where possible You should use the image srcset attribute to provide for responsive images.

                    For La Trobe squiz matrix use this:

                    <img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
                    srcset="{ 480 wide variety URL } 480w,
                    { 720 wide variety URL } 720w,
                    { 1024 wide variety URL } 1024w,
                    { 1280 wide variety URL } 1280w,
                    { full size (2056) image URL } 2560w" sizes="100vw">
                -->
                </div>
            </div>
            <div class="ds-promo__text">
                <div class="ds-promo__text-wrapper">
                    <h2 class="ds-promo__heading">Living in Australia</h2>
                    <p>A relaxed lifestyle. Friendly people. Spectacular scenery. Find out what makes Australia one of the best places in the world to live and study.</p>
                    <p class="ds-promo__button-group"><a href="#" class="ds-btn-secondary ds-icon-chevron-right">Discover the Autralian lifestyle</a></p>
                </div>
            </div>
        </div>
    </div>
        
</div>

<div class="ds-block">

    <div class="ds-promo ds-promo--image-bleed">
        <div class="ds-promo__content">
            <div class="ds-promo__image">
                <div class="ds-promo__image-wrapper">
                    <img src="/ltu-components/src/promo/snippets/images/1920.jpg" alt="">
                    <!-- 
                    NOTE: Where possible You should use the image srcset attribute to provide for responsive images.

                    For La Trobe squiz matrix use this:

                    <img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
                    srcset="{ 480 wide variety URL } 480w,
                    { 720 wide variety URL } 720w,
                    { 1024 wide variety URL } 1024w,
                    { 1280 wide variety URL } 1280w,
                    { full size (2056) image URL } 2560w" sizes="100vw">
                -->
                </div>
            </div>
            <div class="ds-promo__text">
                <div class="ds-promo__text-wrapper">
                    <h2 class="ds-promo__heading">Flexible options starting July, September and November</h2>
                    <p>Start your degree online now and study on campus later. Same world-class education, different mode of learning – with support every step of the way.</p>
                    <p class="ds-promo__button-group"><a href="#" class="ds-btn-secondary ds-icon-chevron-right">Discover new terms</a></p>
                </div>
            </div>
        </div>
    </div>
        
</div>

<div class="ds-block">

    <div class="ds-promo ds-promo--image-bleed  ds-promo--reverse">
        <div class="ds-promo__content">
            <div class="ds-promo__image">
                <div class="ds-promo__image-wrapper">
                    <img src="/ltu-components/src/promo/snippets/images/disc-arts.jpg" alt="">
                    <!-- 
                    NOTE: Where possible You should use the image srcset attribute to provide for responsive images.

                    For La Trobe squiz matrix use this:

                    <img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
                    srcset="{ 480 wide variety URL } 480w,
                    { 720 wide variety URL } 720w,
                    { 1024 wide variety URL } 1024w,
                    { 1280 wide variety URL } 1280w,
                    { full size (2056) image URL } 2560w" sizes="100vw">
                -->
                </div>
            </div>
            <div class="ds-promo__text">
                <div class="ds-promo__text-wrapper">
                    <h2 class="ds-promo__heading">Living in Australia</h2>
                    <p>A relaxed lifestyle. Friendly people. Spectacular scenery. Find out what makes Australia one of the best places in the world to live and study.</p>
                    <p class="ds-promo__button-group"><a href="#" class="ds-btn-secondary ds-icon-chevron-right">Discover the Autralian lifestyle</a></p>
                </div>
            </div>
        </div>
    </div>
        
</div>

<div class="ds-block">

    <div class="ds-promo ds-promo--image-bleed">
        <div class="ds-promo__content">
            <div class="ds-promo__image">
                <div class="ds-promo__image-wrapper">
                    <img src="/ltu-components/src/promo/snippets/images/Students-studying-together-in-the-library.jpg" alt="">
                    <!-- 
                    NOTE: Where possible You should use the image srcset attribute to provide for responsive images.

                    For La Trobe squiz matrix use this:

                    <img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
                    srcset="{ 480 wide variety URL } 480w,
                    { 720 wide variety URL } 720w,
                    { 1024 wide variety URL } 1024w,
                    { 1280 wide variety URL } 1280w,
                    { full size (2056) image URL } 2560w" sizes="100vw">
                -->
                </div>
            </div>
            <div class="ds-promo__text">
                <div class="ds-promo__text-wrapper">
                    <h2 class="ds-promo__heading">What can you expect at La&nbspTrobe?</h2>
                    <p>At La&nbsp;Trobe University, we shape the future. When you study with us, you'll make new friends at our vibrant multicultural campuses, learn the skills you need for your career and enjoy the Australian lifestyle.</p>
                    <p class="ds-promo__button-group"><a class="ds-btn ds-btn-secondary ds-icon-play" href="https://youtu.be/NAAbCfAA2Fc" data-youtube="NAAbCfAA2Fc">Watch video</a></p>
                </div>
            </div>
        </div>
    </div>
        
</div>