app.css

.govuk-data {

}

.govuk-data--warning {
    .govuk-data-value, .govuk-data-label {
        color: govuk-colour("red");
    }
}

.govuk-data--done {
    .govuk-data-value, .govuk-data-label {
        color: govuk-colour("green");
    }
}

.govuk-data-value {
    @extend .govuk-heading-l;
    margin-bottom: 0;
}

.govuk-data-label {

}

.govuk-grid-column-one-sixth {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 0 $govuk-gutter-half;

    @include govuk-media-query($from: tablet) {
        width: 16.6666%;
        float: left;
    }
}

index.html

    <div class="govuk-grid-row">
        <div class="govuk-grid-column-full">
            <h2 class="govuk-caption-l">
                Moves for
            </h2>
            <div class="govuk-grid-row">
                <div class="govuk-grid-column-one-quarter">
                    <p class="govuk-heading-l">
                        03/08/2020
                        <a class="govuk-button" href="#">change</a>
                    </p>

                </div>
                <div class="govuk-grid-column-one-quarter">
                    <div class="govuk-data">
                        <p class="govuk-data-value">
                            11
                        </p>
                        <p class="govuk-data-label">
                            Total people<br>to identify
                        </p>
                    </div>
                </div>
                <div class="govuk-grid-column-one-sixth">
                    <div class="govuk-data govuk-data--warning">
                        <p class="govuk-data-value">
                            4
                        </p>
                        <p class="govuk-data-label">
                            Risk<br>incomplete
                        </p>
                    </div>
                </div>

                <div class="govuk-grid-column-one-sixth">
                    <div class="govuk-data govuk-data--warning">
                        <p class="govuk-data-value">
                            4
                        </p>
                        <p class="govuk-data-label">
                            Health<br>incomplete
                        </p>
                    </div>
                </div>

                <div class="govuk-grid-column-one-sixth">
                    <div class="govuk-data govuk-data--done">
                        <p class="govuk-data-value">
                            0
                        </p>
                        <p class="govuk-data-label">
                            Offences<br>incomplete
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>