<!-- Start of Card Group - With top image and footnote -->
<div class="card-deck">
    <!-- Start of first card -->
    <div class="card"><img src="https://learning.aib.edu.au/draftfile.php/141150/user/draft/262622820/production%20line%20in%20a%20factory%20resized.png" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card header</h5>
            <p class="card-text"></p>
            <p>Card body text</p>
            <!-- Start of Show/Hide interface -->
            <p><a class="btn btn-primary btn-block collapsed" data-toggle="collapse" href="#CardHiddenContent1" role="button" aria-expanded="false" aria-controls="CardHiddenContent1"> More… </a></p>
            <div class="collapse" id="CardHiddenContent1" style="">
                <div class="card card-body">&nbsp;<span><span style="font-weight: bold;">
                            <p>Card body text</p><a class="btn-block btn btn-sm btn-light collapsed" data-toggle="collapse" href="#CardHiddenContent1" role="button" aria-expanded="false" aria-controls="CardHiddenContent1">Hide</a>
                        </span></span></div>
            </div>
            <!-- End of Show/Hide interface -->
        </div>
    </div>
    <!-- End of first card -->
    <!-- Start of second card -->
    <div class="card"><img src="https://learning.aib.edu.au/draftfile.php/141150/user/draft/262622820/three%20business%20women%20around%20a%20table%20resized.png" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card header</h5>
            <p class="card-text"></p>
            <p>Card body text</p>
            <!-- Start of Show/Hide interface -->
            <p><a class="btn btn-primary btn-block collapsed" data-toggle="collapse" href="#CardHiddenContent2" role="button" aria-expanded="false" aria-controls="CardHiddenContent2"> More… </a></p>
            <div class="collapse" id="CardHiddenContent2" style="">
                <div class="card card-body">
                    <p>Card body text</p><a class="btn-block btn btn-sm btn-light collapsed" data-toggle="collapse" href="#CardHiddenContent2" role="button" aria-expanded="false" aria-controls="CardHiddenContent2">Hide</a>
                </div>
            </div>
            <!-- End of Show/Hide interface -->
        </div>
    </div>
    <!-- End of second card -->
    <!-- Start of third card.  Delete if not required. -->
    <div class="card"><img src="https://learning.aib.edu.au/draftfile.php/141150/user/draft/262622820/Dress%20fitting%20resized.png" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card header</h5>
            <p class="card-text">Card body text</p>
            <!-- Start of Show/Hide interface -->
            <p><a class="btn btn-primary btn-block collapsed" data-toggle="collapse" href="#CardHiddenContent3" role="button" aria-expanded="false" aria-controls="CardHiddenContent3"> More… </a></p>
            <div class="collapse" id="CardHiddenContent3" style="">
                <div class="card card-body">
                    <p>Card body text</p><a class="btn-block btn btn-sm btn-light collapsed" data-toggle="collapse" href="#CardHiddenContent3" role="button" aria-expanded="false" aria-controls="CardHiddenContent3">Hide</a>
                </div>
            </div>
            <!-- End of Show/Hide interface -->
        </div>
    </div>
    <!-- End of third card -->
</div>
<!-- End of Card Group.-->