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
A dominant quote tile on 1–7 (quote at step 5, weight 500, author row at the bottom) beside two stacked shorter quote tiles on 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 5 (weight 500, tight) at the top and, at the bottom, a round accent dot beside the name (600) and muted role. Two smaller quote tiles stacked in 8–12, each filling its row: the quote at step 1 (weight 500) at the top, name and mono company at the bottom.
“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": 8,
        "pad": [
          8,
          8
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "quote2",
            "role": "quote",
            "step": 5,
            "weight": 500,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 30
          },
          {
            "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",
                    "color": "textMuted",
                    "slot": "role2",
                    "role": "small"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "repeat",
        "span": "8-12",
        "rowSpan": "1-2",
        "slot": "items",
        "min": 2,
        "max": 2,
        "layout": "grid",
        "cols": 1,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 6,
          "pad": [
            6,
            6
          ],
          "justify": "between",
          "border": "all",
          "children": [
            {
              "el": "text",
              "slot": "body",
              "role": "body",
              "step": 1,
              "weight": 500,
              "leading": "tight",
              "maxCh": 40
            },
            {
              "el": "box",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "label",
                  "weight": 600
                },
                {
                  "el": "text",
                  "color": "link",
                  "slot": "meta",
                  "role": "small",
                  "font": "mono"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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