L’accordéon permet d'afficher de grandes quantités de contenu dans un espace réduit grâce à la divulgation progressive.

Accordion

children

className

testId

Ne pas dépasser plus de 5 accordéons pour limiter l’encombrement et la charge cognitive

## Contexte

Une alerte se compose d’une icône, d’un titre et d’une description. Sa couleur et son icône sont associées à la nature du message. Dans tous les cas, son rôle est d’attirer l’attention de l’utilisateur sur une information ou la conséquence d’une action en cours, sans compromettre la suite du parcours.

Il existe 4 types d’alerte :

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0df0e205-57e4-46c8-80bd-6f9b3d9ed97d)


## Construction

Une alerte contient le plus souvent un texte principal (titre) en Body 1 Bold et un texte secondaire (description) en Body 2. On peut mettre certaines informations essentielles du texte secondaire en Body 2 Bold.

**Texte principal (Titre)**

- **Formulation avec description** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...).

- **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou la conséquence de son action en cours.

- **Longueur** : dans l’idéal, on ne dépasse pas 2 lignes en version mobile (58 caractères espaces compris).

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/e10552c2-c04c-4248-b386-251bd47d1e39)

- **Formulation sans description** : lorsque l’information principale est assez concise et explicite, l’alerte peut prendre la forme d’un titre sans description.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/a0ef677c-51ef-4369-9bb0-67de90e8b551)

**Texte secondaire (Description)**

- **Formulation standard** : on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final. 

- **Message** : on précise toutes les informations à connaître et on propose la ou les actions à réaliser si besoin.

- **Longueur** : dans l’idéal, on ne dépasse pas 4 lignes en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/b7b9f6b0-6d07-4c3b-a8bd-094e30838327)

- **Formulation avec liste à puces** : on peut utiliser une liste à puces pour exprimer plusieurs idées ou une idée complexe. 

- **Message** : on donne une idée claire et précise par point.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7edecd40-48aa-4397-a17f-dac6981fb1bb)

- **Formulation avec lien** : on peut intégrer un lien dans le texte ou hors du texte pour faciliter la navigation de l’utilisateur.

- **Message** : on précise bien la navigation à venir dans le texte du lien.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c52c0e92-54ea-48ec-8858-6620e7b698e0)

## Ton de voix

**Les 4 types d'alerte**

L’état émotionnel de l’utilisateur varie selon la nature de l’alerte : attention, succès, information ou erreur. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/cc9a8236-7c03-4df2-8f01-303f4daddf5b)


## Variables de microcopie

**Formulation des 4 types d'alerte**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/032abfca-6a0f-4697-b306-0709c0bd921e)

Les alertes sont utilisées pour afficher des informations concernant un impact sur l'expérience utilisateur et les utilisations du produit.


Alert

iconName

title

description

display

toaster

banner

markup

Status Variant (INFO|SUCCESS|WARNING|ERROR)

status

onClick

accessibilityLabel

Privilégier un titre concis

Éviter les doublons entre le titre et le contenu de l’alerte

Associer une action maximum à une alerte

Ne pas changer/enlever l’icone

L'Autocomplete est un champ de saisie qui propose des suggestions dynamiques à mesure que l'utilisateur tape, pour accélérer et fiabiliser la saisie.

AutoComplete

Les suggestions doivent correspondre précisément à la saisie et être triées par pertinence pour guider efficacement l'utilisateur.

Afficher des suggestions pertinentes

L'utilisateur doit toujours pouvoir valider sa saisie même si elle ne correspond à aucune suggestion.

Permettre la saisie libre en complément

Les badges sont des étiquettes permettant de communiquer efficacement une information simple et contextuelle (le plus souvent, un compte numérique) sur le composant auquel le badge est rattaché.


Badge

If no content add children (Icon for example)

label

position

variant

inverted

Toujours placer l’icône en haut à droite

Ne pas écrire tout les chiffres si ça dépasse 99

Un badge ne peut pas contenir un texte 

Une box est un conteneur qui permet de regrouper et structurer du contenu dans une page.

skeleton

href

Add Left Highlight Border With Semantic Color

highlighted

shadowless

backgroundSrc

headerOffset

Flat box remove shadow and add plain border

flat

active

blank

backgroundColor

fullheight

La couleur de la bordure en flat, ne peut pas être changé.

Les box doivent toujours respecter les grilles

Utilisez la bonne couleur en fonction du contenu pour appuyer votre message

