案例便當盒｜免費 React 元件

不等尺寸的便當盒評價拼貼 React 元件：一格大型主打案例、數據磚、短評磚與合作字標磚混排，進場依格線位置依序浮現、數字計數，hover 露出閱讀案例連結。

把客戶案例做成一面不等尺寸的便當盒：2×2 的主打案例磚放滿版人像或場景（未提供照片時以漸層加抽象剪影佔位）與長引言，旁邊混排巨大數字的數據磚、帶小頭像的短評磚，以及排了 4 個文字字標的合作夥伴磚。格線寬螢幕 4 欄、md 以下 2 欄，較小的磚會自動往前補位。區塊進入視口時，各磚依實際格線位置（列優先）依序縮放浮現，數據磚接著從 0 計數到終值；有 href 的磚整格是連結，hover 或鍵盤聚焦時圖片微放大、底部浮出「閱讀案例 →」。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add bento-case-studies

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

標題title

顯示合作字標磚showLogos

進場間隔（ms）stagger

進場時長（ms）duration

500

hover 放大倍率hoverZoom

1.05

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<BentoCaseStudies/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/bento-case-studies.json

或在 components.json 設定 registries 後，改用 @webberui/bento-case-studies 安裝。

使用

import { BentoCaseStudies } from "@/components/ui/bento-case-studies";

<BentoCaseStudies
  eyebrow="客戶案例"
  title="他們用成果說話"
  items={[
    {
      kind: "feature",
      quote: "現在行銷自己就能把活動頁拼出來，上線速度快了一倍。",
      name: "林語晴",
      role: "品牌行銷經理",
      company: "青嶼咖啡",
      highlight: "上線速度快了一倍",
      href: "/cases/qingyu",
    },
    { kind: "metric", value: "+38%", label: "會員回購率", source: "青嶼咖啡" },
    { kind: "quote", quote: "回報表單終於不用再教第二次。", name: "陳柏翰", company: "北辰物流" },
    { kind: "logo", logos: ["青嶼咖啡", "北辰物流", "拾光學院", "好日選物"] },
  ]}
/>

Props

Prop	型別	預設值	說明
`eyebrow`	`string`	`"客戶案例"`	標題上方的小標
`title`	`string`	`"他們用成果說話"`	區塊標題；同時作為 section 的無障礙名稱
`subtitle`	`string`	—	標題下方的說明文字
`items`	`BentoCaseStudiesTile[]`	—	磚資料，依陣列順序排入 4 欄格線（md 以下 2 欄），空位由較小的磚往前補
`showLogos`	`boolean`	`true`	是否顯示合作字標磚
`stagger`	`number`	—	磚與磚的進場間隔（毫秒）；未提供時讀 `--wb-bento-case-studies-stagger`（預設 70ms）
`duration`	`number`	—	單一磚的進場時長（毫秒）；未提供時讀 `--wb-bento-case-studies-duration`（預設 500ms）
`hoverZoom`	`number`	`1.05`	hover／focus 時圖片放大倍率（1–1.12）
`readLabel`	`string`	`"閱讀案例"`	浮出連結的文字
`activeIndex`	`number \| null`	—	受控的目前聚焦磚索引（對應 `items` 索引，`null` 表示無）；未提供時由 hover／focus 內部管理
`defaultActiveIndex`	`number \| null`	`null`	非受控模式的初始聚焦磚索引
`onActiveIndexChange`	`(index: number \| null) => void`	—	聚焦磚變動時回呼
`className`	`string`	—	附加到根 section 的 class

BentoCaseStudiesTile

依 kind 區分四種磚，所有磚都可加 href（設定後整格變成連結）與 span（"1x1"、"2x1"、"2x2"；未提供時 feature 為 2x2，其餘 1x1）。

