Join the Acme adventure
Client or freelancer: let's build better projects, together.
<CtaBanner.Root>
<CtaBanner.Title>Join the Acme adventure</CtaBanner.Title>
<CtaBanner.Description>Client or freelancer…</CtaBanner.Description>
<CtaBanner.Actions>
<Button size="lg" variant="secondary">I'm a client</Button>
</CtaBanner.Actions>
</CtaBanner.Root>The banner sits on the brand gradient fill, so buttons inside it need light-on-brand variants rather than the page defaults.
API
CtaBanner.Root
| Prop | Type | Default | |
|---|---|---|---|
background | "brand" | "default" | "gradient" | "gradient-brand" | "gradient-primary" | "muted" | — | Surface behind the section. The three gradients read as brand moments —
one per page is usually one enough. brand also flips the foreground to
primary-foreground. |
containerSize | "full" | "lg" | "md" | "sm" | "xl" | "md" | Width of the content column inside the banner. Same sizes as Container. |
spacing | "lg" | "md" | "none" | "sm" | "xl" | "lg" | Vertical padding, which grows at md and up. none when the section
supplies its own rhythm. |
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/cta-banner/root.tsx.
CtaBanner.Actions
Plus every <div> prop. Source: landing/components/cta-banner/actions.tsx.
CtaBanner.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/cta-banner/description.tsx.
CtaBanner.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/cta-banner/title.tsx.