Le box header doit être utilisé pour mettre en avant une box parmi une liste de box.

Le variant flat de la Box possède une couleur de bordure fixe définie par le Design System. Elle ne doit pas être modifiée.

La couleur de la bordure en flat ne peut pas être changée

Une Box doit s'inscrire dans le système de grilles défini par le Design System. Ne jamais utiliser une Box en dehors de la grille ou avec une largeur arbitraire.

Les Box doivent toujours respecter les grilles

Le choix de la couleur d'une Box doit être cohérent avec le contenu qu'elle encadre. Utilisez la couleur d'erreur pour signaler un problème (ex : facture non payée) et non pour du contenu promotionnel.

Le breadcrumb ou fil d’ariane est un élément de navigation utilisé pour indiquer l'emplacement actuel de l'utilisateur et l'aider à naviguer.


Breadcrumb

Ne doit pas être utilisé pour affiché des étapes

Le breadcrumb ne doit pas dépasser 327px de large

Ne  pas changer le séparateur 

### Contexte

Un bouton est utilisé pour déclencher une action. Pour cela, il doit être clair, prédictible et inciter l’utilisateur à cette action. Un bouton doit donc toujours prendre en compte le contexte et préciser l’action à venir. 

### Construction

##### Formulation : <Verbe à l’infinitif + Objet de l’action> en Body 1 Bold 

- Un bouton prend la forme <Verbe à l’infinitif> + <Objet de l’action>, car il doit clairement indiquer l’action à venir, tout en incitant l’utilisateur à cliquer.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/6b097112-ff7a-46d5-afee-ed917be5a747)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/04eb9d6b-fe3a-4c31-8cdf-327f1f1ae971)

- Un bouton prendre la forme {Mot} + {Verbe à l’infinitif} dans le cas où celui-ci ne peut pas commencer par {Verbe à l’infinitif}.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/63d657d8-4fda-4e70-9088-347b78b1fc97)

- Un bouton peut prendre la forme {Verbe à l’infinitif sans complément} uniquement si l’action est assez courante et explicite.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2dd4edd1-dce4-43d6-bea0-25d5f97694aa)

- Un bouton peut contenir une valeur dynamique dans un contexte de filtrage des items.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/62a461f2-b303-4edf-8c16-9c7212ac5287)

##### Longueur : 25 caractères maximum

- Un bouton doit être le plus court possible et se limiter à une seule action. Chaque mot doit avoir un but précis, on supprime donc tous les mots inutiles. Dans l’idéal, on ne dépasse pas les 25 caractères, espaces compris.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/30e32bc2-d7d1-4558-8f45-b67fc3642dc0)


##### Cohérence : le même mot pour décrire la même action

- Un bouton doit reprendre les mêmes termes et notions de l’interface pour décrire l’action de l’utilisateur.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0a9f5323-cea6-461c-9189-daeb5cc4c72a)

##### Majuscule, minuscule et ponctuation

- Un bouton commence toujours par une lettre en majuscule, le reste est en minuscule.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/439f8e51-ab39-422c-9e40-1d388dc50033)

- Les noms de produit ou de marque d’un bouton suivent les règles du propriétaire. Rendez-vous sur leurs sites pour connaître leur orthographe.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/3dce61d1-16bf-4540-81c1-ed8bf0981ecd)

- Un bouton ne prend jamais de signe de ponctuation.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/26d96f05-3e90-429c-84f4-8e073a9029ca)


##### Conversation

- On privilégie {mon/ma/mes} lorsqu’on parle d’une offre ou d’un équipement que l’utilisateur possède déjà ou qu’on décrit une action qui lui est propre. 

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/121401d1-78e0-4de1-a629-49f92881dfa8)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/fb593fc1-8dec-4d55-b5d3-44c0fb634864)

- On privilégie {ce/cette/ces} lorsque l’utilisateur répond à un choix proposé par Bouygues Telecom. 

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/f3554b85-0930-475d-9ebc-6cedbdc2c7c1)


### Actions récurrentes

##### Les boutons de conversion

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/85ec3baf-45e3-47f8-802a-87cab4d258f0)

##### Les boutons primaires

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0ef2bc8c-9cff-4ae9-a1be-ec1955428335)

##### Les boutons secondaires

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/47081461-9136-47e8-97de-db55c917e803)

##### Les boutons ghost

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/b669982b-5be6-4d01-8eee-abf6c9f3985f)


### Variables de microcopie

##### Formulation standard