欄位	型別	預設值	說明
`kind`	`"feature" \| "metric" \| "quote" \| "logo"`	—	磚的種類
`href`	`string`	—	設定後整格變成連結，hover／focus 時浮出「閱讀案例 →」
`span`	`"1x1" \| "2x1" \| "2x2"`	依 kind	磚的尺寸（欄 × 列）
`quote`、`name`、`role`、`company`、`avatarHue`、`highlight`	見 `BentoCaseStudiesItem`	—	feature 與 quote 磚的引言與作者資料
`photoSrc`	`string`	—	feature：換成真實照片的網址；未提供時以漸層 + 抽象剪影佔位
`photoAlt`	`string`	—	feature：照片替代文字；未提供時視為裝飾圖
`avatarSrc`	`string`	—	quote：換成真實頭像的網址；未提供時以姓名縮寫 + 漸層圓佔位
`value`	`string`	—	metric：數字字串，可含前後綴（例如 `+38%`、`3.2 倍`、`12,000`）；數字部分會計數進場
`label`	`string`	—	metric：數字下方的標籤；logo：字標清單的無障礙名稱（預設「合作夥伴」）
`source`	`string`	—	metric：一行出處
`logos`	`string[]`	—	logo：合作夥伴名稱（文字字標），最多取前 4 個

BentoCaseStudiesItem

欄位	型別	預設值	說明
`quote`	`string`	—	評價內文
`name`	`string`	—	評價者姓名
`role`	`string`	—	職稱
`company`	`string`	—	公司或單位
`rating`	`number`	—	星等（1–5）；此元件不顯示，保留以便與其他 testimonial 元件共用資料
`avatarHue`	`number`	依索引	頭像漸層色相（0–360）；未提供時依索引以黃金角度自動分配
`highlight`	`string`	—	quote 中要以強調色標記的片段（需與 quote 內文完全相符）
`metric`	`{ value: string; label: string }`	—	成效數字；此元件改用獨立的 metric 磚呈現

細節

格線為 grid-flow-row-dense，寬螢幕 4 欄、md 以下 2 欄，列高至少 10.5rem、間距 12px、圓角 20px；非主打磚的底色在 neutral-50、neutral-100 與強調色 10% 之間輪替。
進場順序不是陣列索引，而是量測每格實際位置後依「列優先」排序——因為 dense 補位與窄螢幕改欄都會改變誰在左上。每格 scale 0.96→1、y 12px→0 並淡入。
節奏外露為 CSS 變數：--wb-bento-case-studies-stagger（預設 70ms）、--wb-bento-case-studies-duration（預設 500ms）；可在外層或全域覆寫，傳 stagger／duration prop 時會直接寫入這兩個變數。
強調色只走 --wb-bento-case-studies-accent（預設 #0d9488，暗色 #2dd4bf），用於小標、標記片段、強調色磚與 focus ring。
數據磚出現後從 0 計數到終值（1000ms），保留原字串的前後綴、小數位數與千分位；初次渲染即輸出終值，SSR 與無 JS 環境都正確。
hover／focus 主打或短評磚時，圖片（或頭像）以 600ms ease-out 放大到 hoverZoom，有連結的磚底部浮出「閱讀案例 →」；字標磚 hover 時字標由 neutral-400 轉 neutral-900。
頭像不使用照片網址：姓名縮寫（中文取末兩字、拉丁取首字母）配上依索引黃金角度色相的雙色漸層，確定性、SSR 一致；需要真圖時傳 photoSrc／avatarSrc。

可及性

根元素為 <section aria-labelledby>，指向標題；沒有標題時改用小標作為 aria-label
有 href 的磚整格為 <a>，aria-label 含「閱讀案例」與作者、公司，鍵盤 Tab 可依序聚焦並有 focus-visible ring；浮出的連結文字為純視覺（aria-hidden）
沒有連結的磚為 <figure>，引言以 blockquote 與 figcaption 呈現
數據磚計數中的數字對輔助科技隱藏，另以 sr-only 文字直接提供終值，螢幕閱讀器不會朗讀計數過程
字標磚為 role="list"，每個字標為 role="listitem"
使用者系統開啟「減少動態效果」時，進場改為 150ms 淡入（無縮放與位移），數字不計數直接顯示終值，hover 不放大圖片

案例便當盒

把這個效果裝進你的專案

本頁目錄