Étiquettes et annotations.

01

L’étiquette de section.

Elle nomme la section, au-dessus du titre : Inter en capitales espacées, sur un fond pâle bordé de vert. C’est la pastille qui dit qu’une section commence. Quand elle tient lieu de titre, comme pour les logos, elle peut être un h2 et garde sa taille.

Emploi

Nommer une section au-dessus de son titre : Nos offres, L’équipe, Le suivi, Contact.

Moment

Dans chaque Tête de section ; seule, en h2, quand la section n’a pas de titre (les logos).

Jamais

Comme bouton ou comme lien. Avec une phrase : elle ne passe à la ligne que sous 480 px. Dans une carte avec son bord et son fond : voir la rubrique suivante.

<Etiquette>Nos offres</Etiquette>
<Etiquette element="h2" id="tr-logos">Ils nous ont confié leur projet</Etiquette>

02

L’étiquette de carte.

Dans une carte d’offre ou de réalisation, l’étiquette nomme l’offre. Elle perd son bord et son fond et passe en gris : la pastille signale une section, pas une carte.

<Cellule element="div" classe="tr-cas__it">
  <Etiquette element="span">Boutique en ligne</Etiquette>
  <h3>Clotilde Davenne</h3>
  <p class="small">La boutique Shopify d’un domaine viticole bourguignon.</p>
</Cellule>

03

L’annotation.

Un mot en capitales dans un petit cadre, relié par un trait d’attache à ce qu’il nomme sur la scène. Sur une illustration v2, elle est ancrée : le bout de son trait est posé sur l’objet ; ailleurs, en pourcentage de la scène. Elle flotte lentement, et disparaît sous 700 px : le texte suffit. Elle est décorative, elle redit ce que le texte dit.

AstroWordPressStoryblok

<div class="tr-carte__scene" data-stagger="150">
  <Scene nom="site-internet" />
  {technos.map((t, k) => <Puce {...ancree(id, ANCRES_OFFRES[id][k], 'contenu')} vert={k === 1} n={k}>{t}</Puce>)}
</div>

04

Le nom d’une offre, autour de la scène.

Sur le premier écran de l’accueil, depuis le 12 octobre, le nom d’une offre n’est plus une annotation posée sur la scène. Il est dans sa case, autour de la scène, dessiné comme une annotation, et un trait d’attache le relie à l’objet qu’il nomme. La case est un lien vers la page de l’offre. Le spécimen est dans L’accueil, rubrique 02.

05

Le fil d’Ariane.

Dans la voix technique : Accueil › Offres › Site internet. Le composant ajoute l’accueil devant ; le dernier maillon est la page, sans lien, en vert profond. Il remplace l’étiquette en tête d’une page intérieure.

<FilAriane chemin={[
  { href: '/offres/', libelle: 'Offres' },
  { href: '/offres/site-internet/', libelle: 'Site internet' },
]} />

06

La pastille d’attente.

Rien ne s’invente. Quand une donnée manque, EnAttente la marque en clair, à côté de l’endroit où elle manque, jusqu’à ce qu’elle soit fournie. Elle dit ce qui manque, et ce qu’il reste à faire.

Emploi

Dire qu’une donnée manque : une citation, une durée, un second exemple, un accord client.

Moment

Dans les paires clé et valeur (Cles), le mur de citations (Mur), à côté des boutons de la cellule IA tant qu’un second cas manque.

Jamais

À la place d’un texte qu’on pourrait écrire. Pour masquer un manque : elle est faite pour le montrer.

<EnAttente />
<EnAttente libelle="verbatim réel à récupérer" />
<EnAttente libelle="un second exemple à fournir" />

RègleL’étiquette nomme, l’annotation touche, la pastille avoue : aucune des trois n’est un bouton.