Skip to content

Stats

Stats are handy when promoting several related data points.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. WordPress
  5. Recent Updates
  6. Specifications
    1. Properties
    2. Styling
      1. Custom Properties
  7. Changelog
  8. Examples

Anatomy

  1. Heading
  2. Items
  3. Item Value
  4. Item Label

Usage Guidelines

Stats are handy when promoting several related data points. Stats can have a maximum of three items listed. If more are needed, consider using individual fact components arranged in a grid.

Accessibility

The heading at the beginning of each Stats component should have the correct heading level set for the page outline.

When adding values and labels to each item, think about how the wording will be read out by a screen reader and if it makes sense. Sometimes the visually larger number or other value may look fine, but may be confusing if audibly read.

WordPress

This component can be added to post content with the Stats block in the Gutenberg editor.

Recent Updates

Sprint 32 7/26/2022 When editing the stats component, if you leave the Heading Class field blank, the default class and styling that the header will get will be h3. To override this, add your desired heading class, h1, h2, h3, h4, h5, or h6. Adding one of those classes removes the default h3 class being applied and replaces it with you new class.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
headingstring Main heading text Yes-
h_levelinteger Makes sure the title is the correct heading level for the page outline No2
itemsarray Makes sure the title is the correct heading level for the page outline. Yes-
└ itemobject - --
└ valuestring - Yes-
└ labelstring Display text Yes-
classstring list of additional classes to apply to main element. No-

Styling

Custom Properties

NameDefaultResetsDescription
--tux-comp-stats--value-colorvar(--tux-theme--accent-color)Yes-

Changelog

1.36.0 (2022-07-21)

  • fix: use h3 class only if another h level class is not used (36eca0d)

1.0.0

  • stats added

Examples

Default

Cool Stats

50

Cookies, whenever you want

63%

The best you'll find anywhere, trust us

500

Puzzle pieces all over the floor

{{ include( 'components/stats.twig', {
	heading: "Cool Stats"
	h_level: 2
	items: {...}
} ) }}

Different Heading Level

Cool Stats II

99+

things that are 100% good

#1

in family fun

2049

We're all androids

{{ include( 'components/stats.twig', {
	heading: "Cool Stats II"
	h_level: 3
	items: {...}
} ) }}