Mosaic

<div class="ds-block">

        <ul class="ds-mosaic">

            <li class="ds-mosaic__tile ds-mosaic__tile--primary ds-mosaic__tile--black">
                <div class="ds-mosaic__tile-wrapper">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">When you arrive</h3>
                        <p class="ds-mosaic__tile-description">Discover your next steps for what needs to be done once
                            you arrive.</p>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-btn--light ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link" href="https://www.latrobe.edu.au/international/when-you-arrive">Life
                        at La Trobe</a>
                </div>
            </li>

            <li class="ds-mosaic__tile ds-mosaic__tile--image">
                <div class="ds-mosaic__tile-wrapper">
                    <img class="ds-mosaic__tile-image"
                        src="https://www.latrobe.edu.au/international/images-landing-page/Students-walking-across-grass.jpg/large.jpg"
                        alt="">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">Exchange and study abroad</h3>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-btn--light ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link"
                        href="https://www.latrobe.edu.au/international/exchange-and-study-abroad">Life at La Trobe</a>
                </div>
            </li>

            <li class="ds-mosaic__tile ds-mosaic__tile--red">
                <div class="ds-mosaic__tile-wrapper">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">Meet us in your country</h3>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-btn--light ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link"
                        href="https://www.latrobe.edu.au/international/international/meet-us-in-your-country">Life at La
                        Trobe</a>
                </div>
            </li>

            <li class="ds-mosaic__tile ds-mosaic__tile--image">
                <div class="ds-mosaic__tile-wrapper">
                    <img class="ds-mosaic__tile-image"
                        src="https://www.latrobe.edu.au/international/images-landing-page/International-students-sitting-outside.jpg/large.jpg"
                        alt="">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">Education fairs</h3>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-btn--light ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link"
                        href="https://www.latrobe.edu.au/international/international/meet-us-in-your-country/education-fairs-and-webinars">Life
                        at La Trobe</a>
                </div>
            </li>

            <li class="ds-mosaic__tile ds-mosaic__tile--grey">
                <div class="ds-mosaic__tile-wrapper">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">Rankings and ratings</h3>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link" href="https://www.latrobe.edu.au/about/rankings-and-ratings">Life at
                        La Trobe</a>
                </div>
            </li>

            <li class="ds-mosaic__tile ds-mosaic__tile--image">
                <div class="ds-mosaic__tile-wrapper">
                    <img class="ds-mosaic__tile-image"
                        src="https://www.latrobe.edu.au/international/images-landing-page/Students-on-computers.jpg/large.jpg"
                        alt="">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">Choose your language</h3>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link"
                        href="https://www.latrobe.edu.au/international/international/choose-your-language">Life at La
                        Trobe</a>
                </div>
            </li>

            <li class="ds-mosaic__tile ds-mosaic__tile--transparent">
                <div class="ds-mosaic__tile-wrapper">
                    <div class="ds-mosaic__tile-content">
                        <h3 class="ds-mosaic__tile-title">Contact us</h3>
                        <footer class="ds-mosaic__tile-content-footer">
                            <span class="ds-btn-round ds-btn--small ds-icon-arrow-right"></span> </footer>
                    </div>
                    <a class="ds-mosaic__tile-link" href="https://www.latrobe.edu.au/international/international">Life
                        at La Trobe</a>
                </div>
            </li>

        </ul>

</div>