![![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/a2f739af-ef2f-4481-911c-3dc0a277d907)](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/daf76f63-4809-4a86-b411-38f9ad015183)

##### Formulations contextualisées

- Choix offre
- Choix option
- Choix produit
- Eligibilité
- En savoir plus
- Paiement
- RDV
- Retour
- Suivant

Le bouton est un composant cliquable qui permet à l’utilisateur de déclencher une action spécifique au sein de l’interface.

Button

If Icon, Button + Icon && Button IconName

disabled

HTML element : button|input|a (ONLY FOR WEB)

loading

name

routerLink

type

Button variant : accent|primary|secondary|ghost.

fullwidth

Un bouton de conversion et un bouton primaire ne doivent jamais être associés.

Association des types de boutons

Toujours placer l’action la plus importante à droite lorsque 2 boutons sont alignés horizontalement.

Placement horizontal des boutons

Toujours placer l’action la plus importante en haut lorsque 2 boutons sont alignés verticalement.

Placement vertical des boutons

Le composant Calendar permet de sélectionner et visualiser des dates ou des plages de dates dans une interface claire et intuitive.  
Il s’adapte aux différents formats et langues, tout en respectant les règles d’accessibilité.

Calendar

value

minDate

maxDate

readOnly

onChange

onMonthChange

disabledDates

Une card contient du contenu (image et texte) et des actions sur un seul sujet.


Card

horizontal

floating

reversed

Une card ne peut pas contenir un hat 

Ne pas changer le background des cards

Respecter la hiérarchie des boutons. 

Les cards doivent toujours respecter les grilles

## Contexte

Une checkbox est utilisée pour sélectionner des éléments (0, 1 ou plusieurs) d’une liste spécifique, en cochant ou décochant la ou les cases souhaitées. Les textes doivent être assez explicites pour éviter toute confusion entre ces éléments. Une checkbox peut également se présenter avec un élément unique, obligatoire ou non, pour accepter des conditions par exemple. Pour toute autre sélection unique, on utilise [les radio buttons](https://design.bouyguestelecom.fr/components/Radio?activeTab=content).

## Construction

##### Checkbox à éléments multiples

Une Checkbox à éléments multiples peut être introduite par un texte principal (titre) et précisée par un texte secondaire (description). Dans ce cas, le texte principal est en bold et le texte secondaire est en regular.

**Texte principal (Titre)**

- **Formulation** : on utilise les mêmes formulations tout au long de la liste, avec une majuscule sur le premier mot et sans point final.

- **Message** : on donne une seule idée claire, concise et explicite par élément.

- **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/8abc2b1d-c3fb-445f-8b31-b492d30ac27f)


**Texte secondaire (description)**

- **Formulation** : on utilise les mêmes formulations tout au long de la liste, avec une majuscule sur le premier mot et un point final sur les phrases verbales. 

- **Message** : on donne une seule idée claire, concise et explicite par élément. Ce texte doit apporter un message complémentaire au titre (description, proposition, solution...), donc on évite les redondances.

- **Longueur** : dans l’idéal, on ne dépasse 2 lignes en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/aced3a19-94f3-428a-80e2-521462ec84f5)


##### Checkbox à élément unique

**Checkbox à élément unique et non obligatoire**

- **Formulation** : on ponctue avec une majuscule sur le premier mot et sans point final.

- **Message** : on donne une seule idée claire, concise et explicite par élément.

- **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ce9c7d0d-d412-4385-b9a0-350148e8b78f)

**Checkbox à élément unique et obligatoire**

- **Formulation** : on ponctue avec une majuscule sur le premier mot et avec un point final sur les phrases verbales.

- **Message** : on privilégie une seule idée claire, concise et explicite par élément, mais on peut intégrer plusieurs idées et plusieurs phrases par élément lorsque les contraintes juridiques l’exigent.

- **Longueur** : on fait au plus court en supprimant les mots inutiles.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/754d204d-b747-4816-9436-f1695b91a3f1)

La checkbox permet aux utilisateurs de sélectionner un ou plusieurs éléments dans un ensemble.


Checkbox

Lorsque l’utilisateur ne doit effectuer qu’un seul choix dans une liste de choix, on utilise les radio buttons

Sélection unique

Ne pas mélanger checkox et radio button dans la même liste.

Checkbox et Radio button

Ne pas mettre des checkbox sur plusieurs lignes.

Alignement horizontal

Ne pas utiliser les checkbox pour activer ou désactiver un état. Dans ces cas, utilisez un switch.

Activation d'état

