Infographic Layout Shapes

Six metric display shapes including icon badges, comparison bars, rating stars, thermometers, batteries, and pie progress indicators for dashboard-style architecture infographics.

February 27, 2026

The infographic layout shapes are purpose-built for dashboard-style displays and metric summaries. They turn single numeric values into instantly recognisable visual indicators, making them ideal for architecture health dashboards, SLA monitors, and executive summary posters.

Icon Badge

An icon displayed inside a shaped badge (circle, rounded square, or hexagon). Configure the badge shape, badge size, fill colour, and stroke. Icon badges are ideal for creating icon-first layouts where each service or component is represented by a recognisable icon.

Property	Options	Description
Icon Shape	Circle, Rounded Square, Hexagon	The outer badge geometry
Badge Size	Numeric (px)	Controls the overall badge dimensions
Fill Colour	Any colour	Background fill of the badge
Stroke Colour	Any colour	Border colour
Stroke Width	0+	Border thickness

Comparison Bar

A side-by-side horizontal bar comparing two values with distinct colours. Use for before/after comparisons, A/B test results, or resource allocation between two categories.

Progress Indicators

Four shapes display a single value (0-100%) as a visual fill level.

Rating Stars

A row of stars with configurable total count and filled count. The filled colour and empty colour are independently configurable. Use for quality ratings, maturity levels, or prioritisation scores.

Thermometer

A vertical mercury-style gauge showing a value from 0 to 100%. Configure the fill colour (mercury) and track colour (background). Use for capacity utilisation, budget consumption, or risk levels.

Battery

A battery-level indicator supporting horizontal or vertical orientation. The fill colour shows the current level against a track background. Use for resource availability, storage capacity, or energy efficiency.

Pie Progress

A circular progress indicator filling a pie chart from 0 to 100%. The fill colour shows completed progress against a track background. Use for project completion, test coverage, or deployment progress.

Architecture Dashboard Examples

These shapes combine well to create dashboard-style infographic sections within architecture documentation.

Shape	Kind	Value Range	Orientation	Key Colours
Icon Badge	icon-badge	N/A (display only)	N/A	Fill, Stroke
Comparison Bar	comparison-bar	Two numeric values	Horizontal	Left colour, Right colour
Rating Stars	rating-stars	0 to count (integer)	Horizontal	Filled colour, Empty colour
Thermometer	thermometer	0-1 (normalised)	Vertical	Fill colour, Track colour
Battery	battery	0-1 (normalised)	Horizontal or Vertical	Fill colour, Track colour
Pie Progress	pie-progress	0-1 (normalised)	N/A (circular)	Fill colour, Track colour