Blog 58

<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
  <div class="container">
    <div
      class="rb-12 mb-12 grid grid-cols-1 items-start justify-start gap-y-8 md:mb-18 md:grid-cols-[1fr_max-content] md:items-end md:justify-between md:gap-x-12 md:gap-y-4 lg:mb-20 lg:gap-x-20"
    >
      <div class="w-full max-w-lg">
        <p class="mb-3 font-semibold md:mb-4">Blog</p>
        <h1 class="mb-3 text-5xl font-bold md:mb-4 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="hidden flex-wrap items-center justify-end md:block">
        <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 all"
        >
          View all
        </button>
      </div>
    </div>
    <div class="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-8 lg:gap-x-12">
      <div class="flex size-full flex-col items-center justify-start">
        <a href="#" class="mb-5 w-full md:mb-6"
          ><img
            src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
            alt="Relume placeholder image"
            class="aspect-video size-full object-cover"
        /></a>
        <div class="rb-4 mb-3 flex w-full items-center justify-start md:mb-4">
          <p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
          <p class="inline text-sm font-semibold">5 min read</p>
        </div>
        <div class="flex w-full flex-col items-start justify-start">
          <a class="mb-2" href="#"
            ><h2 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h2></a
          >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
            eros.
          </p>
          <button
            class="focus-visible:ring-border-primary 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 mt-5 flex items-center justify-center gap-x-2 md:mt-6"
            title="Read more"
          >
            Read more<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-start">
        <a href="#" class="mb-5 w-full md:mb-6"
          ><img
            src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
            alt="Relume placeholder image"
            class="aspect-video size-full object-cover"
        /></a>
        <div class="rb-4 mb-3 flex w-full items-center justify-start md:mb-4">
          <p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
          <p class="inline text-sm font-semibold">5 min read</p>
        </div>
        <div class="flex w-full flex-col items-start justify-start">
          <a class="mb-2" href="#"
            ><h2 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h2></a
          >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
            eros.
          </p>
          <button
            class="focus-visible:ring-border-primary 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 mt-5 flex items-center justify-center gap-x-2 md:mt-6"
            title="Read more"
          >
            Read more<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="mt-12 flex flex-wrap justify-end md:hidden">
      <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 all"
      >
        View all
      </button>
    </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 BlogPost = {
  url: string;
  image: ImageProps;
  category: string;
  readTime: string;
  title: string;
  description: string;
  button: ButtonProps;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  blogPosts: BlogPost[];
  button: ButtonProps;
};

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

export const Blog58 = (props: Blog58Props) => {
  const { tagline, heading, description, button, blogPosts } = {
    ...Blog58Defaults,
    ...props,
  };
  return (
    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="rb-12 mb-12 grid grid-cols-1 items-start justify-start gap-y-8 md:mb-18 md:grid-cols-[1fr_max-content] md:items-end md:justify-between md:gap-x-12 md:gap-y-4 lg:mb-20 lg:gap-x-20">
          <div className="w-full max-w-lg">
            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
            <h1 className="mb-3 text-5xl font-bold md:mb-4 md:text-7xl lg:text-8xl">{heading}</h1>
            <p className="md:text-md">{description}</p>
          </div>
          <div className="hidden flex-wrap items-center justify-end md:block">
            <Button {...button}>{button.title}</Button>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-8 lg:gap-x-12">
          {blogPosts.map((post, index) => (
            <div key={index} className="flex size-full flex-col items-center justify-start">
              <a href={post.url} className="mb-5 w-full md:mb-6">
                <img
                  src={post.image.src}
                  alt={post.image.alt}
                  className="aspect-video size-full object-cover"
                />
              </a>
              <div className="rb-4 mb-3 flex w-full items-center justify-start md:mb-4">
                <p className="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
                  {post.category}
                </p>
                <p className="inline text-sm font-semibold">{post.readTime}</p>
              </div>
              <div className="flex w-full flex-col items-start justify-start">
                <a className="mb-2" href={post.url}>
                  <h2 className="text-xl font-bold md:text-2xl">{post.title}</h2>
                </a>
                <p>{post.description}</p>
                <Button
                  {...post.button}
                  className="mt-5 flex items-center justify-center gap-x-2 md:mt-6"
                >
                  {post.button.title}
                </Button>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-12 flex flex-wrap justify-end md:hidden">
          <Button {...button}>{button.title}</Button>
        </div>
      </div>
    </section>
  );
};

const blogPost: BlogPost = {
  url: "#",
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
    alt: "Relume placeholder image",
  },
  category: "Category",
  readTime: "5 min read",
  title: "Blog title heading will go here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
  button: { title: "Read more", variant: "link", size: "link", iconRight: <RxChevronRight /> },
};

export const Blog58Defaults: Props = {
  tagline: "Blog",
  heading: "Short heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  button: { title: "View all", variant: "secondary" },
  blogPosts: [blogPost, blogPost],
};

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

Blog 58

Blog 58

私たちの力を体験してください AI サイトビルダー今日

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

Blog 58

Blog 58

私たちの力を体験してください AI サイトビルダー 今日

私たちの力を体験してください AI サイトビルダー今日