Skip to content
Layouts
On this page
  1. Pricing
  2. Links
  3. Contact
  4. Brand
Page actions

Marketing pages

These layouts build the pages around a product: what it does, what it costs, where to get it, how to show it and how to reach you. They load modootoday-marketing.css only on their own pages and add no JavaScript. Every layout reads a title, a description: (the lead) and optional actions: [{label, url}] buttons.

Layout Front matter Structured data Demo
feature features: [{title, text}], cta WebPage Feature
pricing plans, currency WebPage Pricing
download version, date, downloads: [{label, url, size, checksum}] WebPage Download
brand colors: [{name, hex}], assets: [{label, url, format}] WebPage Brand
links image, name, links: [{label, url}] ProfilePage Links
contact contacts: [{label, value, url}], form: {action, fields} ContactPage Contact

For product data, add a schema: map (for example type: SoftwareApplication with offers) and the page prints it as the main entity.

Pricing

---
layout: pricing
currency: $
plans:
  - {name: Free, monthly: 0, yearly: 0, features: [One site]}
  - {name: Team, monthly: 12, yearly: 120, recommended: true, features: [Ten sites, Support], cta: {label: Choose Team, url: /buy/}}
---

Plan cards use the pricing component styles. When plans have yearly, a Monthly/Yearly switch made of two radio buttons changes the prices with CSS alone. Set yearly on every plan or none; only one plan can be recommended, and it is labelled in text.

A link page has no site header. links: become large buttons; their full URLs become sameAs of the Person (or profile: organization) in the ProfilePage data.

Contact

---
layout: contact
contacts:
  - {label: Email, value: hello@example.com, url: "mailto:hello@example.com"}
form:
  action: https://forms.example.com/your-form   # an external form service; https only
  fields: [name, email, message]
---

GitHub Pages cannot receive form posts, so the form appears only when form.action is set. Every field has a visible label and autocomplete.

Brand

Swatches are SVG fills, so the page needs no inline style under a strict Content Security Policy, and each color also shows its hex code as text. modootoday-check reports a color that is not #rgb or #rrggbb.

Edit this page