Menu
CTA 25
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container max-w-lg text-center">
<h2 class="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
Medium length heading goes here
</h2>
<p class="md:text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="mt-6 flex items-center justify-center gap-4 md:mt-8">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary bg-background-alternative text-text-alternative px-6 py-3"
title="Button"
>
Button</button
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3"
title="Button"
>
Button
</button>
</div>
</div>
</section>
import { Button, ButtonProps } from "@relume_io/relume-ui";
type Props = {
heading: string;
description: string;
buttons: ButtonProps[];
};
export type Cta25Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Cta25 = (props: Cta25Props) => {
const { heading, description, buttons } = {
...Cta25Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container max-w-lg text-center">
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h2>
<p className="md:text-md">{description}</p>
<div className="mt-6 flex items-center justify-center gap-4 md:mt-8">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
</section>
);
};
export const Cta25Defaults: Props = {
heading: "Medium length heading goes here",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
buttons: [{ title: "Button" }, { title: "Button", variant: "secondary" }],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
