Commentary

The infobox widget provides a display of timely and (optionally) actionable information. These are typically used in an administration page.

These infoboxes have 4 states:

  • Default: generic information display;
  • Primary: displayed data is important;
  • Secondary: displayed data is useful;
  • Tertiary: displayed data is for reminding.

The text area holds important information. Both sup and sub HTML tags are supported. These can be used as a prefix or suffix for the numerical display. These elements should only be used for typographical reasons; that is, to change the position of the text to comply with typographical conventions or standards. These elements should not be used for presentation or appearance purposes.

Icons are supported. 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.

An optional footer region is available that is typically used to hold a call to action link.

An optional figcaption HTML tag can be used to provide more descriptive text for a screen reader.

Usage

Classes:
.infobox Defines the parent component for the simple infobox layout.
.infobox-primary Optional modifier to indicate that data has some importants.
.infobox-secondary Optional modifier to indicate that data is generally useful.
.infobox-tertiary Optional modifier to indicate that data is mostly a reminder.
Dependencies:
File: infobox.css
Variables: --bg-component, --indicator-right, --gap-col, --gap-row, --grey-dark, --margin-vert, --mar-horz, --pad-vert, --padding-medium, --mar-horz, --mar-vert, --radius-comp, --radius-elem, --radius-rounded, --primary, --primary-dark, --primary-light, --secondary, --secondary-dark, --secondary-light, --shadow, --size-3, --size-5, --tertiary, --tertiary-dark, --tertiary-light, --text-light, --text-invert, --weight-bold, --weight-semibold

Examples

Infobox Default Layout

Default info box

95% No Footer 


                <figure class="infobox [infobox-primary infobox-secondary infobox-tertiary] ">
                    <figcaption class="sr-only">Default info box</figcaption>
                    <div>
                        <p>
                            <span>95<sup>%</sup></span>
                            <span>No Footer</span>
                        </p>
                        <div><span class="icon-bg-list"></span></div>
                    </div>
                </figure>

Infobox Default Layout with Image and Footer

Info box with image and footer

55% Economics

Lion Head Knocker
Find Info 

                <figure class="infobox [infobox-primary infobox-secondary infobox-tertiary] ">
                    <figcaption class="sr-only">Info box with image and footer</figcaption>
                    <div>
                        <p>
                            <span>55<sup>%</sup></span>
                            <span>Economics</span>
                        </p>

                        <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/report-lion-head.jpg" alt="Lion Head Knocker" loading="lazy">
                    </div>

                    <a href="http://www.apple.com">
                        <span>More Info</span>
                    </a>
                </figure>

Infobox Primary

Tracking repair costs

99€ Repair Cost

Buy Deal Now

Infobox Secondary - No Footer

Measured temperature for this probe

100°F Boiling Point

Infobox Tertiary

Tracking baggage loss rates

101 Lost Bags

Frog with Luggage
Track Your Bag