Section reference › Utility pages

Coming soon `"type": "coming-soon"`

A full-screen dark "launching soon" or maintenance screen with a background photo, countdown and an email sign-up field. Use it as the only section on its page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "coming-soon",
  "image": "placeholder",
  "eyebrow": "Opening spring 2027",
  "title": "Something fresh is baking",
  "text": "Our new bakery and coffee bar opens on Alder Street next March. Leave your email and we will send you a free pastry voucher for opening week.",
  "date": "2027-03-01T09:00:00",
  "note": "One email when we open. No spam, ever."
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	`We’re launching soon`	Big heading (the page's h1).
`text`	string	—	Short intro paragraph under the title.
`date`	string	—	Launch date and time for the countdown, e.g. "2027-03-01T09:00:00". Leave it out to hide the countdown.
`image`	string	—	Background photo.
`overlay`	number	`0.75`	Darkness of the layer over the photo, from 0 (none) to 1 (black).
`note`	string	—	Small print under the email field.
`action`	string	`site.json newsletterAction, then formAction`	Where the "Notify me" email is sent.

Tips#

This section ignores the common options (id, tone, padding, fluid, class); only "hidden" works. It is always dark and full screen.
The date is read in the visitor's own time zone. Add an offset for an exact moment, e.g. "2027-03-01T09:00:00-05:00". After the date passes the timer shows 00.
The "Notify me" form sends an "email" field to newsletterAction (or formAction) from site.json, or to "action" set on this section. Until one is set it shows a thank-you message.

Editing it in the HTML files#

The whole screen is section.sec-coming-soon. The countdown date is the data-countdown attribute of .countdown; change it there to move the launch.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/coming-soon.html (source src/demos/creative-agency/pages/coming-soon.json)
Corporate: template/corporate/coming-soon.html (source src/demos/corporate/pages/coming-soon.json)
Finance: template/finance/coming-soon.html (source src/demos/finance/pages/coming-soon.json)
Law Firm: template/law-firm/coming-soon.html (source src/demos/law-firm/pages/coming-soon.json)
SaaS Product: template/saas/coming-soon.html (source src/demos/saas/pages/coming-soon.json)
Mobile App: template/mobile-app/coming-soon.html (source src/demos/mobile-app/pages/coming-soon.json)
Tech Conference: template/conference/coming-soon.html (source src/demos/conference/pages/coming-soon.json)
Online Academy: template/education/coming-soon.html (source src/demos/education/pages/coming-soon.json)
Restaurant: template/restaurant/coming-soon.html (source src/demos/restaurant/pages/coming-soon.json)
Coffee Shop: template/cafe/coming-soon.html (source src/demos/cafe/pages/coming-soon.json)
Hotel & Resort: template/hotel/coming-soon.html (source src/demos/hotel/pages/coming-soon.json)
Wedding: template/wedding/coming-soon.html (source src/demos/wedding/pages/coming-soon.json)
Gym & Fitness: template/gym/coming-soon.html (source src/demos/gym/pages/coming-soon.json)
Yoga Studio: template/yoga/coming-soon.html (source src/demos/yoga/pages/coming-soon.json)
Day Spa & Salon: template/spa/coming-soon.html (source src/demos/spa/pages/coming-soon.json)
Medical Clinic: template/medical/coming-soon.html (source src/demos/medical/pages/coming-soon.json)
Dental Clinic: template/dental/coming-soon.html (source src/demos/dental/pages/coming-soon.json)
Pet Care: template/pet-care/coming-soon.html (source src/demos/pet-care/pages/coming-soon.json)
Construction: template/construction/coming-soon.html (source src/demos/construction/pages/coming-soon.json)
Car Dealer: template/car-dealer/coming-soon.html (source src/demos/car-dealer/pages/coming-soon.json)
Travel Agency: template/travel/coming-soon.html (source src/demos/travel/pages/coming-soon.json)
Photographer: template/photography/coming-soon.html (source src/demos/photography/pages/coming-soon.json)
Architecture Studio: template/architecture/coming-soon.html (source src/demos/architecture/pages/coming-soon.json)
Interior Design: template/interior-design/coming-soon.html (source src/demos/interior-design/pages/coming-soon.json)
Portfolio: template/portfolio/coming-soon.html (source src/demos/portfolio/pages/coming-soon.json)
Music Festival: template/music-festival/coming-soon.html (source src/demos/music-festival/pages/coming-soon.json)
Fashion Store: template/fashion-store/coming-soon.html (source src/demos/fashion-store/pages/coming-soon.json)
Charity: template/charity/coming-soon.html (source src/demos/charity/pages/coming-soon.json)
Logistics: template/logistics/coming-soon.html (source src/demos/logistics/pages/coming-soon.json)