Origami Frontend Components & Services

Demos: o-meter

Simple Meter

This demo shows a meter with a value of 33. Do not forget to add an aria-label attribute to describe your meter.

Simple Meter With Different Values Where Higher Is Better

This demo shows four o-meter components with different values, where higher is better. HTML meter elements have min and max attributes, with a low and high range within. The optimum attribute indicates where along the min-max range is considered preferable.

Simple Meter With Different Values Where Lower Is Better

This demo shows four o-meter components with different values, where lower is better. HTML meter elements have min and max attributes, with a low and high range within. The optimum attribute indicates where along the min-max range is considered preferable.

Meter With Optional Value Box

This demo show a meter with a value of 2.5 with an optional value box. Note that meter value and percentage can be different. Do not forget to add an aria-label attribute to describe your meter.

Meter With Customised Colours

This demo shows a meter with a value of 25 that was colour-customised. Do not forget to add an aria-label attribute to describe your meter.

Meter With Customised Dimensions

This demo shows a basic meter with a value of 25 with customised width and length. Do not forget to add an aria-label attribute to describe your meter.

Meter With Value Box And Customised Dimensions

This demo shows a meter with a value of 25 with customised width and length. Do not forget to add an aria-label attribute to describe your meter.

Status
maintained
Switch component view

GitHub Repository

Install o-meter

If using the Build Service, add o-meter@^3.0.1 to your link tag. Ensure the correct brand is set with a query parameter &brand=internal.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-meter@^3.0.1".

Help & Support

o-meter is maintained directly by the Origami team. If you have any questions about o-meter or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com