Section reference › Showcase & media

Image tiles `"type": "tiles"`

Clickable photo tiles with a title and subtitle on the image. Use them for categories, destinations, collections or departments that each lead to their own page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "tiles",
  "eyebrow": "Shop by category",
  "title": "Find what you need",
  "columns": 3,
  "items": [
    {
      "image": "placeholder",
      "subtitle": "48 products",
      "title": "Living room",
      "link": "#",
      "wide": true
    },
    {
      "image": "placeholder",
      "subtitle": "32 products",
      "title": "Bedroom",
      "link": "#"
    },
    {
      "image": "placeholder",
      "subtitle": "27 products",
      "title": "Kitchen & dining",
      "link": "#"
    },
    {
      "image": "placeholder",
      "subtitle": "19 products",
      "title": "Lighting",
      "link": "#"
    },
    {
      "image": "placeholder",
      "subtitle": "41 products",
      "title": "Outdoor",
      "link": "#"
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`items`	array	—	The tiles. See the "items" fields.
`columns`	number	`3`	Tiles per row on large screens. Tablets show 2, phones 1. Values: `2 \| 3 \| 4`

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

Fields of each entry in `items`#

Option	Type	Default	Description
`image`	string	—	Photo.
`title`	string	—	Main caption.
`subtitle`	string	—	Small line above the title, e.g. "24 products" or "From $1,290".
`link`	string	—	Where the tile goes. "href" also works. Default "#".
`wide`	boolean	—	The tile spans two columns (from tablet width up).

Tips#

Count a "wide" tile as two when filling rows: with 3 columns, 1 wide + 4 normal tiles fill two rows.
Use photos without much detail at the bottom: that is where the caption sits.

Editing it in the HTML files#

Each tile is an a.tile; change its href to change the link. The caption is in .tile-body (small for the subtitle, strong for the title).

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/home-2.html (source src/demos/creative-agency/pages/home-2.json)
Real Estate: template/real-estate/index.html (source src/demos/real-estate/pages/index.json)
Corporate: template/corporate/industries.html (source src/demos/corporate/pages/industries.json)
Finance: template/finance/home-2.html (source src/demos/finance/pages/home-2.json)
Mobile App: template/mobile-app/home-2.html (source src/demos/mobile-app/pages/home-2.json)
Tech Conference: template/conference/venue.html (source src/demos/conference/pages/venue.json)
Online Academy: template/education/index.html (source src/demos/education/pages/index.json)
Restaurant: template/restaurant/index.html (source src/demos/restaurant/pages/index.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/experience-reef-snorkelling.html (source src/demos/hotel/pages/experience.json)
Wedding: template/wedding/index.html (source src/demos/wedding/pages/index.json)
Yoga Studio: template/yoga/index.html (source src/demos/yoga/pages/index.json)
Medical Clinic: template/medical/home-2.html (source src/demos/medical/pages/home-2.json)
Pet Care: template/pet-care/index.html (source src/demos/pet-care/pages/index.json)
Car Dealer: template/car-dealer/index.html (source src/demos/car-dealer/pages/index.json)
Travel Agency: template/travel/destinations.html (source src/demos/travel/pages/destinations.json)
Photographer: template/photography/portfolio.html (source src/demos/photography/pages/portfolio.json)
Interior Design: template/interior-design/home-2.html (source src/demos/interior-design/pages/home-2.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/home-2.html (source src/demos/charity/pages/home-2.json)
Logistics: template/logistics/index.html (source src/demos/logistics/pages/index.json)

Image tiles "type": "tiles"