Menu
CTA 45
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div
class="grid grid-cols-1 items-start justify-start gap-6 border border-border-primary p-8 md:grid-cols-[1fr_max-content] md:items-center md:justify-between md:gap-x-12 md:gap-y-8 lg:gap-x-20 lg:p-12"
>
<div class="md:mr-12 lg:mr-0">
<div class="w-full max-w-lg">
<h3 class="mb-3 text-4xl font-bold leading-[1.2] md:mb-4 md:text-5xl lg:text-6xl">
Medium length heading goes here
</h3>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="flex w-full flex-wrap items-center justify-start gap-4 md:w-auto md:justify-end">
<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>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
type Props = {
heading: string;
description: string;
buttons: ButtonProps[];
};
export type Cta45Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Cta45 = (props: Cta45Props) => {
const { heading, description, buttons } = {
...Cta45Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="grid grid-cols-1 items-start justify-start gap-6 border border-border-primary p-8 md:grid-cols-[1fr_max-content] md:items-center md:justify-between md:gap-x-12 md:gap-y-8 lg:gap-x-20 lg:p-12">
<div className="md:mr-12 lg:mr-0">
<div className="w-full max-w-lg">
<h3 className="mb-3 text-4xl font-bold leading-[1.2] md:mb-4 md:text-5xl lg:text-6xl">
{heading}
</h3>
<p className="md:text-md">{description}</p>
</div>
</div>
<div className="flex w-full flex-wrap items-center justify-start gap-4 md:w-auto md:justify-end">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
</div>
</section>
);
};
export const Cta45Defaults: Props = {
heading: "Medium length heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
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)
