Bac à sable

1 Dans le bloc <style>, en bas du fichierCopier

.mon-style {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-lg);
  line-height: var(--font-line-height-body);
  letter-spacing: var(--font-letter-spacing-normal);
  color: var(--color-text-default);
}

Les six lignes sont écrites en entier, même celles qui ressemblent au réglage par défaut : posée sur un titre plutôt que sur un paragraphe, ta classe n'hériterait pas des mêmes valeurs.

2 Là où tu veux ce texteCopier

<p class="mon-style">Concevoir, c’est rendre évident ce qui ne l’était pas.</p>

1 Tout en haut du fichierCopier

---
import Button from 'ux-design-system/components/Button.astro';
---

Si ton fichier a déjà un bloc ---, n'y ajoute que la ligne d'import.

2 Là où tu veux le boutonCopier

<Button icon="mail-edit">Voir le projet</Button>

1 Tout en haut du fichierCopier

---
import Tag from 'ux-design-system/components/Tag.astro';
---

Si ton fichier a déjà un bloc ---, n'y ajoute que la ligne d'import.

2 Là où tu veux l'étiquetteCopier

<Tag>Recherche utilisateur</Tag>

1 Tout en haut du fichierCopier

---
import Icon from 'ux-design-system/components/Icon.astro';
---

Si ton fichier a déjà un bloc ---, n'y ajoute que la ligne d'import.

2 Là où tu veux l'icôneCopier

<Icon name="mail-edit" size="md" />

1 Tout en haut du fichierCopier

---
import Card from 'ux-design-system/components/Card.astro';
import Tag from 'ux-design-system/components/Tag.astro';
import Button from 'ux-design-system/components/Button.astro';
import { withBase } from 'ux-design-system/lib/url';
---

Il y a plusieurs lignes parce qu'il y a plusieurs composants : la carte, et ce que tu as mis dedans. Elles disparaissent d'elles-mêmes quand un emplacement se vide.

2 Là où tu veux la carteCopier

<Card
  title="Quatre guides pour concevoir accessible"
  subtitle="Déploiements plus rapides, langage UX partagé"
  meta="2025 — atelier de six semaines"
  image={{ src: withBase('/images/projet.jpg'), alt: 'Décris ce qu’on voit', width: 822, height: 382 }}
>
  <Fragment slot="tags-top">
    <Tag>Étude de cas</Tag>
  </Fragment>

  <Fragment slot="tags">
    <Tag>Recherche utilisateur</Tag>
  </Fragment>

  <Fragment slot="actions">
    <Button variant="secondary" size="sm" iconEnd="arrow-narrow-right">Lire l’étude</Button>
  </Fragment>
</Card>

1 Tout en haut du fichierCopier

---
import Modal from 'ux-design-system/components/Modal.astro';
---

Si ton fichier a déjà un bloc ---, n'y ajoute que la ligne d'import.

2 Là où tu veux la modaleCopier

<Modal
  id="ma-modale"
  icon="mail-edit"
  heading="Envoyer le message ?"
  body="Ta réponse partira à l’adresse du formulaire."
  primary={{ label: "Envoyer" }}
  secondary={{ label: "Annuler" }}
/>

1 Tout en haut du fichierCopier

---
import TextField from 'ux-design-system/components/TextField.astro';
import Select from 'ux-design-system/components/Select.astro';
---

Une ligne par type de champ posé. Elle s'en va d'elle-même quand le dernier champ de ce type quitte la liste.

2 Là où tu veux les champsCopier

<TextField id="ton-nom" label="Ton nom" required />

<Select
  id="sujet"
  label="Sujet"
  options={['Devis', 'Question', 'Autre']}
/>

Les champs, et rien autour : à toi d'écrire le <form>, son bouton d'envoi et la phrase « Les champs marqués * sont obligatoires » que l'astérisque oblige. Un groupe de radios ou de chips, lui, garde son <fieldset> : c'est ce qui porte le nom du groupe, et aucune prop ne le remplace.

3 Dans le style de la pageCopier

/* À poser sur ce qui entoure les champs — ton <form>, ou le <div>
   qui les groupe. */
.mes-champs {
  display: grid;
  gap: var(--space-lg);
}

/* Un groupe de radios ou de chips. Le fieldset ne sert qu'à porter le
   nom du groupe : son cadre natif s'efface, le système n'en dessine
   aucun. */
.mes-champs fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.mes-champs legend {
  margin-bottom: var(--control-field-gap);
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-tight);
  color: var(--color-text-default);
}

.mes-choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

Le système n'a pas de composant « formulaire » : la mise en page revient à l'appelant, et c'est voulu — un token partage une valeur, il ne partage pas une structure. Sans cette règle, les champs se touchent.

Les cinq lignes de la legend sont d'un autre ordre : elles redessinent à la main la typographie de FieldLabel, parce qu'aucun composant ne dessine le nom d'un groupe. Une legend n'a pas de for — ce n'est pas un libellé de champ, et FieldLabel ne peut pas la rendre. C'est un manque du système, pas un choix.