[SLASH] [UX] Title

[Murphy-UX]

Nom : Title

Type : Molecule

---

Objectif :

Modification css du composant [Title] : https://axafrance.github.io/design-system/slash/react/latest/?path=/story/components-title--template

Ajout du variant "with buttons"

---

Version actuelle :

https://axafrance.github.io/design-system/slash/react/latest/?path=/story/components-title--template

---

H2

https://6ssje8.axshare.com/?code=6172ed7cc6f5e951da863b1b2d54378c&id=7w20tx&p=titre___h2&g=15

Font-size : 24px (1.5REM)
Font-family : Source sans pro
Font-weight : Bold
Line-height : Auto
Color : #333333 (--text-primary)
padding-right : 24px;

Ligne :
width : auto;
color : #CCCCCC ( --border-divider)

---

H3

https://6ssje8.axshare.com/?code=6172ed7cc6f5e951da863b1b2d54378c&id=6cdthf&p=titre___h3&g=15

Font-size : 20px (1.25REM);
Font-family : Source sans pro
Font-weight : Bold
Line-height : Auto
Color : #333333 (--text-primary)
padding-right : 24px;

Ligne :
width : auto;
color : #CCCCCC ( --border-divider)
align : middle;

---

H4

https://6ssje8.axshare.com/?code=6172ed7cc6f5e951da863b1b2d54378c&id=23pin6&p=titre___h4&g=15

Font-size : 18px; (1.125REM)
Font-family : Source sans pro
Font-weight : Bold
Line-height : Auto
Color : #333333 (--text-primary)
padding-right : 24px;

Ligne :
width : auto;
color : #CCCCCC ( --border-divider)
align : middle;

---

Variants :

Version actuelle : https://axafrance.github.io/design-system/slash/react/latest/?path=/story/components-title--content-title-with-link

1 bouton :

Le bouton d'action lié au titre peut être positionné à gauche après le titre ou à droite en bout de ligne.

Button on left-side :
Padding-right : 16px;

Button on right-side :
Padding-left : 16px;

Actions multiples :

Button-tertiary on right-side :
Padding-left : 16px;
margin between buttons : 8px;