testimonial.bento-quote-tiles · Quote tiles

A testimonial pattern from Bento Tech, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 5. Give the section root data-pattern="testimonial.bento-quote-tiles". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One large quote tile in 1–7 over two rows (quote at step 3, small round avatar, name and role at the bottom) beside two smaller quote tiles stacked in 8–12.
Slots
quote2, author2, role2, items[2..2]
Grid areas
main 1-7 · side 8-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • A large tile in 1–7 over two rows (padding 32 px): the quote at step 3 (weight 500) at the top and, at the bottom, a 40 px round avatar beside the name (600) and role. Two smaller quote tiles stacked in 8–12: quote, name, mono company.
“Demo requests doubled in the quarter after launch. That paid for the project.”

James Okafor

CMO, Fieldstack

They understood our product faster than our own sales team did.

Hanna Lindqvist

CEO, Corvid Robotics

Demo requests doubled in the quarter after launch. That paid for the project.

James Okafor

CMO, Fieldstack

Layout tree (as in design/layout.json)
{
  "pattern": "testimonial.bento-quote-tiles",
  "kind": "testimonial",
  "grid": {
    "main": "1-7",
    "side": "8-12"
  },
  "slots": [
    "quote2",
    "author2",
    "role2",
    "items[2..2]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 6,
        "pad": [
          8,
          8
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "quote2",
            "role": "quote",
            "step": 3,
            "weight": 500,
            "leading": "tight",
            "maxCh": 40
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "align": "center",
            "children": [
              {
                "el": "shape",
                "kind": "circle",
                "size": "sm",
                "fill": "accent"
              },
              {
                "el": "box",
                "gap": 0,
                "children": [
                  {
                    "el": "text",
                    "slot": "author2",
                    "role": "label",
                    "weight": 600
                  },
                  {
                    "el": "text",
                    "slot": "role2",
                    "role": "small"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "repeat",
        "span": "8-12",
        "rowSpan": "1-2",
        "slot": "items",
        "min": 2,
        "max": 2,
        "layout": "list",
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 2,
          "pad": [
            6,
            6
          ],
          "border": "all",
          "children": [
            {
              "el": "text",
              "slot": "body",
              "role": "body",
              "maxCh": 44
            },
            {
              "el": "text",
              "slot": "title",
              "role": "label",
              "weight": 600
            },
            {
              "el": "text",
              "slot": "meta",
              "role": "small",
              "font": "mono"
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page