Organic Card

Renders a composable marketing card with optional link, image, eyebrow, title, body, accent band, and footer CTA. It adapts to link or div based on provided props. Use for marketing content sections with visual hierarchy and interactive elements.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/organic-card

npx layro-cli add @nolly-studio/organic-card

npx layro-cli add @nolly-studio/organic-card

bunx layro-cli add @nolly-studio/organic-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import {
  createContext,
  useContext,
  type ComponentPropsWithoutRef,
  type HTMLAttributes,
  type ReactNode,
} from "react"
import type { StaticImport } from "next/dist/shared/lib/get-img-props"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"