Stats 29

<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
  <div class="container">
    <div
      class="mb-12 grid grid-cols-1 gap-y-5 md:mb-18 md:grid-cols-2 md:gap-x-12 lg:mb-20 lg:gap-x-20"
    >
      <div>
        <p class="mb-3 font-semibold md:mb-4">Tagline</p>
        <h2 class="text-5xl font-bold md:text-7xl lg:text-8xl">
          Medium length section heading goes here
        </h2>
      </div>
      <div>
        <p class="md:text-md">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
          elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
          commodo diam libero vitae erat. Suspendisse varius enim in eros elementum tristique. Duis
          cursus, mi quis viverra ornare, eros dolor interdum nulla.
        </p>
        <div class="mt-6 flex flex-wrap items-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 text-text-primary bg-background-primary px-6 py-3"
            title="Button"
          >
            Button</button
          ><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 grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <div
        class="border border-border-primary p-8 first:flex first:flex-col first:md:col-span-2 first:md:row-span-1 first:lg:col-span-1 first:lg:row-span-2 [&amp;:nth-last-child(2)]:order-last [&amp;:nth-last-child(2)]:md:order-none"
      >
        <p
          class="mb-8 text-10xl font-bold leading-[1.3] md:mb-10 md:text-[4rem] lg:mb-12 lg:text-[5rem]"
        >
          30%
        </p>
        <h3 class="text-md font-bold leading-[1.4] first:mt-auto md:text-xl mt-auto">
          Short heading goes here
        </h3>
        <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div>
        <img
          class="aspect-[3/2] size-full object-cover"
          src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
          alt="Relume placeholder image"
        />
      </div>
      <div
        class="border border-border-primary p-8 first:flex first:flex-col first:md:col-span-2 first:md:row-span-1 first:lg:col-span-1 first:lg:row-span-2 [&amp;:nth-last-child(2)]:order-last [&amp;:nth-last-child(2)]:md:order-none"
      >
        <p
          class="mb-8 text-10xl font-bold leading-[1.3] md:mb-10 md:text-[4rem] lg:mb-12 lg:text-[5rem]"
        >
          30%
        </p>
        <h3 class="text-md font-bold leading-[1.4] first:mt-auto md:text-xl">
          Short heading goes here
        </h3>
        <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div
        class="border border-border-primary p-8 first:flex first:flex-col first:md:col-span-2 first:md:row-span-1 first:lg:col-span-1 first:lg:row-span-2 [&amp;:nth-last-child(2)]:order-last [&amp;:nth-last-child(2)]:md:order-none"
      >
        <p
          class="mb-8 text-10xl font-bold leading-[1.3] md:mb-10 md:text-[4rem] lg:mb-12 lg:text-[5rem]"
        >
          30%
        </p>
        <h3 class="text-md font-bold leading-[1.4] first:mt-auto md:text-xl">
          Short heading goes here
        </h3>
        <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div>
        <img
          class="aspect-[3/2] size-full object-cover"
          src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
          alt="Relume placeholder image"
        />
      </div>
    </div>
  </div>
</section>

import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import clsx from "clsx";
import React from "react";
import { RxChevronRight } from "react-icons/rx";

type ImageProps = {
  src: string;
  alt?: string;
};

type CardProps = {
  percentage?: string;
  heading?: string;
  description?: string;
  image?: ImageProps;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  buttons: ButtonProps[];
  cards: CardProps[];
};

export type Stats29Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Stats29 = (props: Stats29Props) => {
  const { tagline, heading, description, cards, buttons } = {
    ...Stats29Defaults,
    ...props,
  };
  return (
    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 grid grid-cols-1 gap-y-5 md:mb-18 md:grid-cols-2 md:gap-x-12 lg:mb-20 lg:gap-x-20">
          <div>
            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
            <h2 className="text-5xl font-bold md:text-7xl lg:text-8xl">{heading}</h2>
          </div>

          <div>
            <p className=" md:text-md">{description}</p>
            <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
              {buttons.map((button, index) => (
                <Button key={index} {...button}>
                  {button.title}
                </Button>
              ))}
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {cards.map((card, index) => (
            <Card key={index} {...card} isFirst={index === 0} />
          ))}
        </div>
      </div>
    </section>
  );
};

const Card = ({ isFirst, ...card }: CardProps & { isFirst?: boolean }) => {
  return (
    <React.Fragment>
      {card.image ? (
        <div>
          <img
            className="aspect-[3/2] size-full object-cover"
            src={card.image.src}
            alt={card.image.alt}
          />
        </div>
      ) : (
        <div className="border border-border-primary p-8 first:flex first:flex-col first:md:col-span-2 first:md:row-span-1 first:lg:col-span-1 first:lg:row-span-2 [&:nth-last-child(2)]:order-last [&:nth-last-child(2)]:md:order-none">
          <p className="mb-8 text-10xl font-bold leading-[1.3] md:mb-10 md:text-[4rem] lg:mb-12 lg:text-[5rem]">
            {card.percentage}
          </p>
          <h3
            className={clsx("text-md font-bold leading-[1.4] first:mt-auto md:text-xl", {
              "mt-auto": isFirst,
            })}
          >
            {card.heading}
          </h3>
          <p className="mt-2">{card.description}</p>
        </div>
      )}
    </React.Fragment>
  );
};

export const Stats29Defaults: Props = {
  tagline: "Tagline",
  heading: "Medium length section heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.",
  buttons: [
    { title: "Button", variant: "secondary" },
    {
      title: "Button",
      variant: "link",
      size: "link",
      iconRight: <RxChevronRight />,
    },
  ],
  cards: [
    {
      percentage: "30%",
      heading: "Short heading goes here",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image",
      },
    },
    {
      percentage: "30%",
      heading: "Short heading goes here",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      percentage: "30%",
      heading: "Short heading goes here",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    },
    {
      image: {
        src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
        alt: "Relume placeholder image",
      },
    },
  ],
};

You need to be logged in to view the code.

Get the code

Upgrade your plan to view the code.

Upgrade

Details

Introduction to Site Builder

1. Duplicate the Figma Kit

2. Update the Style Guide

3. Build your page

1. Clone the style guide

2. Copy component

3. Paste in to project

Stats 29

Stats 29

Experience the power of our AI Site Builder today