How it works
Two journeys, one match
Staff your project as a client, find your next engagement as a freelancer: three steps are enough.
<SectionIntro.Root>
<Eyebrow.Root tone="primary" className="mb-4">
<Eyebrow.Label>How it works</Eyebrow.Label>
</Eyebrow.Root>
<SectionIntro.Title>Deux parcours, une rencontre</SectionIntro.Title>
<SectionIntro.Description>Three steps are enough.</SectionIntro.Description>
</SectionIntro.Root>API
SectionIntro.Root
| Prop | Type | Default | |
|---|---|---|---|
spacing | "lg" | "md" | — | Gap between the intro and the section body beneath it. |
width | "lg" | "md" | — | Measure of the intro copy. md holds a comfortable line length; lg
for a longer standfirst. |
Plus every <div> prop. Source: landing/components/section-intro/root.tsx.
SectionIntro.Description
| Prop | Type | Default | |
|---|---|---|---|
align | "center" | "left" | "right" | — | Text alignment. |
size | "base" | "lg" | "sm" | "xl" | "xs" | — | Type scale, independent of variant so a muted note can still be
large. |
variant | "body" | "lead" | "muted" | — | Role of the copy. lead is a standfirst under a heading, muted is
secondary detail, body is everything else. |
weight | "bold" | "medium" | "normal" | "semibold" | — | Font weight. Prefer a heading over bold body copy when the text is actually a heading. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus the DOM props of the element it renders. Source: landing/components/section-intro/description.tsx.
SectionIntro.Title
| Prop | Type | Default | |
|---|---|---|---|
align | "center" | "left" | "right" | — | Text alignment. center suits a section intro; anything longer than a
line or two reads better left-aligned. |
level | HeadingLevel | — | Sets both the rendered tag and the size scale (override the tag with render). |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus the DOM props of the element it renders. Source: landing/components/section-intro/title.tsx.