Skip to content

Instantly share code, notes, and snippets.

@matthewrudy

matthewrudy/app.css Secret

Last active Jul 9, 2018
Embed
What would you like to do?
.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;
}
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment