L'ensemble des composants MDX pour les contenus longs de Halentra. Copiez un bloc, remplissez le contenu, gardez le rythme.
Style par défaut du paragraphe, du gras et des liens, appliqué automatiquement à chaque document MDX via le composant Prose partagé.
Le corps de texte utilise une interligne confortable pour que les explications longues restent faciles à suivre. L'emphase reste sémantique et discrète, et un lien ressemble à celui-ci, avec le style du composant de lien partagé plutôt qu'un style ponctuel.
Body copy runs as plain Markdown. Use **bold** for
semantic emphasis and [a link](/demo) for anything clickable.Deux tons sont câblés aujourd'hui : une boîte menthe douce pour les remarques générales, et un panneau sombre pour ce que le lecteur ne doit pas survoler.
Les tarifs sont fixés par utilisateur, par mois. Les postes suivent leur propre ligne pour que la croissance reste visible.
N'écrivez jamais « illimité » dans un contrat. Ce n'est pas une condition commerciale, c'est un pari que vous perdrez la pire semaine venue.
<Callout label="Note" tone="info">
Rates are set per user, per month.
</Callout>
<Callout label="Heads up" tone="danger">
Never write "unlimited" into a contract.
</Callout>labelstringtone"info" | "danger" | "question"default "info"childrenReactNode<Cta
title="Ready to see it on your own data?"
subtitle="30 minutes, no slides."
primaryLabel="Book a demo"
primaryHref="/demo"
secondaryLabel="See pricing"
secondaryHref="/solutions"
/>titlestringsubtitlestringprimaryLabelstringprimaryHrefstringsecondaryLabelstringsecondaryHrefstringThe secondary button only renders when both secondaryLabel and secondaryHref are set.
S'affiche en pleine largeur par défaut, ouvre une visionneuse plein écran au clic, et précharge au survol pour une transition instantanée.
<MediaImage
src="/assets/hudu/hero.webp"
alt="Example product screenshot"
maxWidth={360}
/>srcstringaltstringmaxWidthnumberCaps the rendered width in px. Full width when unset.
Une remise est un changement de prix. Une exception est un changement de périmètre. Confondre les deux, c'est voir sa marge disparaître en silence.
<PullQuote
text="A discount is a price change."
name="Marc Aubert"
role="Halentra"
/>textstringnamestringrolestringNous avons arrêté de refaire les devis dans un tableur. Trois formules sont entrées dans le PSA et les renouvellements prennent deux fois moins de temps qu'avant.
<Quote
text="We stopped rebuilding quotes in a spreadsheet."
name="Sarah Lindqvist"
role="Operations lead, Northbound IT"
/>textstringnamestringrolestring<DataTable
columns={["Tier", "Coverage", "What it includes"]}
rows={[
["Essential", "Business hours", "Patching, monitoring, service desk."],
]}
/>columnsstring[]widthsstring[]CSS grid track sizes, one per column. Defaults to an equal 1fr per column.
rowsReactNode[][]Oui. Chaque bloc ci-dessous est un composant MDX autonome, un article peut donc passer d'un texte à un encadré puis à un tableau sans câblage particulier.
Utilisez le bloc disponible le plus proche, ou demandez à l'équipe technique de l'ajouter. La section « à construire » ci-dessous suit ce que le design prévoit mais que le site n'affiche pas encore.
<Faq
items={[
{ q: "Can I mix components?", a: "Yes, freely." },
]}
/>items{ q: string; a: string }[]<KeyNumbers
items={[
{ value: "12", label: "components live today" },
]}
/>items{ value: string; unit?: string; label: string }[]Du texte simple d'abord, des blocs ajoutés seulement quand ils apportent quelque chose.
Un encadré pour une remarque, un tableau pour des données, une citation quand elle le mérite.
Le composant Prose garde une typographie cohérente d'une collection à l'autre.
<Timeline
steps={[
{ period: "Step 1", title: "Write the draft", desc: "Plain prose first." },
]}
/>steps{ period: string; title: string; desc: string }[]Les clients pardonnent les hausses. Ils ne pardonnent pas les surprises.
<StatementBanner
text="Clients forgive increases. They do not forgive surprises."
accent="surprises"
/>textstringaccentstringMust be an exact substring of text. That substring is what gets the accent colour.
Une grille responsive de vignettes qui ouvre une visionneuse plein écran avec un panneau de vignettes redimensionnable, une navigation au glisser/balayer et la navigation au clavier.
<Gallery
images={[
{ src: "/assets/hudu/work-api.webp", alt: "API screenshot" },
{ src: "/assets/hudu/work-assist.webp", alt: "Assist screenshot" },
{ src: "/assets/hudu/work-screen-capture.webp", alt: "Screen capture" },
]}
caption="Three shots side by side, one caption for the set."
/>images{ src: string; alt?: string }[]captionstringUne carte à deux colonnes : une liste à coches verte des points forts, à côté d'une liste sobre des points de vigilance.
<ProsCons
works={{
label: "Works well",
items: ["Quotes leave the office in minutes."],
}}
watch={{
label: "Watch out",
items: ["Legacy contracts need a migration window."],
}}
/>works{ label: string; items: string[] }watch{ label: string; items: string[] }Une carte de fichier avec une icône, un titre et un sous-titre format/taille, à côté d'un bouton en forme de pilule qui télécharge le document joint.
<Download
label="Pricing model template"
url="/api/media/files/cms-body/pricing-model-template.xlsx"
fileName="pricing-model-template.xlsx"
size="83968"
/>labelstringurlstringfileNamestringsizestringStringified byte count - the subtitle formats it into a human-readable size.
Une rangée d'onglets ; cliquer sur un intitulé remplace le paragraphe unique affiché en dessous.
Un court résumé de ce que couvre cette formule, en un paragraphe.
<Tabs
tabs={[
{ label: "Overview", body: "A short summary tab body goes here." },
{ label: "Pricing", body: "A second tab, swapped in on click." },
{ label: "Support", body: "A third tab, same paragraph treatment." },
]}
/>tabs{ label: string; body: string }[]Un curseur de comparaison d'images glissable - faites glisser la poignée, ou donnez-lui le focus et utilisez les flèches, pour révéler davantage de l'image « après ».
<BeforeAfter
before="/assets/hudu/work-screen-capture.webp"
after="/assets/hudu/work-hudini-ai.webp"
beforeLabel="BEFORE"
afterLabel="AFTER"
/>beforestringImage URL shown at split 0.
afterstringImage URL revealed as the split grows.
beforeLabelstringdefault "BEFORE"afterLabelstringdefault "AFTER"Un bandeau sombre et compact associant une photo circulaire à un titre, un sous-titre et un bouton CTA vif - à placer après une section tarifs ou comparatif pour orienter le lecteur vers un contact nommé.
<AskExpert
photo="/assets/testimonials/amerix-livio.png"
title="Not sure where your contracts stand?"
body="Send us your current price list. We will tell you what to keep."
ctaLabel="Talk to us"
ctaUrl="/contact"
/>photostringCircular avatar photo URL. Renders a bare placeholder circle when unset.
titlestringbodystringctaLabelstringctaUrlstringUn tableau à deux concurrents avec des en-têtes de catégorie, cinq types de contenu de cellule (coches, une pastille « Avantage », des croix, du texte simple et un prix en lien), des info-bulles facultatives par ligne, et une barre de pied de page avec un bouton d'action.
<FeatureComparison
columns={[
{ name: "Hudu", subtitle: "Distributed by Halentra" },
{ name: "IT Glue", subtitle: "Alternative" },
]}
groups={[
{
label: "Documentation",
rows: [
{
feature: "IPAM",
tooltip: "IP address management, built in.",
cells: [{ kind: "check" }, { kind: "cross" }],
},
],
},
]}
footerNote="Based on public pricing pages, checked June 2026."
footerLinkLabel="Spotted something out of date?"
footerLinkUrl="/contact"
ctaLabel="Plan a migration"
ctaUrl="/contact"
/>columns[{ name: string; subtitle: string; logo?: string }, { name: string; subtitle: string; logo?: string }]Exactly two entries. The first is the highlighted column - Halentra's own pick.
groups{ label: string; rows: { feature: string; tooltip?: string; cells: [Cell, Cell] }[] }[]Cell is one of { kind: "check" }, { kind: "check-advantage" }, { kind: "cross" }, { kind: "text"; text }, or { kind: "link"; text; href }.
footerNotestringfooterLinkLabelstringfooterLinkUrlstringThe inline footer link only renders when both footerLinkLabel and footerLinkUrl are set.
ctaLabelstringctaUrlstringLe design prévoit aussi ces blocs, mais rien ne les affiche encore ici. Ils sont listés pour que le manque reste visible plutôt que silencieux.