Journal Hero

An editorial cover, serif headline, and spacious introduction to a publication.

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines

pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/journal-hero.json

Use it

Scroll horizontally for long lines

"use client";
import {JournalHero} from '@/components/jez-ui/blocks/journal-hero';

export default function Example(){

return <><JournalHero/></>;
}

Props & types

Scroll horizontally for long lines

export type HeroProps = {
  className?: string;
  href?: string;
  title?: React.ReactNode;
  description?: React.ReactNode;
  actionLabel?: React.ReactNode;
  imageSrc?: string;
  imageAlt?: string;
  artwork?: { color?: string; speed?: number };
};

HeroProps

Source

View 4 source files

registry/blocks/journal-hero.tsx

Scroll horizontally for long lines

"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { HeroLink, type HeroProps } from "./hero-parts";
export function JournalHero({
  title,
  actionLabel,
  description,
  imageSrc,
  imageAlt,
  className,
  href = "/blocks",
}: HeroProps) {
  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-xl bg-[#f6f0e7] text-[#43372d]",
        className,
      )}
    >
      <div className="flex items-end justify-between border-b border-[#43372d]/25 p-7">
        <span className="font-serif text-4xl">Still.</span>
        <span className="text-xs">A journal for paying attention</span>
      </div>
      <div className="grid gap-8 p-7 md:grid-cols-[1fr_1.2fr] md:p-10">
        <div className="flex flex-col items-start justify-between gap-8">
          <p className="text-xs uppercase tracking-widest">
            From the editor / Issue 04
          </p>
          <h1 className="font-serif text-5xl leading-[1.05] tracking-tight md:text-6xl">
            {title ?? (
              <>
                The art of
                <br />
                <em>noticing.</em>
              </>
            )}
          </h1>
          <p className="max-w-xs text-sm leading-relaxed">
            {description ?? (
              <>
                On small observations, everyday objects, and the things we miss
                when we move too quickly.
              </>
            )}
          </p>
          <HeroLink href={href}>
            {actionLabel ?? <>Read the latest issue</>}
          </HeroLink>
        </div>
        <figure>
          <img
            src={imageSrc ?? "/assets/editorial-slow.svg"}
            alt={imageAlt ?? "Abstract editorial study in warm geometric forms"}
            className="aspect-[4/5] w-full object-cover"
          />
          <figcaption className="mt-3 text-xs text-[#43372d]/65">
            A slower internet. A wider view.
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

registry/blocks/hero-parts.tsx

Scroll horizontally for long lines

"use client";
import * as React from "react";
import { ArrowUpRight } from "lucide-react";
import { cn } from "../ui/utils";
export type HeroProps = {
  className?: string;
  href?: string;
  title?: React.ReactNode;
  description?: React.ReactNode;
  actionLabel?: React.ReactNode;
  imageSrc?: string;
  imageAlt?: string;
  artwork?: { color?: string; speed?: number };
};
export function HeroLink({
  href = "/blocks",
  children = "Explore the collection",
  className,
}: {
  href?: string;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <a
      href={href}
      className={cn(
        "inline-flex items-center gap-3 rounded-full border border-current/30 px-5 py-3 text-sm transition-colors hover:bg-current/10",
        className,
      )}
    >
      {children}
      <ArrowUpRight size={16} />
    </a>
  );
}

assets/editorial-slow.svg

Scroll horizontally for long lines

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900"><rect width="1600" height="900" fill="#d8dbcc"/><rect x="160" y="120" width="1280" height="660" rx="16" fill="#f4efe1" stroke="#32483c" stroke-width="3"/><path d="M160 200H1440" stroke="#32483c" stroke-width="3"/><g fill="#a76245"><circle cx="205" cy="160" r="9"/><circle cx="239" cy="160" r="9"/><circle cx="273" cy="160" r="9"/></g><path d="M250 685V470a230 230 0 01460 0v215z" fill="#32483c"/><path d="M860 685V420a230 230 0 01460 0v265z" fill="#c68c66"/><g fill="none" stroke="#f4efe1" stroke-width="3"><path d="M280 655C440 280 550 290 680 630S980 930 1160 330"/><path d="M290 680C450 305 560 315 690 655S990 955 1170 355"/><path d="M300 705C460 330 570 340 700 680S1000 980 1180 380"/></g><circle cx="1090" cy="435" r="96" fill="#f4efe1"/><path d="M1035 381v118l34-34 25 48 24-13-27-45h53z" fill="#32483c"/><path d="M350 732H1250" stroke="#32483c" stroke-width="2"/><circle cx="790" cy="160" r="8" fill="#32483c"/></svg>

Dependencies

clsx@2.1.1 · tailwind-merge@3.5.0 · lucide-react@0.577.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →