Section reference › Utility pages

Error / 404 `"type": "error"`

A centred "page not found" screen with a big error code, message and buttons back to safety. Use it as the only section on 404.html.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "error",
  "code": "404",
  "title": "This page has moved out",
  "text": "The link may be old or mistyped. Try the homepage, or get in touch and we will point you in the right direction.",
  "buttons": [
    {
      "label": "Back to home",
      "href": "index.html",
      "style": "primary",
      "icon": "house"
    },
    {
      "label": "Contact us",
      "href": "contact.html",
      "style": "outline"
    }
  ]
}

Options#

Option	Type	Default	Description
`code`	string	`404`	The big number or word.
`title`	string	`Page not found`	Heading (the page's h1).
`text`	string	—	Short intro paragraph under the title.
`image`	string	—	Optional illustration above the code.
`buttons`	array	—	Buttons shown centred under the text. See the button fields below.

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

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#

Default padding is "lg".
Most web hosts show a file called 404.html automatically for missing pages; check your host's settings.

Where it's used#

Open these pages in template/ to see it working:

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

Error / 404 "type": "error"