Une checkbox tile doit toujours avoir un label. Le radio tiles doit toujours contenir un label en bold. Ce label peut être accompagné d’une description lorsque celui-ci nécessite un ou des éléments complémentaires pour guider au mieux l’utilisateur dans son choix.

Label des checkbox 

Les chips sont des éléments compacts qui représentent une entrée, un attribut ou une action.


Chips

Ne pas changer l’icône de l’état “Activated”.

Icône

Une chips ne doit pas réaliser d’action.  

Action

Les chips doivent être groupées en catégories ou caractéristiques logiques.

Groupement des chips

Ne jamais utiliser une chips seule. Un groupe de chips contient au minimum 2 chips , au maximum 7 chips. 

2 Chips minimum 

Le composant Columns permet de diviser l'espace horizontal en plusieurs sections verticales, afin de créer une structure harmonieuse et responsive.

Columns

multiline

scrollable

fullBleed

mobile

marginless

align

verticalAlign

Le conteneur centre votre contenu horizontalement. C'est l'élément de mise en page le plus basique.

Container

* - ------------------ WEB PROPERTIES -----------------------

medium

Le compte à rebours est utile pour visualiser la fin d’un évènement.


Countdown

Date to reach before the end of the countdown

deadline

format

event

small

Adapter le format au contexte

Champ de saisie de date avec calendrier intégré, permettant à l'utilisateur de saisir ou sélectionner une date au format JJ/MM/AAAA.

Datepicker

Indiquer systématiquement le format attendu (JJ/MM/AAAA) sous le label pour guider la saisie clavier.

Afficher le format de date attendu

Les séparateurs sont utilisés pour différencier des zones d'information au sein d'un espace de contenu neutre comme les cartes, les box ou les sections.


Divider

Utiliser des dividers que lorsque cela est nécessaire

Garder une cohésion graphique au sein de la page

Le FAB (Floating Action Button) représente l'action la plus importante sur un écran. Il met les actions clés à portée de main.


Utiliser des icônes claires et compréhensibles

Le FAB doit être positionné en bas à droite sur l’écran

Le composant FlexBox est un élément de structure conçu pour faciliter l'alignement et la disposition des éléments enfants de manière répétitive. Il offre une structure efficace pour gérer l'orientation et l'espacement entre les éléments.

FlexBox

direction

justify

wrap

Bannière de haut de page destiné à attirer l'attention.


Hero

Hero overlap components in tab (need to add key for each element),

overlap

backgroundHeight

If source, it will display background option

Chaque icône est conçue pour communiquer une intention et faciliter la navigation.  
Pour voir la liste complète, c'est par [ici](/foundations/icons).

Icon

size

circled

stretched

color

stacked

## Contexte

Un input doit indiquer de façon claire et précise les informations à saisir par l’utilisatrice ou utilisateur. Ils peuvent se présenter en une ou plusieurs étapes et doivent respecter des bonnes pratiques d’accessibilité.

## Construction

Les inputs texte sont construits selon les éléments suivants :

- L'étiquette (ou titre de l'input)
- Le helper text : l'exemple, le format ou l'aide à la saisie
- Le message d’erreur


##### L'étiquette (ou titre de l'input)

- **Formulation :** on utilise les mêmes formulations tout au long du formulaire, avec une majuscule sur le premier mot et sans signe de ponctuation (pas de :).
- **Message :** on donne explicitement l’information à saisir, de la manière la plus concise possible (ex. : Votre prénom).
- **Longueur :** dans l’idéal, on ne dépasse pas 1 ligne en version mobile.
- **Champ obligatoire :** on met un astérisque à la fin de l'étiquette si le champ est obligatoire (ex. : Votre prénom *)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/8747014c-f405-4120-80e0-82d11d057425)


##### Le helper text : l'exemple, le format ou l’aide à la saisie

- **Contexte :** lorsque le champs de saisie est contrôlé (adresse e-mail, numéros de téléphone, prise fibre...), on donne un exemple en-dessous de l'étiquette.
- **Formulation :** on mentionne le bon exemple précédé de la mention “Ex. :”, le bon format précédé de la mention “Format :” ou la bonne aide à la saisie.
- **Message :** on privilégie un exemple facile à comprendre ou une aide à la saisie claire qui permettra à l’utilisatrice ou utilisateur de retrouver facilement la bonne information.
- **Longueur :** dans l’idéal, on ne dépasse pas 1 ligne en version mobile pour l’exemple et le format, 2 lignes en version mobile pour l’aide à la saisie.

