Client
You're staffing a project
Post your project
Scope, budget, timeline and the profile you're looking for.
Select your freelancer
Choose your expert among the profiles that applied.
Receive the deliverable
Get the project report and sign off on the work.
Independent freelancer
You work as a freelancer
Stay in the loop
Get a targeted alert and apply if the project appeals to you.
Deliver the work
Join the adventure and do what you do best.
Track your engagements
Invoicing and analytics: the admin work is simplified.
<StepTracks.Root>
<StepTracks.Track tone="highlight">
<StepTracks.Header>
<StepTracks.HeaderIcon><BuildingsIcon /></StepTracks.HeaderIcon>
<StepTracks.HeaderText>
<StepTracks.HeaderTitle>Client</StepTracks.HeaderTitle>
<StepTracks.HeaderSubtitle>You're hiring…</StepTracks.HeaderSubtitle>
</StepTracks.HeaderText>
</StepTracks.Header>
<StepTracks.Steps>
<StepTracks.Step>
<StepTracks.StepIcon number={1}><FileTextIcon /></StepTracks.StepIcon>
<StepTracks.Body>
<StepTracks.BodyTitle>Post your project</StepTracks.BodyTitle>
<StepTracks.BodyDescription>Scope, budget…</StepTracks.BodyDescription>
</StepTracks.Body>
</StepTracks.Step>
</StepTracks.Steps>
</StepTracks.Track>
<StepTracks.Track tone="brand">…</StepTracks.Track>
</StepTracks.Root>number on the step icon is explicit rather than derived, so a track can start
at something other than one.
API
StepTracks.Root
Plus every <div> prop. Source: landing/components/step-tracks/root.tsx.
StepTracks.Body
Plus every <div> prop. Source: landing/components/step-tracks/body.tsx.
StepTracks.BodyDescription
Plus every <p> prop. Source: landing/components/step-tracks/body-description.tsx.
StepTracks.BodyTitle
| Prop | Type | Default | |
|---|---|---|---|
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 every <h4> prop. Source: landing/components/step-tracks/body-title.tsx.
StepTracks.Header
Plus every <div> prop. Source: landing/components/step-tracks/header.tsx.
StepTracks.HeaderIcon
Plus every <div> prop. Source: landing/components/step-tracks/header-icon.tsx.
StepTracks.HeaderSubtitle
Plus every <p> prop. Source: landing/components/step-tracks/header-subtitle.tsx.
StepTracks.HeaderText
Plus every <div> prop. Source: landing/components/step-tracks/header-text.tsx.
StepTracks.HeaderTitle
| Prop | Type | Default | |
|---|---|---|---|
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 every <h3> prop. Source: landing/components/step-tracks/header-title.tsx.
StepTracks.Step
Plus every <div> prop. Source: landing/components/step-tracks/step.tsx.
StepTracks.StepIcon
| Prop | Type | Default | |
|---|---|---|---|
number | number | required | The step's position, shown inside the marker. You number the steps, not the track. |
Plus every <div> prop. Source: landing/components/step-tracks/step-icon.tsx.
StepTracks.Steps
Plus every <div> prop. Source: landing/components/step-tracks/steps.tsx.
StepTracks.Track
| Prop | Type | Default | |
|---|---|---|---|
tone | "brand" | "destructive" | "highlight" | "muted" | "primary" | "primary" | Which brand role colours this section: the tint, the solid fill and any connector line move together. Tokens, so a rebrand reaches them. |
Plus every <div> prop. Source: landing/components/step-tracks/track.tsx.