UI Components

Every section a Puko site can use, rendered from the real blocks with sample copy. Open one to change its layout, palette, type and motion, and to see the structured data it tells search engines.

39 section types · 11 emit structured data · 5 motion profiles

New

Motion engine

One profile per site, chosen from its trade and its theme. Five ways a page can move, and a live demo of how the choice is made.

calmcrispwarmlivelyeditorial

Motion engine

5 profiles · resolver · live demo

New

Design controls

Ten dials with no pixels in them: rhythm, column width, type scale, buttons, alignment. Eight presets a page can wear, and any section can override any dial for itself.

standardeditorialproductboutiquecivicstudiogentledense

Design controls

10 dials · 8 presets · per-section overrides · live demo

View details

Hero

<section> · 20 layouts

View details

Services

<section> · 4 layouts · JSON-LD

View details

Our story

<article> · 3 layouts

View details

Milestones

<section> · 3 layouts · JSON-LD

View details

How it works

<section> · 4 layouts

View details

Team

<section> · 3 layouts · JSON-LD

View details

Trust signals

<aside> · 5 layouts

View details

Testimonials

<section> · 4 layouts

View details

FAQ

<section> · 3 layouts · JSON-LD

View details

Booking

<section> · 1 layout · JSON-LD · conversion

View details

Contact form

<section> · 2 layouts · conversion

Structured data

What is marked up, and what is not

Everything marked up is a fact the page already states visibly, in the same words. The business node carries what belongs to the business; an FAQPage, a Course or an Event stands on its own in the @graph, because Google reads those only as top-level entities.

Emitted

  • FAQFAQPage, one Question per answered item
  • Servicesan OfferCatalog of Service offers
  • Pricingan Offer per tier with a readable price
  • Menua Menu with MenuSections and priced MenuItems
  • Location & hoursOpeningHoursSpecification per day
  • Teameach person as an employee
  • Curriculuma Course with a Syllabus per module
  • Schedulean Event per class with its weekly Schedule
  • Galleryan ImageObject per photograph, with its caption
  • MilestonesfoundingDate, from the first milestone's year
  • Bookinga ReserveAction pointing at the booking section

Deliberately not

  • Testimonials

    Google does not show review rich results for reviews a business publishes about itself, and an AggregateRating built from three quotes an owner chose is the fabrication the generation rules forbid.

  • Trust signals

    For the same reason. “98% satisfaction” is a claim, not a datum.

  • How it works

    HowTo rich results were withdrawn in 2023, and a page about a dentist is not a how-to.