[
  {
    "Surface": "article",
    "Title": "Choose a blog layout for the reader’s job",
    "Description": "An authored guide to Quill blog layouts, themes and portable HTML delivery.",
    "Layout": "guide",
    "Theme": "botanical",
    "File": "quill-web-article.html",
    "Body": "<p>A blog layout sets the reading structure; a theme sets its visual treatment. Decide what the reader needs to do before choosing either.</p>\n<h2 id=\"choose\">Choose the structure for the reading task</h2>\n<p>Start with Reader for a continuous argument. Use Guide when readers need to jump between instructions, or Report when a summary and a comparison table carry the story.</p>\n<table><thead><tr><th>Layout</th><th>When to use it</th></tr></thead><tbody><tr><td>Reader</td><td>A focused, centered reading column.</td></tr><tr><td>Editorial</td><td>An asymmetric opening and ruled sections.</td></tr><tr><td>Magazine</td><td>A wide featured image and a large headline.</td></tr><tr><td>Guide</td><td>Section navigation alongside a longer article.</td></tr><tr><td>Report</td><td>A summary panel with room for data.</td></tr><tr><td>Case Study</td><td>A split opening and clear section hierarchy.</td></tr></tbody></table>\n<h2 id=\"theme\">Choose the theme separately</h2><p>Keep the structure while comparing typography, colors and surfaces. This sample uses the Guide layout with Botanical: forest green, cream and a quiet reading column. A theme change does not rewrite the article.</p>\n<blockquote>Test the same content at desktop and phone widths. The heading, link and table should still be easy to find.</blockquote>\n<h2 id=\"download\">Download and inspect the actual file</h2><ol><li>Open the saved article's export workspace.</li><li>Choose Web article layouts &amp; themes (HTML).</li><li>Preview a layout and theme, then download the web article.</li><li>Open the HTML in a browser. Follow the section links, inspect the table and read at phone width.</li></ol>\n<h2 id=\"delivery\">Choose the delivery format</h2><p>Responsive HTML reflows with the browser. A PDF fixes the page geometry, while Word is intended for document editing. Deliver the format the recipient needs.</p><p>The HTML includes publication CSS and selected fonts. Source images, when used, retain hosted URLs. Uploading a file does not configure hosting, analytics, canonical URLs or a sitemap for another site.</p>\n<h2 id=\"scope\">About this example</h2><p>This is an authored instructional article exported with Quill's actual HTML renderer. It demonstrates layout and delivery; it is not an AI-generated customer article or evidence of delivery to an external CMS.</p><p><a href=\"https://gixo.ai/guide/exporting#quill-web-export\">Read the export walkthrough</a> or <a href=\"https://gixo.ai/quill/examples#web-publication-samples\">compare the blog and webpage examples</a>.</p>"
  },
  {
    "Surface": "page",
    "Title": "Fieldnote Workshop — a Quill webpage example",
    "Description": "A fictional workshop page showing Quill Bento composition and Heritage theme.",
    "Layout": "bento",
    "Theme": "heritage",
    "File": "quill-webpage.html",
    "Body": "<div class=\"wp-module wp-module-header\" id=\"header\" data-module=\"header\"><div class=\"wp-header-inner\"><a class=\"wp-logo\" href=\"#hero\">Fieldnote Workshop</a><nav class=\"wp-nav\" aria-label=\"Page sections\"><ul class=\"wp-nav-links\"><li><a href=\"#feature-grid\">The session</a></li><li><a href=\"#faq\">Questions</a></li></ul></nav></div></div>\n<div class=\"wp-module wp-module-hero\" id=\"hero\" data-module=\"hero\"><div class=\"wp-hero-inner\"><h1 class=\"wp-hero-title\">Turn a messy brief into a clear reading experience.</h1><p class=\"wp-hero-subhead\">A fictional editorial workshop used to demonstrate a responsive Quill webpage. No booking or submission service is connected.</p><div class=\"wp-hero-actions\"><a class=\"wp-btn wp-btn-primary\" href=\"#feature-grid\">Explore the session</a></div></div></div>\n<div class=\"wp-module wp-module-value-proposition\" id=\"value-proposition\" data-module=\"value-proposition\"><div class=\"wp-value-inner\"><h2 class=\"wp-section-title\">Start with the reader's next decision.</h2><p class=\"wp-value-body\">Work through one supplied brief, a page outline and an export checklist. Keep the wording visible while comparing composition, spacing and theme.</p></div></div>\n<div class=\"wp-module wp-module-feature-grid\" id=\"feature-grid\" data-module=\"feature-grid\"><div class=\"wp-feature-inner\"><h2 class=\"wp-section-title\">Three practical exercises</h2><div class=\"wp-feature-grid\"><article class=\"wp-feature-card\"><h3 class=\"wp-feature-title\">Clarify the brief</h3><p class=\"wp-feature-body\">Identify the reader, the question and the evidence needed for a useful answer.</p></article><article class=\"wp-feature-card\"><h3 class=\"wp-feature-title\">Arrange the sections</h3><p class=\"wp-feature-body\">Give each heading a job. Keep the action close to the explanation that supports it.</p></article><article class=\"wp-feature-card\"><h3 class=\"wp-feature-title\">Inspect the HTML</h3><p class=\"wp-feature-body\">Open the actual file at phone width, use its section links and review the final wording.</p></article></div></div></div>\n<div class=\"wp-module wp-module-faq\" id=\"faq\" data-module=\"faq\"><div class=\"wp-faq-inner\"><h2 class=\"wp-section-title\">Before you use this sample</h2><details class=\"wp-faq-item\"><summary class=\"wp-faq-question\">Can I book a real session here?</summary><div class=\"wp-faq-answer\"><p>No. Fieldnote Workshop is a fictional source example. The links only move between sections in this file.</p></div></details><details class=\"wp-faq-item\"><summary class=\"wp-faq-question\">What was actually exported?</summary><div class=\"wp-faq-answer\"><p>The Quill webpage exporter produced this HTML using the Bento composition, Heritage theme, embedded fonts and production styles.</p></div></details></div></div>"
  }
]