Cheat sheet: Components and states

The 60 terms of this lesson, part by part, with the French word a team in France would use.

1. The parts of a page

Page headeren-tête: the band at the top of every page, with the logo, the navigation and sometimes a search bar.
Logologo: the symbol or the name of the organisation, usually in the header, which links to the home page.
Navigation bar or navbarbarre de navigation: the row of links to the main sections of a site, usually in the header.
Menumenu: a list of links or actions that you choose from, such as the main sections of a site.
Hamburger menumenu burger: a button with three lines that opens the menu, used on small screens.
Linklien: an element that goes somewhere, to another page or another place on the same page, with an address you can share.
Herobannière principale, section héro: the large first section of a page, with the main title, a short text and the main button.
Breadcrumbsfil d'Ariane: a line of links that shows where a page sits in the site, such as "Home › Exhibitions › Monet".
Sidebarbarre latérale: a column beside the main content, with filters, a table of contents or related links.
Footerpied de page: the band at the bottom of every page, with contacts, social links and the legal notice.

Componentcomposant: a reusable piece of a page, such as a button or a card, designed once and used everywhere.
Variantvariante: a version of a component for another use, such as a small button or a card without a photo.
Call to action or CTAappel à l'action: an element that asks visitors to act, such as "Book a ticket" or "Contact me".
Primary buttonbouton principal: the button for the main action of a screen, with the strongest look.
Secondary buttonbouton secondaire: a more discreet button for the other actions of a screen, often with an outline.
Iconicône: a small picture that stands for an action or an idea, such as a heart or a magnifying glass.
Icon buttonbouton icône: a button that shows only an icon, with a hidden text label for screen readers.
Affordanceaffordance: what an element suggests you can do with it, such as a filled button that looks pressable.
Illustrationillustration: a drawing used to explain or decorate a page, as opposed to a photo.
Avataravatar: a small picture that stands for a person, often a round photo or their initials.

Formformulaire: a group of fields that visitors complete and send, such as a contact form.
Text field or inputchamp de saisie: a box where a visitor types one line, such as a name or an email.
Labellibellé: the text that says what a field is for, such as "Email", which stays visible next to the field.
Placeholdertexte indicatif: a grey hint inside an empty field, which disappears as soon as the visitor types.
Checkboxcase à cocher: a small square that a visitor ticks, for a yes or no question or for several choices.
Radio buttonbouton radio: a small circle for one choice among a few, where choosing one clears the others.
Toggle or switchinterrupteur: a control that turns a setting on or off at once, such as dark mode.
Dropdown or selectliste déroulante: a field that opens a list of choices when you click it.
Search barbarre de recherche: a text field for searching a site, usually with a magnifying glass icon.
Stepperindicateur d'étapes: a line that shows the steps of a long form and where the visitor is.

Modal or dialogfenêtre modale, boîte de dialogue: a box that opens over the page and blocks it until the visitor answers or closes it.
Toast or snackbarnotification éphémère, toast: a short message that appears at the edge of the screen and disappears after a few seconds.
Tooltipinfobulle: a small label that appears when you point at an element or reach it with the keyboard.
Bannerbandeau: a wide strip across a page or a section, with a message for every visitor.
Badgepastille, badge: a small coloured label or number on another element, such as "New" or a count of messages.
Tabsonglets: a row of labels, each one showing a different panel in the same place.
Accordionaccordéon: a list of titles that open and close to show their content, as in a list of questions.
Carouselcarrousel: a component that shows one slide at a time, with arrows to see the next one.
Transitiontransition: the short, smooth change from one state to another, such as a box that fades in.
Animationanimation: any movement on a page, such as a slide that moves or an icon that turns.

Component stateétat: one of the ways a component looks, depending on what's happening, such as hover or disabled.
Default stateétat par défaut: how a component looks when nobody is using it.
Hoversurvol: the state of an element while the mouse pointer is over it, which phones don't have.
Focusfocus: the state of the element that the keyboard has reached, shown by a visible outline.
Active or pressedactif, enfoncé: the state of a button at the moment it's clicked or tapped.
Selectedsélectionné: the state of a choice that is currently on, such as the tab or the menu link of the page you're on.
Disableddésactivé: the state of an element that can't be used for now, usually shown faded.
Visual feedbackretour visuel: a visible change that answers a visitor's action, so they know that it worked.
Micro-interactionmicro-interaction: a small designed moment around one action, such as a heart that fills when you like a song.
Inline errorerreur en ligne: an error message shown right next to its field, saying what's wrong and how to fix it.

Loading stateétat de chargement: what a screen or a list shows while its content arrives.
Spinnerindicateur de chargement, spinner: a small turning circle that tells visitors to wait.
Skeleton screenécran squelette: grey shapes shown where text and pictures will appear, while they load.
Empty stateétat vide: what a list or a page shows when there is nothing in it yet, with what to do next.
Error stateétat d'erreur: what a field, a list or a page shows when something has failed, with how to fix it.
Confirmationconfirmation: the message that tells visitors an action worked, such as "Your appointment is booked".
Component librarybibliothèque de composants: the set of all the components of a site, each with its variants and states.
Design systemdesign system: the shared tokens and reusable blocks, such as buttons and cards, that a site's designers and developers both use.
FigmaFigma: the online design tool that most designers use to draw mockups and components.
Handoffpassation: the moment the designs go to the developers or a coding agent, with everything they need to build.

Web Technologies · Talking shop · wt.thomasjuldo.com/course/talking-shop/components-and-states