---
title: Illustrative slate project Tide & Slate
description: A fictional project page showing how media and facts can work together.
---
<nav-split variant="static"><span slot="brand">Tide &amp; Slate</span><a slot="links" href="/">Home</a><a slot="links" href="/project">Project</a><a slot="actions" class="btn" href="tel:+12075550128">Call us</a></nav-split>
<hero-page><a slot="breadcrumb" href="/">Home</a><span slot="breadcrumb" aria-current="page">Project</span><p slot="eyebrow" class="eyebrow eyebrow--accent">Illustrative project | fictional</p><h1>A coastal slate roof, from detail to whole.</h1><p slot="intro" class="lede">A project page should show the work, explain relevant choices, and distinguish observed facts from sales language.</p><div slot="media"><img src="/media/teaching/slate-roof-finished.webp" alt="Synthetic teaching image of the full roof on a coastal house" width="1536" height="1024" fetchpriority="high"></div></hero-page>
<project-evidence><p slot="eyebrow" class="eyebrow eyebrow--accent">Closer view</p><h2 slot="heading">The material at the point of installation.</h2><p slot="summary" class="lede">A detailed image lets the visitor inspect texture and method. The copy should explain what is visible rather than claim a result the image cannot prove.</p><img slot="media" src="/media/teaching/slate-roof-work.webp" alt="Synthetic teaching image of roofers positioning slate tiles" width="1536" height="1024" loading="lazy"><span slot="caption">Synthetic teaching image showing slate placement. It is not a real job record.</span><div slot="facts"><dt>Visible material</dt><dd>Slate tiles</dd></div><div slot="facts"><dt>Visible work</dt><dd>Tile positioning</dd></div></project-evidence>
<specification-ledger><p slot="eyebrow" class="eyebrow eyebrow--accent">What to ask</p><h2 slot="heading">Questions behind a material choice.</h2><p slot="intro" class="lede">This list is a conversation guide, not a specification for a real roof.</p><div slot="items"><dt>Pitch</dt><dd>How does the roof geometry affect the suitable system?</dd></div><div slot="items"><dt>Substrate</dt><dd>What existing conditions need inspection before work is scoped?</dd></div><div slot="items"><dt>Detailing</dt><dd>How will edges, valleys, and penetrations be handled?</dd></div></specification-ledger>
<contact-phone-first><p slot="eyebrow" class="eyebrow eyebrow--accent">Discuss the work</p><h2 slot="heading">Have a roof in mind?</h2><p slot="intro" class="lede">A real project page would link to the business's actual assessment process.</p><div slot="phone"><p class="eyebrow">Fictional example number</p><a href="tel:+12075550128">(207) 555-0128</a></div><p slot="details">Teaching example only; no service is offered at this number.</p></contact-phone-first>
<footer-compact><span slot="brand">Tide &amp; Slate | fictional example</span><a slot="links" href="/">Home</a><a slot="legal" href="/cookie-compliance">Cookie compliance</a><span slot="legal">Synthetic images and fictional business details for teaching only.</span></footer-compact>