The hero image should be 1920x700 pixels to provide the optimal responsive experience. A min-height: 500px is applied to the hero at the largest breakpoint but the sub-header grows and shrinks according the text contained within it.

<!--
   Output inline style for image for more granular control
   Preferably add to CSS but this depends on the implementation
-->
<style>
    .health-sub-header--campaign {
        background-image: url('https://loremflickr.com/1920/700/health') !important; // reqd to override .au-body--dark bg
    }
</style>

<div class="health-sub-header health-sub-header--campaign au-body au-body--dark">
    <div class="container">
        <div class="row">
            <div class="health-sub-header__content col-sm-7">
                <h1>Campaign title</h1>
                <p class="au-introduction">
                    Mauris quis lacinia neque. Nullam tellus sapien, fringilla pharetra ligula et, vulputate luctus erat. Sed ac nibh lacinia, porta justo ac, dignissim dolor.
                </p>
                <p>
                    <a class="au-btn au-btn--dark au-btn--large" href="#">
            Callout button
          </a>
                </p>
            </div>
        </div>
    </div>
</div>