Web Style Guide
Menu
Search

Key figures

The key figures component features quantitative achievements and links them to a details page.

Minimum requirements
  • 1 figure (div.box) - composed of:
    • 1 heading (div)
    • 1 key figure (div.value)
    • 1 reference period (div)

Quick access

UsageGuidelines
HTML structurePresetsVariations
Embedding
Nesting
HTML
Copy to clipboard








	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsEmbeddingNestingTest pageGo to top		

	

	

		
Details

		
Usage
The key figures component was designed to feature the key statistics indicators.
Guidelines
  1. Should be used only at the statistics hub page
  2. Character limits (including spaces):
    • 45 characters for the title (div)
    • 45 characters for the link (.-show-more)
HTML structure
Overall HTML view of a key gifures component:
HTML file (.html)
        
(other component(s))

        
div.key-figures
            
div.container
                
div.box (one or more)
                    
a
                        
div

                        
div.value.arrow-up || div.value.arrow-down

                        
div

                        
div.-show-more || div.-show-visualisation

                    

                

            

        

        
(other component(s))

    
Presets
Key figures presets:
PresetDescription
DefaultDefault preset.
Variations
Key figures variations:
VariationDescription
DefaultThis snippet is composed of four figures boxes.
Embedding
The key figures component cannot be embedded inside other component.
main (HTML file)
        
(component)
            
div.key-figures

        

    
Nesting
The key figures component cannot be used as a container of other components and/or elements.
main (HTML file)
        
div.key-figures
            
(Element)