**L'exemple**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/3d7f68a5-8fee-4ed3-a970-43773c9a568d)

**Le format**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/80dafee5-ba52-4400-8b69-b140e6f81b78)

**L'aide à la saisie**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/033d7220-ec53-4f99-9b5c-0a49a085134a)


##### Le message d'erreur

- **Contexte :** un message d’erreur apparaît automatiquement lorsque l’utilisatrice ou utilisateur valide le formulaire en omettant de renseigner un input obligatoire (non complétion) ou renseigne un format incorrect (erreur de saisie).
- **Formulation :** on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final, en reprenant les termes formulés dans le titre de l’input. Ex. : Votre prénom (titre) / Merci de renseigner votre prénom (message d’erreur).
- **Longueur :** dans l’idéal, on ne dépasse pas 2 lignes en version mobile.

**La non complétion d’un input obligatoire**

- **Message :** on indique explicitement l’information qu’il faut renseigner.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/28787e11-0541-4486-8ac9-b011e7a52fdf)

**L’erreur de saisie**

- **Message :** on indique toujours au préalable la cause de l’erreur et on donne explicitement la solution pour résoudre le problème, avec un ton encourageant, sans culpabiliser l’utilisatrice ou utilisateur. Dans le cas d’une erreur sur le format, on complète le message par un exemple concret.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/196c79ab-5303-43ed-b500-3e1a9c5ac709)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2e437d33-53c1-49a2-9331-f6cae211e7f2)

## Les différents inputs

##### L'input texte

![![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0b1251b5-712d-4479-86a4-abe7ef6ad2fa)](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/a898c359-4f25-48c1-8128-3d0a6ba576d4)

##### L'input date

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/f3c72ee3-1d44-49dd-a149-ec99735848c0)

##### L'input mot de passe

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0a4f6ad4-3fb5-4ccf-b27f-24222d8d537c)

##### L'input search bar

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0e5763a0-f443-4749-a142-4d6b78f8bd7e)

Le composant Input permet de récolter des informations saisies librement par l'utilisateur.


Input

iconNameLeft

iconNameRight

Ne pas changer l’icone sur l’input search 

## Contexte

Un lien est utilisé pour naviguer d'une page à une autre page ou d’une page à un autre contenu au sein de la même page, en cliquant sur du texte souligné dans les deux cas. Il peut être en dehors du texte ou dans le texte. Un lien doit donc toujours être clair, concis et préciser le contenu à venir.

## Construction

##### Lien hors du texte (Standalone Link)

- **Formulation standard** : on privilégie les phrases verbales, à l’infinitif ou non, sous forme affirmative ou interrogative.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0e230455-4eb4-4f7b-aa45-63ee36dd1364)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/03eb1c30-3bc5-45d0-a934-853fe11add10)

- **Formulation courte** : certains liens prennent la forme d’un seul mot ou d’un seul verbe à l’infinitif, uniquement si l’action est assez courante et explicite.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c8a5f15a-8c9c-4eb3-b422-7e957f9e8bbe)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7b037150-2335-475c-a610-9dcf006966f3)

- **Majuscule, minuscule et ponctuation** : un lien hors du texte commence toujours par une lettre en majuscule, le reste est en minuscule, excepté sur les noms de produit ou de marque qui suivent les règles du propriétaire. Un lien ne prend pas de point final, (sauf ? pour les formes interrogatives).

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/b169cd9e-70a4-4aa4-a3e2-eb37037595a2)

- **Longueur** : un lien doit être le plus court possible et se limiter à une seule action. Chaque mot doit avoir un but précis, on supprime donc tous les mots inutiles. Dans l’idéal, on ne dépasse pas les 60 caractères, espaces compris.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7ceef9a7-7288-4d49-bdb8-6c7622d45a87)


##### Lien dans le texte (Inline Link)

- **Formulation** : on utilise la même forme standard et les mêmes règles de longueur que pour les liens hors du texte. Pour les lettres en majuscule, minuscule et la ponctuation, on suit le fil du texte dans lequel ce lien est intégré.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/d8b7116c-c430-46fd-a9d1-df1ca9f00a3a)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/62617413-4ef8-4309-a493-f0ee8fef0057)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ce71832d-d28c-45f2-bfe9-261f072ee5f5)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ce60969d-e804-4a0a-81f9-56e9f420ffad)


## Liens récurrents

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/648a94fd-0eeb-4727-903c-ea73bfdc1f7e)


