Menu
Career 11
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mb-12 md:mb-18 lg:mb-20">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h2 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Open Positions</h2>
<p class="md:text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
</div>
<div>
<div class="border-t border-border-primary py-6 md:py-8">
<div class="mb-3 flex items-center gap-4 md:mb-4">
<a href="#"><h3 class="text-xl font-bold md:text-2xl">Job Title</h3></a>
<p class="bg-background-secondary px-2 py-1 text-sm font-semibold">Department</p>
</div>
<p class="mb-5 md:mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-y-3">
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="md:text-md">Location</span>
</div>
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path>
</svg>
</div>
<span class="md:text-md">Contract Type</span>
</div>
</div>
<div class="mt-6 md:mt-8">
<a
href="#"
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-5 py-2"
title="Apply Now"
>Apply Now</a
>
</div>
</div>
<div class="border-t border-border-primary py-6 md:py-8">
<div class="mb-3 flex items-center gap-4 md:mb-4">
<a href="#"><h3 class="text-xl font-bold md:text-2xl">Job Title</h3></a>
<p class="bg-background-secondary px-2 py-1 text-sm font-semibold">Department</p>
</div>
<p class="mb-5 md:mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-y-3">
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="md:text-md">Location</span>
</div>
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path>
</svg>
</div>
<span class="md:text-md">Contract Type</span>
</div>
</div>
<div class="mt-6 md:mt-8">
<a
href="#"
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-5 py-2"
title="Apply Now"
>Apply Now</a
>
</div>
</div>
<div class="border-t border-border-primary py-6 md:py-8">
<div class="mb-3 flex items-center gap-4 md:mb-4">
<a href="#"><h3 class="text-xl font-bold md:text-2xl">Job Title</h3></a>
<p class="bg-background-secondary px-2 py-1 text-sm font-semibold">Department</p>
</div>
<p class="mb-5 md:mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
elementum tristique.
</p>
<div class="flex flex-wrap gap-y-3">
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="md:text-md">Location</span>
</div>
<div class="mr-6 flex items-center">
<div class="mr-3 flex-none">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="flex size-6 flex-col items-center justify-center"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
></path>
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path>
</svg>
</div>
<span class="md:text-md">Contract Type</span>
</div>
</div>
<div class="mt-6 md:mt-8">
<a
href="#"
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-5 py-2"
title="Apply Now"
>Apply Now</a
>
</div>
</div>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { LuMapPin } from "react-icons/lu";
import { MdAccessTime } from "react-icons/md";
type PositionProps = {
url: string;
title: string;
department: string;
description: string;
location: string;
contractType: string;
button: ButtonProps;
};
type PositionCardProps = {
position: PositionProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
positions: PositionProps[];
};
export type Career11Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Career11 = (props: Career11Props) => {
const { tagline, heading, description, positions } = {
...Career11Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mb-12 md:mb-18 lg:mb-20">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h2 className="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>
<div>
{positions.map((position, index) => (
<PositionCard key={index} position={position} />
))}
</div>
</div>
</section>
);
};
const PositionCard: React.FC<PositionCardProps> = ({ position }) => {
return (
<div className="border-t border-border-primary py-6 md:py-8">
<div className="mb-3 flex items-center gap-4 md:mb-4">
<a href={position.url}>
<h3 className="text-xl font-bold md:text-2xl">{position.title}</h3>
</a>
<p className="bg-background-secondary px-2 py-1 text-sm font-semibold">
{position.department}
</p>
</div>
<p className="mb-5 md:mb-6">{position.description}</p>
<div className="flex flex-wrap gap-y-3">
<div className="mr-6 flex items-center">
<div className="mr-3 flex-none">
<LuMapPin className="flex size-6 flex-col items-center justify-center" />
</div>
<span className="md:text-md">{position.location}</span>
</div>
<div className="mr-6 flex items-center">
<div className="mr-3 flex-none">
<MdAccessTime className="flex size-6 flex-col items-center justify-center" />
</div>
<span className="md:text-md">{position.contractType}</span>
</div>
</div>
<div className="mt-6 md:mt-8">
<Button {...position.button} asChild>
<a href={position.url}>{position.button.title}</a>
</Button>
</div>
</div>
);
};
const position = {
url: "#",
title: "Job Title",
department: "Department",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
location: "Location",
contractType: "Contract Type",
button: {
title: "Apply Now",
variant: "secondary",
size: "sm",
},
};
export const Career11Defaults: Props = {
tagline: "Tagline",
heading: "Open Positions",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
positions: [position, position, position],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
