Commentary
The report box widget provides a display of progress of an activity. The text provides a name of reported value and a numeric value. These are typically used in an administration page.
These report boxes have one of 4 states:
- Default: generic information display;
- Success: displayed data is within satisfactory range;
- Warning: displayed data is starting to move out of satisfactory range;
- Danger: displayed data is outside of satisfactory range.
The report box widget can, optionally, include a progress bar. This provides more context for the displayed numeric value as to its overall meaning
Icons are supported and adjusted to fit into the report box. The span holding the
background icon is wrapped in a div that supplies the state colour and text colour for the icon.
Alternatively, the icon can be replaced by an img HTML tag.
The size of the image will adjust larger if a progress bar is present.
An optional figcaption HTML tag can be used to provide more descriptive text for a screen reader.
Usage
| Classes: | |
|---|---|
.reportbox |
Defines the parent component for the simple reportbox layout. |
.report-success |
Optional modifier to indicate that data is within acceptable range. |
.report-warning |
Optional modifier to indicate that data is approaching boundary of acceptable range. |
.report-danger |
Optional modifier to indicate that data is outside of acceptable range. |
| Dependencies: | |
|---|---|
| File: | reportbox.css |
| Variables: | --bg-component, --border-main, --danger, --gap-col, --gap-row, --grey-dark, --margin-medium, --mar-horz, --padding, --padding-medium, --radius-comp, --radius-rounded, --size-1, --size-5, --size-6, --success-dark, --warning, --text, --text-light, --text-invert, --weight-bold, --weight-semibold |
Examples
Reportbox Default Layout
Bookmarks 12
<figure class="reportbox [report-success report-warning report-danger] ">
<figcaption class="sr-only">Default Report Box</figcaption>
<div><span class="icon-bg-cloud-download"></span></div>
<p>
<span>Bookmarks</span>
<span>12</span>
</p>
</figure>
Reportbox Default with Image
Downloads 44,501
<figure class="reportbox [report-success report-warning report-danger] ">
<figcaption class="sr-only">Report Box with Image</figcaption>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/report-lion-head.jpg" alt="Lion Head Knocker" loading="lazy">
<p>
<span>Downloads</span>
<span>44,501</span>
</p>
</figure>
Reportbox Simple - Success Layout
Downloads 44,501
Reportbox Simple - Warning Layout
Songs Played 5,231
Reportbox Simple - Danger Layout
Login Attempts 23
Reportbox with Progress - Default Layout
<figure class="reportbox [report-success report-warning report-danger]">
<figcaption class="sr-only">Report Box with Progress</figcaption>
<div><span class="icon-bg-bookmark"></span></div>
<label>
<span>Bookmarks</span>
<span>67</span>
<progress value="75" max="100">75%</progress>
<span>75% Progess</span>
</label>
</figure>
Reportbox with Progress and Image
<figure class="reportbox [report-success report-warning report-danger]">
<figcaption class="sr-only">Report Box with Progress and Image</figcaption>
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/report-teddy-bear.jpg" alt="Teddy bear" loading="lazy">
<label>
<span>Bear Care Support</span>
<span>$47.63</span>
<progress value="55" max="100">55%</progress>
<span>55% Progess</span>
</label>
</figure>
Reportbox Success Progress
Reportbox Warning Progress
