Skip to content
jezuiMake it yours
← Blocks

Media Aside

A complete media aside section, ready to adapt to your product.

Open ↗

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/media-aside.json

Use it

Scroll horizontally for long lines
"use client";
import { MediaAside } from "@/components/jez-ui/blocks/media-aside";

export default function Example() {
  return (
    <>
      <MediaAside />
    </>
  );
}

Compose your own

These styled parts are included in the same install. Use children to build your layout; add className only when you want an override.

Scroll horizontally for long lines
import { MediaAside, MediaAsideContent, MediaAsideTitle, MediaAsideMedia } from "@/components/jez-ui/blocks/media-aside";
Read the composition guide →

Props & types

Scroll horizontally for long lines
export type MediaAsideOptions = {
  className?: string;
  title?: string;
  description?: string;
  imageSrc?: string;
  imageAlt?: string;
  href?: string;
  actionLabel?: string;
  reverse?: boolean;
};

export type MediaAsideProps = Omit<
  React.ComponentProps<"article">,
  keyof MediaAsideOptions
> &
  MediaAsideOptions;

MediaAsideProps

Source

View 3 source files

registry/blocks/media-aside.tsx

Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
export type MediaAsideOptions = {
  className?: string;
  title?: string;
  description?: string;
  imageSrc?: string;
  imageAlt?: string;
  href?: string;
  actionLabel?: string;
  reverse?: boolean;
};
export type MediaAsideProps = Omit<
  React.ComponentProps<"article">,
  keyof MediaAsideOptions
> &
  MediaAsideOptions;
export function MediaAside({
  className,
  title = "A slower way to make something lasting.",
  description = "Inside a practice shaped by careful observation, material experiments, and the freedom to start again.",
  imageSrc = "/assets/editorial-slow.svg",
  imageAlt = "Editorial artwork about slowing down",
  href = "/templates/editorial",
  actionLabel = "Read the story",
  reverse = false,
  children,
  ...rootProps
}: MediaAsideProps) {
  return (
    <article
      {...rootProps}
      className={cn(
        "grid overflow-hidden rounded-xl bg-muted md:grid-cols-2",
        className,
      )}
    >
      {children !== undefined ? (
        children
      ) : (
        <>
          <MediaAsideMedia
            src={imageSrc}
            alt={imageAlt}
            className={cn("", reverse && "md:order-2")}
          />
          <MediaAsideContent>
            <MediaAsideTitle>{title}</MediaAsideTitle>
            <p className="mt-6 max-w-prose text-sm leading-relaxed text-muted-foreground">
              {description}
            </p>
            <a
              href={href}
              className="mt-9 w-fit border-b border-current pb-1 text-sm hover:text-primary"
            >
              {actionLabel}
            </a>
          </MediaAsideContent>
        </>
      )}
    </article>
  );
}

export function MediaAsideContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="media-aside-content"
      className={cn("flex flex-col justify-center p-7 md:p-12", className)}
      {...props}
    />
  );
}
export function MediaAsideTitle({
  className,
  ...props
}: React.ComponentProps<"h2">) {
  return (
    <h2
      data-slot="media-aside-title"
      className={cn("text-4xl leading-tight tracking-tight", className)}
      {...props}
    />
  );
}

export function MediaAsideMedia({
  className,
  ...props
}: React.ComponentProps<"img">) {
  return (
    <img
      className={cn("h-full min-h-64 w-full object-cover", className)}
      {...props}
    />
  );
}

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));
}

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

Accessibility & behaviour

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

Read the accessibility and performance guide →