---
title: "Number"
description: "The Number Component can display Numeric Values consistently across Teasers and Layouts, following Brand Guidelines."
path: https://www.eonshowroom.eon.com/en/content-elements/number.html
lastModified: 2025-07-10T12:30:57.946Z
---

# Number

# Number

100 % of FUN

[How to Configure](#how-to)

### Description

The Number Component can display Numeric Values consistently across Teasers and Layouts, following Brand Guidelines.

- Different Number Sizes are possible
- Number can be animated

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-number--interactive)

### Inspirations

### Already spent:

≈ 50000 €

## Sunshine

A lots of Sunshine in Sunnytown:

>= 60 Hours of Sun per Week

[Bet your Solar Panels](https://www.eon.de/de/pk/solar/photovoltaik-loesungen.html)

### Usage Rules & Features

##### Features

- Headline can come with optional Tooltip

##### Properties

- Number can be sized from L to XXL

##### Design

- Number can be animated in normal or slow Speed

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | yes |
| 4 | yes |
| 5 | no |
| 6 | no |
| 8 | no |
| 9 | no |
| 10 | no |
| 12 | no |

### DO's

- Use different Number Sizes for emphazising Purpose

### DONT's

- Don't use it in too big Grids (especial when using small Numbers)

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/number-2%3A3-4?fmt=webp)

### Configuration of Number

To configure Number Component, Editor needs to enter a Number.

Beside this, Editor can set a Number Prefix (like <,>,<=,>=,...) and enter a Unit (like h,km,€,...).

Furthermore, Editor can select a Size (L, XL, XXL) for the Number, as well as an Animation (none, normal, or slow).

Beside that the Number of Decimals can be set to 0, 1, or 2.

The Color Sheme can be selected, but if using E.ON Brand Design, it is advisable to only use Default Settings for Color.