DERTOUR GroupDesign
Documentation
Guide contents
15Home page section 15 of 20

Ways to book

Three yellow panels — book online, expert hub, visit a store — each with an icon, copy and a button.


What makes it this section
Card source = iconItems

Same family as the icon rows.

Layout = list

The stacked panel layout used only here.

What a visitor sees

On the websiteLIVE
Three yellow panels under 'Book your holiday your way': Book online, Our expert hub and Visit a Kuoni store, each with an icon and buttons.

What each field controls

The Field column is the label as it appears in Contentful; under it, the field's id, for talking to a developer. The number matches the marker on the screenshots above.

#FieldWhat it controlsNotes
1

Internal name

internalName
required
Nothing on the page.

How you find the entry again. Keep to the house pattern: "Homepage — …".

2

Eyebrow (small title above)

eyebrow
The small upper-case line above the heading.

Leave empty and nothing shows.

3

Heading

heading
The section's title.

4

Introduction

introduction
The paragraph under the title.

Up to 600 characters.

Section link label (optional)

linkLabel
A plain link at the section level, e.g. "View all".

Hidden if the URL below is empty.

Section link URL (optional)

linkUrl
Where that link goes.

5

Layout

variant
required
How the row is arranged.

Carousel scrolls sideways. Grid wraps onto rows. Featured makes the first card bigger. Compact, Feature grid, List and Trust are the icon-row layouts and all need Card source set to iconItems.

Choose one of:
carousel
grid
featured
compact
featureGrid
list
trust
6

Card source

source
required
What goes in the row — and which section this becomes.

This is the most important dropdown on the form. Change it and you get a different-looking section with different card types. Pick manual to hand-pick cards; anything else fills the row from that family.

Choose one of:
manual
hotels
tripIdeas
destinations
rooms
excursions
articles
offers
handpicked
tips
experts
testimonials
linkCards
iconItems
feefo

How items are chosen

mode
required
Whether the order is yours or automatic.

manual = the order you drag the cards into. auto = ordered by the commercial priority set on each product.

Choose one of:
manual
auto

Tags (for 'auto' mode)

tags
Which items an automatic row picks up.

Free text, and NOT the approved tag list. To filter on approved tags use the Taxonomy panel on the right instead.

7

Cards / selection (drag to reorder)

cards
The cards themselves, and their order.

Which card types are allowed depends on Card source. A card left as a draft will not appear.

8

Link / CTA (optional)

cta
The button under the row.

A link to a reusable Link / CTA entry — the wording and destination live there, so the same button can be used on several sections. Editing that entry changes every section pointing at it.

Section background

background
The band of colour behind the whole section.

none = white.

Choose one of:
none
surfaceBase
surfaceBaseDark
brandYellowSoft

Heading level

headingLevel
Nothing visible — the heading's importance for search engines.
Choose one of:
h2
h3
h4

Heading style

headingVariant
How big the heading looks.

Separate from Heading level, so size and importance are independent.

Choose one of:
h2
h3
h4
h5
h6
subtitle1
subtitle2

Heading colour

headingColor
The heading's colour.
Choose one of:
inherit
primary
secondary
textPrimary
textSecondary

Maximum cards

maxCards
How many cards render.

Leave blank for no cap. Applies to automatic rows too.

Show this section

showSection
Whether the section appears at all.

Set to No to hide the whole section without deleting it or unlinking it from the page. This is the safe way to take something down temporarily.

Fields on each panel (Icon Item)

All five of the required fields must be filled in. An incomplete panel is dropped rather than shown half-finished.

#FieldWhat it controlsNotes

Label

label
required
The panel title.

Description

description
required
The copy.

Icon

icon
required
The icon at the top.

Button label

ctaLabel
required
The main button.

Button link

ctaHref
required
Where it goes.

Phone

phone
The "Or call us" line.

Second button label + link

secondaryCtaLabel / secondaryCtaHref
The outlined button below the first.

Other entries this section needs

Content typeWhy you need it
Icon ItemOne per panel, with Type set to bookingOption.

How to change it, step by step

  1. Find the entry

    Search Contentful for "Homepage — Ways to book" and open it. You can also reach it from the Homepage entry — it is in the Sections list, in page order.

  2. Change what you need

    Edit the fields listed above. Contentful saves as you type, but saving is not publishing.

  3. Publish this entry

    Change status → Publish, top right. Until you do, the site keeps showing the previous published version.

  4. Publish anything new you linked

    If you added a card or a CTA, open each one and publish it too. A draft card is skipped silently — the section renders without it and nothing tells you why.

  5. Check the page

    Open the home page. Changes appear within about 30 seconds. If nothing changed, the usual cause is an unpublished entry.


Previous section

Meet our experts

Next section

Gift list band