Section reference › Showcase & media

Bento grid `"type": "bento"`

A mosaic of mixed tiles (photos, big numbers, text, quotes and checklists) in different sizes. Use it for a lively overview of a company, product or venue.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "bento",
  "eyebrow": "Why guests come back",
  "title": "Everything under one roof",
  "items": [
    {
      "size": "lg",
      "image": "placeholder",
      "label": "Rooftop",
      "title": "A pool with a view of the whole bay",
      "text": "Open from 7 am to 10 pm.",
      "link": "facilities.html"
    },
    {
      "kind": "stat",
      "number": "4.9",
      "suffix": "/5",
      "title": "Average guest rating",
      "icon": "star",
      "tone": "primary"
    },
    {
      "kind": "stat",
      "number": "120",
      "suffix": "+",
      "title": "Rooms and suites",
      "icon": "door-open"
    },
    {
      "size": "wide",
      "kind": "quote",
      "text": "The best night’s sleep I have had in a hotel, and breakfast was worth the trip alone.",
      "title": "Sarah K.",
      "label": "Stayed in June"
    },
    {
      "kind": "list",
      "title": "Every stay includes",
      "items": [
        "Breakfast",
        "Fast Wi-Fi",
        "Late checkout",
        "Gym access"
      ],
      "tone": "accent"
    },
    {
      "kind": "text",
      "icon": "calendar-event",
      "label": "Events",
      "title": "Weddings & meetings",
      "text": "Five rooms for 10 to 300 guests.",
      "link": "events.html"
    },
    {
      "size": "wide",
      "image": "placeholder",
      "label": "Dining",
      "title": "Two restaurants, one rooftop bar"
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	—	Section heading. Simple inline HTML such as <em> or <br> is allowed.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it. Values: `center \| start`
`items`	array	—	The tiles, in order.
`buttons`	array	—	Buttons shown centred under the grid. See the button fields below.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

Option	Type	Default	Description
`kind`	string	—	Tile type. If omitted: "image" when image is set, "stat" when number is set, otherwise "text". Values: `image \| stat \| text \| quote \| list`
`size`	string	`sm`	Tile size on a 4-column grid: sm = 1×1, wide = 2 columns, tall = 2 rows, lg = 2×2. Values: `sm \| wide \| tall \| lg`
`tone`	string	`"dark" for image tiles, "light" for the rest`	Tile colour. Values: `light \| dark \| primary \| accent`
`image`	string	—	image tiles: the photo.
`icon`	string	—	stat and text tiles: Bootstrap Icons name in a small circle.
`label`	string	—	Small text: above the title (image, text) or under the name (quote).
`title`	string	—	Tile heading. For quote tiles: the person's name. For stat tiles: the caption under the number.
`text`	string	—	Paragraph. For quote tiles: the quote itself.
`number`	string	—	stat tiles: the big number, e.g. "96".
`suffix`	string	—	stat tiles: text right after the number, e.g. "%" or "+".
`items`	array	—	list tiles: checklist lines (strings).
`link`	string	—	Makes the whole tile a link. Text tiles also get an arrow icon.

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
`style`	string	`primary`	Button look. Values: `primary \| outline \| light \| dark \| accent \| link`
`icon`	string	—	Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
`video`	string	—	YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Tips#

The grid has 4 columns on desktop (2 on tablets, 1 on phones). Count cells (sm = 1, wide = 2, tall = 2, lg = 4) and aim for a multiple of 4 so there are no gaps; the example uses 12. Small gaps are filled automatically where possible.
Keep quote tiles "wide" so the quote has room.
Image tiles are dark by default so white text stays readable on the photo.

Editing it in the HTML files#

Each tile is a .bento-tile; its size and colour are classes such as bento-wide and bento-tone-primary, so you can change them directly in the HTML.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/index.html (source src/demos/creative-agency/pages/index.json)
Corporate: template/corporate/index.html (source src/demos/corporate/pages/index.json)
Finance: template/finance/index.html (source src/demos/finance/pages/index.json)
Law Firm: template/law-firm/results.html (source src/demos/law-firm/pages/results.json)
SaaS Product: template/saas/features.html (source src/demos/saas/pages/features.json)
Mobile App: template/mobile-app/home-2.html (source src/demos/mobile-app/pages/home-2.json)
Restaurant: template/restaurant/index.html (source src/demos/restaurant/pages/index.json)
Coffee Shop: template/cafe/home-2.html (source src/demos/cafe/pages/home-2.json)
Hotel & Resort: template/hotel/index.html (source src/demos/hotel/pages/index.json)
Wedding: template/wedding/home-2.html (source src/demos/wedding/pages/home-2.json)
Gym & Fitness: template/gym/index.html (source src/demos/gym/pages/index.json)
Day Spa & Salon: template/spa/index.html (source src/demos/spa/pages/index.json)
Dental Clinic: template/dental/index.html (source src/demos/dental/pages/index.json)
Construction: template/construction/home-2.html (source src/demos/construction/pages/home-2.json)
Travel Agency: template/travel/index.html (source src/demos/travel/pages/index.json)
Photographer: template/photography/home-2.html (source src/demos/photography/pages/home-2.json)
Architecture Studio: template/architecture/home-2.html (source src/demos/architecture/pages/home-2.json)
Interior Design: template/interior-design/home-2.html (source src/demos/interior-design/pages/home-2.json)
Portfolio: template/portfolio/index.html (source src/demos/portfolio/pages/index.json)
Music Festival: template/music-festival/index.html (source src/demos/music-festival/pages/index.json)
Fashion Store: template/fashion-store/index.html (source src/demos/fashion-store/pages/index.json)
Charity: template/charity/impact.html (source src/demos/charity/pages/impact.json)
Logistics: template/logistics/home-2.html (source src/demos/logistics/pages/home-2.json)

Bento grid "type": "bento"