Menu
Event Item Header 7
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mx-auto flex w-full max-w-lg flex-col items-center text-center">
<h4 class="font-semibold">Tagline</h4>
<h1 class="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">Event title heading</h1>
<p class="mt-5 text-base md:mt-6 md:text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="mt-5 flex flex-wrap justify-center gap-4 text-sm md:mt-6">
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2zm16 14H5V8h14z"
></path></svg
>Sat<!-- -->
<!-- -->10<!-- -->
<!-- -->Feb<!-- -->
<!-- -->2024
</div>
<div class="flex items-center gap-2">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6 flex-none"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
></path>
<path
d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
></path></svg
><span>Location</span>
</div>
<div class="flex items-center gap-2">
<div class="flex h-6 items-center">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="23"
width="23"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z"
></path>
</svg>
</div>
<span>Speakers</span>
</div>
</div>
<div class="mt-6 flex flex-wrap 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="Save my spot"
>
Save my spot</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="View event"
>
View event
</button>
</div>
</div>
<div class="mt-12 md:mt-18 lg:mt-20">
<div class="relative aspect-video">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
class="size-full object-cover"
alt="Relume placeholder image"
/>
</div>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { BiMap, BiCalendarAlt, BiUser } from "react-icons/bi";
type ImageProps = {
src: string;
alt?: string;
};
type Date = {
weekday: string;
day: string;
month: string;
year: string;
};
type Props = {
tagline: string;
heading: string;
description: string;
date: Date;
location: string;
speakers: string;
image: ImageProps;
buttons: ButtonProps[];
};
export type EventItemHeader7Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const EventItemHeader7 = (props: EventItemHeader7Props) => {
const { tagline, heading, description, date, location, speakers, image, buttons } = {
...EventItemHeader7Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mx-auto flex w-full max-w-lg flex-col items-center text-center">
<h4 className="font-semibold">{tagline}</h4>
<h1 className="mt-3 text-5xl font-bold md:mt-4 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="mt-5 text-base md:mt-6 md:text-md">{description}</p>
<div className="mt-5 flex flex-wrap justify-center gap-4 text-sm md:mt-6">
<div className="flex items-center gap-2">
<BiCalendarAlt className="size-6 flex-none" />
{date.weekday} {date.day} {date.month} {date.year}
</div>
<div className="flex items-center gap-2 ">
<BiMap className="size-6 flex-none" />
<span>{location}</span>
</div>
<div className="flex items-center gap-2">
<div className="flex h-6 items-center">
<BiUser size={23} />
</div>
<span>{speakers}</span>
</div>
</div>
<div className="mt-6 flex flex-wrap items-center justify-center gap-4 md:mt-8">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</div>
<div className="mt-12 md:mt-18 lg:mt-20">
<div className="relative aspect-video">
<img src={image.src} className="size-full object-cover" alt={image.alt} />
</div>
</div>
</div>
</section>
);
};
export const EventItemHeader7Defaults: Props = {
tagline: "Tagline",
heading: "Event title heading",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
date: {
weekday: "Sat",
day: "10",
month: "Feb",
year: "2024",
},
location: "Location",
speakers: "Speakers",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder image",
},
buttons: [{ title: "Save my spot" }, { title: "View event", 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)