Le lien est un composant cliquable qui permet à l’utilisateur de naviguer vers une nouvelle page ou une autre section de l'interface.

Link

Un lien navigue vers une destination, un bouton exécute une action.

Lien ou bouton 

Utiliser une icône qui a une signification directe avec le contenu du lien.

Lien avec icône

Utiliser l’icône  “tri-new-tabbed-page” lorsque le lien ouvre un autre onglet ou redirige vers un site externe.

Lien externe

## Contexte

Les listes à puces permettent d’exprimer plusieurs idées ou une idée complexe de façon claire et aérée. Ils attirent le regard et facilitent la lecture. Voilà pourquoi il faut les rédiger selon certaines règles.

## Construction

Quelque soit la liste, elle doit toujours répondre aux règles suivantes :

- On ponctue chaque point de la liste avec **une majuscule sur le premier mot et sans point final (ou !, ?, ...)**
- On peut utiliser **des points, des chiffres, des icônes, des checkboxes ou encore des radio buttons**
- On les introduit avec **un titre, une phrase ou un paragraphe**
- On utilise **les mêmes formulations** tout le long des listes à puces
- On donne **une idée par point**
- On privilégie les points avec **une seule phrase**
- On privilégie les listes à puces **à partir de 3 éléments cités** (accessibilité)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/997c245c-59f5-4256-be4c-e5502d47230d)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c9036770-9271-4192-91a1-f1aaded0a9e1)

Les listes sont des outils de mise en page, allant des listes simples aux listes de descriptions incluant des icones en entête.


List

divider

ordered

## Contexte

Une modale ajoute un niveau d’information dans un contexte précis. Les textes doivent donc être clairs et pertinents pour faciliter une compréhension et une décision rapides. Elle peut contenir un message de suggestion, d’information, d’erreur, de confirmation ou encore d’alerte.

**Titre**

- **Formulation** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...).

- **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou l’action proposée.

- **Longueur** : dans l’idéal, on ne dépasse pas 2 lignes en version mobile (48 caractères espaces compris).

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/3ccc2404-ea7f-4cdc-850e-a62239716732)

**Texte**

- **Formulation** : on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final. 

- **Message** : on précise toutes les informations à connaître pour réaliser l’action ou les actions proposées.

- **Longueur** : dans l’idéal, on ne dépasse pas 4 lignes en version mobile. Certaines modales, notamment d’information, nécessitent des contenus plus longs. Dans ce cas, on va toujours de l’essentiel vers le plus spécifique et on privilégie des listes à puces pour exprimer des idées complexes.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/30afbcf4-8089-4dbb-ad75-06ea438b58e6)


**Bouton**

- **Formulation** : on utilise la forme <Verbe à l’infinitif> + <Objet de l’action>.

- **Message** : on indique clairement l’action ou les actions possibles, tout en incitant l’utilisateur à cliquer sur l’action principale.

- **Action** : on peut intégrer une action principale (bouton primary) ou 2 actions, dont 1 principale (bouton primary) et 1 secondaire (bouton tertiary). Dans le cas d’une modale sans action à réaliser, on conserve un bouton primary avec le label “Fermer”. 

- **Longueur** : dans l’idéal, on ne dépasse pas 25 caractères, espaces compris.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/564d8328-0eff-41ce-9c3d-1f375f184201)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2cf1ae31-094b-46e9-9374-4d2ccc2baf2a)


**Autres éléments**

Si besoin, on peut intégrer des éléments comme une icône, un visuel, des boutons radio, des mentions légales... Ces éléments doivent être intégrés avec parcimonie, pour ne pas surcharger le contenu de la modale. 

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/d15442fa-badb-4b4f-92a4-fcf515104bf3)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2366185f-8f49-4a05-8d1c-f0049633157a)


## Ton de voix

**Les différents types de modale**

L’état émotionnel de l’utilisateur varie selon le type de modale. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ccf53230-d300-46ba-ad0a-16fd7fce9181)


## Variables de microcopie

**Formulation standard**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c166583e-932d-4587-9444-6379697be907)

Une modale met en avant un contenu nécessitant une interaction de l'utilisateur avant qu'il ne puisse continuer son parcours. Elle apparait au clic sur un élément déclencheur (généralement un lien ou un bouton)


Modal

* - -------------------------- WEB PROPERTIES -------------------------------

Timepicker

# Usage

Quand l’utiliser

Quand ne pas utiliser

Les différents types de TimePicker