---
description: Ajoute un contenu permettant de mettre en avant des chiffres clés
---

# Chiffres clés

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FMiYosBa69F9onIkosVQD%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-27%20a%CC%80%2011.18.20.png?alt=media&#x26;token=bf160ed1-32ff-43f7-a7f4-40c5d0db2f0c" alt=""><figcaption><p>Exemple du composant Chiffres clés</p></figcaption></figure>

## Disponible sur...

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/satellites-non-red?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/intranet-non-red?style=for-the-badge\&logo=typo3)

## Présentation

{% hint style="info" %}
Le composant **Chiffres clés** permet de mettre en avant des données chiffrées avec un effet visuel de progression lors de l'affichage.
{% endhint %}

### Ajout d'un nouveau composant Chiffres clés

1. Sur la page en mode ![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSD1CZ72IMzn7bulXsE7C%2Fmode-rediger.png?alt=media\&token=f16ba40e-ee9d-4538-be59-993d8c842dae), trouvez la section où vous souhaitez ajouter un composant Chiffres clés.
2. Cliquez sur le bouton "+ Contenu" pour ouvrir le sélecteur d'éléments.
3. Sélectionnez  **Chiffres clés** dans l'onglet **Autres contenus**.

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2F8dG5mVd9XUUMgu8GSckA%2FCapture%20d%E2%80%99e%CC%81cran%202024-10-10%20a%CC%80%2011.30.02.png?alt=media&#x26;token=de5f8822-e401-48b5-9e31-a7de345740af" alt=""><figcaption></figcaption></figure>

### Configuration du composant

1. Une fois que vous avez ajouté le composant, vous verrez une boîte de dialogue de configuration.
2. Entrez un titre (optionnel) dans la zone **titre**
3. Entrez un **lien** (optionnel)
4. Dans **Nombre d'éléments par ligne** choisissez le nombre de chiffres qui vont s'afficher par ligne.
5. Dans **Chiffres** cliquez sur le bouton **+ Créer nouveau** pour chaque chiffre clé que vous souhaitez ajouter.&#x20;
6. Ensuite saisissez votre **Nombre**, **Unité** (par exemple %) et **Libellé**.
7. Dans l'onglet **Apparence** vous pouvez eventuellement choisir une **couleur d'arrière plan**
8. Enregistrez vos modifications

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FrthahTFk2Ue4AN5MS5ni%2FCapture%20d%E2%80%99e%CC%81cran%202024-10-10%20a%CC%80%2011.30.47.png?alt=media&#x26;token=73ba24cd-cdcb-4d0f-933e-e09e813e85d3" alt=""><figcaption></figcaption></figure>

## Exemples

Vous pouvez retrouver des exemples d'intégration du composant csv ici :&#x20;

{% embed url="https://template.univ-gustave-eiffel.fr/test-contenus/autres-contenus/chiffres" %}

