Menu
Layout 388
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h1 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
Short heading goes here
</h1>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="grid auto-cols-fr gap-6 md:gap-8">
<div class="flex flex-col border border-border-primary">
<div class="flex flex-1 flex-col justify-center p-6 md:p-8">
<div>
<div class="rb-5 mb-5 md:mb-6">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
class="size-12"
alt="Relume logo 1"
/>
</div>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Short heading here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex flex-col border border-border-primary">
<div class="flex flex-1 flex-col justify-center p-6 md:p-8">
<div>
<div class="rb-5 mb-5 md:mb-6">
<img
src="https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg"
class="size-12"
alt="Relume logo 2"
/>
</div>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Short heading here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div
class="grid auto-cols-fr border border-border-primary sm:col-span-2 sm:row-span-2 sm:grid-cols-2 lg:col-start-2 lg:row-start-1"
>
<div class="block p-6 sm:flex sm:flex-col sm:justify-center md:p-8">
<div>
<p class="mb-2 font-semibold">Tagline</p>
<h2 class="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
Medium length section heading goes here
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-5 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex 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-0 text-text-primary gap-2 p-0"
title="Button"
>
Button<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
<div class="flex size-full flex-col items-center justify-center self-start">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-bento-portrait2.svg"
alt="Relume placeholder image"
class="size-full object-cover"
/>
</div>
</div>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { RxChevronRight } from "react-icons/rx";
type ImageProps = {
src: string;
alt?: string;
};
type FeatureSection = {
icon: ImageProps;
heading: string;
description: string;
button: ButtonProps;
};
type Card = {
tagline: string;
image: ImageProps;
heading: string;
description: string;
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
featureSections: FeatureSection[];
card: Card;
};
export type Layout388Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Layout388 = (props: Layout388Props) => {
const { tagline, heading, description, featureSections, card } = {
...Layout388Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
<div className="grid auto-cols-fr gap-6 md:gap-8">
{featureSections.map((feature, index) => (
<FeatureSection key={index} {...feature} />
))}
<Card {...card} />
</div>
</div>
</section>
);
};
const Card = (card: Card) => {
return (
<div className="grid auto-cols-fr border border-border-primary sm:col-span-2 sm:row-span-2 sm:grid-cols-2 lg:col-start-2 lg:row-start-1">
<div className="block p-6 sm:flex sm:flex-col sm:justify-center md:p-8">
<div>
<p className="mb-2 font-semibold">{card.tagline}</p>
<h2 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
{card.heading}
</h2>
<p>{card.description}</p>
</div>
<div className="mt-5 md:mt-6">
<Button {...card.button}>{card.button.title}</Button>
</div>
</div>
<div className="flex size-full flex-col items-center justify-center self-start">
<img src={card.image.src} alt={card.image.alt} className="size-full object-cover" />
</div>
</div>
);
};
const FeatureSection = (featureSection: FeatureSection) => (
<div className="flex flex-col border border-border-primary">
<div className="flex flex-1 flex-col justify-center p-6 md:p-8">
<div>
<div className="rb-5 mb-5 md:mb-6">
<img src={featureSection.icon.src} className="size-12" alt={featureSection.icon.alt} />
</div>
<h2 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
{featureSection.heading}
</h2>
<p>{featureSection.description}</p>
</div>
<div className="mt-5 md:mt-6">
<Button {...featureSection.button}>{featureSection.button.title}</Button>
</div>
</div>
</div>
);
export const Layout388Defaults: Props = {
tagline: "Tagline",
heading: "Short heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
card: {
tagline: "Tagline",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-bento-portrait2.svg",
alt: "Relume placeholder image",
},
heading: "Medium length section heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
featureSections: [
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume logo 1",
},
heading: "Short heading here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
{
icon: {
src: "https://d22po4pjz3o32e.cloudfront.net/relume-icon.svg",
alt: "Relume logo 2",
},
heading: "Short heading here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: {
title: "Button",
variant: "link",
size: "link",
iconRight: <RxChevronRight />,
},
},
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
