Têtes de section
À gauche, centrée, sur une ligne, ou dans sa cellule pâle.
Quatre dispositions
La tête d’une section : l’étiquette, le titre, le chapô, et parfois un corps. À gauche par défaut, centrée, sur une ligne avec une action à droite, ou dans sa cellule pâle quadrillée. Les quatre viennent de l’accueil.
- Emploi
- Ouvrir chaque section : la nommer, la titrer, dire en une phrase ce qu’elle contient.
- Moment
- À gauche pour une section courante ; centrée au-dessus d’une grille symétrique ou du dôme ; sur une ligne quand un bouton accompagne le titre ; en cellule pour la première section après l’ouverture.
- Jamais
- Deux têtes dans une section. Une tête sans titre. Un corps dans la variante ligne : elle ne l’affiche pas.
Le suivi
On reste après la mise en ligne.
Un mois offert après la mise en ligne, puis vous choisissez la suite. Le marketing digital se prend à part, si vous le voulez.
L’équipe
Les grinners, sous le même toit.
Chef de projet, designers, stratèges et développeurs travaillent ensemble, à Nantes et à Paris. Vous parlez à une seule personne.
Réalisations
Ce qu’on a construit, et pour qui.
Nos offres
Pour lancer, puis pour grandir.
Chaque offre se prend seule ou avec une autre. Une seule équipe, un seul interlocuteur.
<Tete etiquette={ V3.suivi.surtitre } titre={ V3.suivi.titre } sousTitre={ V3.suivi.sousTitre } id="tr-suivi" />
<Tete variante="centre" etiquette={ V3.equipe.surtitre } titre={ V3.equipe.titre } sousTitre={ V3.equipe.sousTitre } id="tr-equipe" />
<Tete variante="ligne" etiquette={ V3.realisations.surtitre } titre={ V3.realisations.titre } id="tr-realisations">
<Bouton href="/realisations/" variante="trait">{ V3.realisations.bouton }</Bouton>
</Tete>
<Tete variante="cellule" etiquette={ V3.offres.surtitre } titre={ V3.offres.titre } sousTitre={ V3.offres.sousTitre } id="tr-offres" />| Classe | Zone | Valeur |
|---|---|---|
| .tr-tete | la tête | padding-inline clamp(20px, 3vw, 48px) : le texte seul garde sa marge ; margin-bottom clamp(24px, 3vw, 40px) |
| .tr-tete--centre | centrée | flex en colonne, centrée, texte centré ; chapô et corps centrés par margin-inline auto |
| .tr-tete--ligne | sur une ligne | flex, calée en bas, espacée ; gap 20/32 px ; le slot à droite ; passe à la ligne quand la place manque |
| .tr-tete--cel | dans sa cellule | centrée ; margin-bottom 0 ; padding clamp(40px, 5vw, 72px) clamp(20px, 3vw, 48px) ; fond var(--pale) |
| .tr-tete--cel::before | le quadrillage | grille de 48 px à 50 % de var(--line), masquée au centre : visible de 0 à 32 % et de 68 % à 100 % de la largeur |
| variante | la prop | gauche (par défaut), centre, ligne, cellule |
Le surlignage
Un passage du titre est surligné en vert ; le surlignage s’étend de gauche à droite une fois le titre apparu. Le fond couvre le passage seul, ni l’espace avant ni l’espace après, et suit le titre quand il passe à la ligne. Au plus un passage par titre, et jamais sur le h1 d’une page intérieure sans raison.
Nos offres
Pour lancer, puis pour grandir.
<Tete variante="cellule" etiquette={ V3.offres.surtitre } titre={ V3.offres.titre } surligne={ V3.offres.surligne } sousTitre={ V3.offres.sousTitre } id="tr-offres" />| Classe | Zone | Valeur |
|---|---|---|
| .tr-surligne | le passage | en ligne (inline) ; fond var(--grinn) ; padding .02em 0 ; margin 0 : le fond s’arrête aux lettres, sans l’espace avant ni après (JB, 12 octobre) ; box-decoration-break: clone : s’il passe à la ligne, chaque morceau garde son fond |
| .tr :is(h1, h2) .tr-surligne | sous la ligne du dessus | position relative, z-index -1, dans un titre isolé (isolation: isolate) : le fond passe sous les lettres de la ligne du dessus et ne mord plus les jambages (« grinners ») ; Tete ne pose que des h1 et des h2, qui le sont |
| transition | l’extension | background-size de 0 % à 100 % de la largeur, 760 ms var(--ease), après 320 ms, une fois le titre apparu (.is-in) ; sur deux lignes, chaque morceau en même temps |
| mouvement réduit | sans animation | le passage est surligné d’emblée ; sans script aussi |
| surligne | la prop | le passage, tel qu’il figure dans le titre, sans espace au bord : Tete coupe le titre autour de lui, et les espaces restent dehors ; s’il n’y est pas, rien n’est surligné |
| sur l’accueil | les passages | « grandir » (offres), « sous le même toit » (équipe), « compter » (engagements), « dès la première ligne » (IA), « mise en ligne » (suivi) |
Nos offres
Pour lancer, puis pour grandir.
Nos offres
Pour lancer, puis pour grandir.
Les tailles
Les titres de section sont en Outfit, serrés, sur une largeur courte. Le chapô et le corps sont en Inter, chacun sur sa largeur de lecture. Un titre de section va de 32 à 62 px selon la fenêtre.
| Classe | Zone | Valeur |
|---|---|---|
| .tr h2 | le titre de section | Outfit, clamp(32px, 4.4vw, 62px), interligne 1.02, -.035em ; max-width 17ch ; margin-top 18 px |
| .tr-tete--centre h2 | centré | max-width 20ch, text-wrap balance |
| .tr-tete--ligne h2 | sur une ligne | max-width 14ch |
| .tr-ia__texte h2, .tr-dire--tete h2 | dans une cellule | max-width 12ch |
| .tr .lead | le chapô | Inter var(--t-lead), clamp(20px, 1.62vw, 25px), var(--ink-2) ; margin-top 20 px ; max-width 46ch ; interligne 1.5 |
| .tr-corps | le corps | margin-top 18 px ; max-width 58ch ; var(--ink-2) ; interligne 1.6 |
| .tr-corps--centre | le corps centré sous une grille | max-width 52ch ; margin-top clamp(28px, 3vw, 40px) ; padding-inline clamp(20px, 3vw, 48px) ; défini, inemployé depuis le 12 octobre : la phrase sous l’équipe a quitté l’accueil |
| .tr h3 | un sous-titre | Outfit, clamp(20px, 1.7vw, 24px), interligne 1.18, -.025em |
Le niveau
La tête rend un h2 par défaut. Avec niveau à 1, elle rend un h1 : il n’y en a qu’un par page, et c’est l’en-tête de page qui le pose (EnTetePage, ou le Hero sur l’accueil). L’id du titre nomme la section : la Section le reprend en aria-labelledby.
<Section id="suivi" titreId="tr-suivi">
<Tete variante="centre" etiquette={ V3.suivi.surtitre } titre={ V3.suivi.titre } surligne="mise en ligne" sousTitre={ V3.suivi.sousTitre } id="tr-suivi" />
</Section>| Classe | Zone | Valeur |
|---|---|---|
| niveau | 1 ou 2 | h1 ou h2 ; 2 par défaut |
| id | le titre | repris par Section en titreId, pour aria-labelledby ; unique dans la page |
| h1 | un seul par page | celui de EnTetePage : .tr-page h1 clamp(36px, 4.6vw, 66px), interligne .98, -.03em, max-width 16ch, balance |
| .tr-affiche__titre | l’ouverture de l’accueil | depuis le 12 octobre, le grand titre centré : clamp(44px, 6.9vw, 100px), 700, interligne .94, -.035em, centré ; deux lignes qui montent l’une après l’autre. Il agrandit .tr h1 (clamp(44px, 5.8vw, 84px), interligne .92, -.025em) |
| h2 | les sections | chaque Tête de section ; dans ce design system, chaque rubrique |
| h3 | le reste | les cartes, les rôles, les colonnes, les questions |
RègleUne tête par section, un passage surligné au plus, et un seul h1 par page.