domma-cms 1.8.44 → 1.8.45

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.8.45] - 2026-10-23
+
+- Include a free library of 16 editable `domma-block-*` Custom Blocks with every site: introductions, image/text sections, features, services, testimonials, figures, steps, FAQs, contact details, pricing, team profiles, images, logos and calls to action. Each includes scoped responsive styling and examples. Startup adds missing blocks while preserving site customisations.
+
 ## [1.8.44] - 2026-10-23
 
 - **Blocks with empty fields no longer show raw HTML.** A block placeholder on its own line with nothing to fill it (`{{bio}}` when there is no bio) left a blank line, which ended the block's HTML in the Markdown, and what followed showed on the page as code - the About page's team card printed its contact links as raw tags. Such a line is now dropped when it fills empty (`fillTemplateLines()` in `markdown.js`), for collection displays and block short tags alike; a template's own blank lines stay, since they are how it hands a Markdown value to marked.

package/admin/js/templates/docs/usage-blocks.html

@@ -16,6 +16,35 @@
         <code>&lt;name&gt;.html</code> holds the template, <code>&lt;name&gt;.css</code> its styles (optional) and
         <code>&lt;name&gt;.meta.json</code> its project and bundled flag (optional).</p>
 
+      <h3>A free library to start your site</h3>
+      <p>Every site includes 16 editable <code>domma-block-*</code> blocks. Search for
+        <code>domma-block-</code> in Blocks or use <strong>Add block</strong> in the editor.
+        Each includes its own styling, documented parameters and an example to copy.</p>
+      <table class="table table-sm"><thead><tr><th>Block</th><th>Use it for</th></tr></thead><tbody>
+        <tr><td><code>domma-block-banner</code></td><td>A photo banner with a readable overlay across its left half.</td></tr>
+        <tr><td><code>domma-block-split</code></td><td>An image beside a section heading and introduction.</td></tr>
+        <tr><td><code>domma-block-cta</code></td><td>A welcoming call to action using your site theme.</td></tr>
+        <tr><td><code>domma-block-hero</code></td><td>A centred page introduction with an optional button.</td></tr>
+        <tr><td><code>domma-block-text</code></td><td>A readable text section for your story or an introduction.</td></tr>
+        <tr><td><code>domma-block-features</code></td><td>An introduction and up to three feature cards.</td></tr>
+        <tr><td><code>domma-block-service-card</code></td><td>A reusable service card with an optional photo and button.</td></tr>
+        <tr><td><code>domma-block-testimonial</code></td><td>A customer quotation with an optional attribution.</td></tr>
+        <tr><td><code>domma-block-stats</code></td><td>Up to three useful figures with clear labels.</td></tr>
+        <tr><td><code>domma-block-steps</code></td><td>A clear, numbered process with up to three steps.</td></tr>
+        <tr><td><code>domma-block-faq</code></td><td>Up to three questions and answers, readable without JavaScript.</td></tr>
+        <tr><td><code>domma-block-contact</code></td><td>Contact details, an address and opening hours.</td></tr>
+        <tr><td><code>domma-block-pricing-card</code></td><td>A clear price or package card with an optional enquiry button.</td></tr>
+        <tr><td><code>domma-block-team-card</code></td><td>A team member photo, role and short introduction.</td></tr>
+        <tr><td><code>domma-block-image</code></td><td>An uncropped image with an optional caption.</td></tr>
+        <tr><td><code>domma-block-logos</code></td><td>A responsive row of up to four organisation logos.</td></tr>
+      </tbody></table>
+      <p>Start with a banner or hero, add sections and cards, then finish with a call to action.
+        Change the text and choose your own pictures from Media. Use one main heading per page.
+        Leave optional buttons and unused feature, FAQ, step, figure or logo slots empty to hide them.</p>
+      <pre><code>[domma-block-hero header="Welcome to our business" blurb="A short introduction to what we do." link="/contact" label="Get in touch" /]</code></pre>
+      <p>Blocks follow your theme and adapt to smaller screens. You can edit or duplicate them;
+        updates add missing library files without replacing your existing customisations.</p>
+
       <h3>Three ways to place a block</h3>
       <table class="table table-sm">
         <thead>

package/docs/starter-blocks.md

@@ -0,0 +1,203 @@
+# Domma block library
+
+Sixteen free, editable Custom Blocks come with every Domma CMS site. There is
+no extra licence or plugin to install. Search for `domma-block-` in **Blocks**
+or in the editor's **Add block** menu. Each block includes its own scoped CSS,
+a copyable example and documented parameters.
+
+## Choose a block
+
+| Block | Use it for |
+| --- | --- |
+| `domma-block-banner` | A photo banner with a readable overlay across its left half. |
+| `domma-block-split` | An image beside a section heading and introduction. |
+| `domma-block-cta` | A welcoming call to action using your site theme. |
+| `domma-block-hero` | A centred page introduction with an optional button. |
+| `domma-block-text` | A readable text section for your story or an introduction. |
+| `domma-block-features` | An introduction and up to three feature cards. |
+| `domma-block-service-card` | A reusable service card with an optional photo and button. |
+| `domma-block-testimonial` | A customer quotation with an optional attribution. |
+| `domma-block-stats` | Up to three useful figures with clear labels. |
+| `domma-block-steps` | A clear, numbered process with up to three steps. |
+| `domma-block-faq` | Up to three questions and answers, readable without JavaScript. |
+| `domma-block-contact` | Contact details, an address and opening hours. |
+| `domma-block-pricing-card` | A clear price or package card with an optional enquiry button. |
+| `domma-block-team-card` | A team member photo, role and short introduction. |
+| `domma-block-image` | An uncropped image with an optional caption. |
+| `domma-block-logos` | A responsive row of up to four organisation logos. |
+
+## Make it yours
+
+Replace example picture addresses with images from your Media library. Headings,
+introductions and other text parameters accept plain text. Use `alt` to describe
+an image, or leave it empty when the image is decorative. Add both `link` and
+`label` for a button; omit them to hide it. Unused feature, step, FAQ, figure and
+logo slots are hidden automatically.
+
+The banner and hero use an `h1` main heading. Choose one for each page; the other
+sections use `h2` headings, and individual service, team and price cards use
+`h3`. Place cards below a section heading. Image and card blocks can also go
+inside your usual grid or column shortcodes.
+
+All blocks adapt to smaller screens, use your site's theme where appropriate,
+and work without the Domma marketing stylesheet. FAQ questions and answers stay
+readable without JavaScript. Contact email and phone links
+open the visitor's usual apps. Prices are display text, so include your currency,
+billing period and any tax wording explicitly. Use your own real figures,
+approved customer quotes and organisation logos.
+
+Edit or duplicate a block to change its design. The CMS adds missing library
+files on startup and preserves existing HTML, CSS and metadata files. Existing
+sites receive new blocks when they upgrade to a CMS version that includes them.
+
+## Copy an example
+
+### domma-block-banner
+
+A photo banner with a readable overlay across its left half.
+
+```text
+[domma-block-banner header="A little guidance, or a helping hand." blurb="Find an answer, learn something new or get in touch." image="/media/banner.jpg" alt="People working together at a laptop" link="/contact" label="Get in touch" /]
+```
+
+### domma-block-split
+
+An image beside a section heading and introduction.
+
+```text
+[domma-block-split header="Made for your business" blurb="Tell visitors how you can help." image="/media/about.jpg" alt="Our workspace" link="/about" label="Meet us" /]
+```
+
+### domma-block-cta
+
+A welcoming call to action using your site theme.
+
+```text
+[domma-block-cta header="Have something in mind?" blurb="Tell us a little about your plans." link="/contact" label="Let us help" /]
+```
+
+### domma-block-hero
+
+A centred page introduction with an optional button.
+
+```text
+[domma-block-hero header="Welcome to your next chapter" blurb="Say what you do and who you help." link="/contact" label="Let us help" /]
+```
+
+### domma-block-text
+
+A readable text section for your story or an introduction.
+
+```text
+[domma-block-text header="Our story" blurb="Share a little about your business and the people behind it." /]
+```
+
+### domma-block-features
+
+An introduction and up to three feature cards.
+
+```text
+[domma-block-features header="How we help" blurb="Practical support for your business." title1="Plan" text1="Find the right direction." title2="Build" text2="Bring your ideas to life." title3="Grow" text3="Keep moving forward." /]
+```
+
+### domma-block-service-card
+
+A reusable service card with an optional photo and button.
+
+```text
+[domma-block-service-card header="Your service" blurb="Explain the benefit in a sentence or two." link="/services" label="Find out more" /]
+```
+
+### domma-block-testimonial
+
+A customer quotation with an optional attribution.
+
+```text
+[domma-block-testimonial quote="Replace this with a customer quotation you have permission to share." name="Customer name" detail="Business or role" /]
+```
+
+### domma-block-stats
+
+Up to three useful figures with clear labels.
+
+```text
+[domma-block-stats header="A few useful facts" value1="Your figure" label1="Explain what it represents" /]
+```
+
+### domma-block-steps
+
+A clear, numbered process with up to three steps.
+
+```text
+[domma-block-steps header="Getting started" blurb="A simple way forward." title1="Say hello" text1="Tell us what you need." title2="Make a plan" text2="Agree the details together." title3="Get going" text3="Put your plan into action." /]
+```
+
+### domma-block-faq
+
+Up to three questions and answers, readable without JavaScript.
+
+```text
+[domma-block-faq header="A few common questions" question1="How do we get started?" answer1="Get in touch and tell us what you have in mind." question2="Can I ask a question first?" answer2="Of course. We are happy to help." /]
+```
+
+### domma-block-contact
+
+Contact details, an address and opening hours.
+
+```text
+[domma-block-contact header="Get in touch" blurb="Tell us how we can help." email="hello@example.com" phone="+44 1234 567890" address="Your business address" hours="Your opening hours" /]
+```
+
+### domma-block-pricing-card
+
+A clear price or package card with an optional enquiry button.
+
+```text
+[domma-block-pricing-card header="Your package" price="Ask for a quote" blurb="Describe exactly what is included." link="/contact" label="Talk it through" /]
+```
+
+### domma-block-team-card
+
+A team member photo, role and short introduction.
+
+```text
+[domma-block-team-card name="Team member" role="Role or specialism" blurb="A short, friendly introduction." image="/media/team-member.jpg" alt="Portrait of your team member" /]
+```
+
+### domma-block-image
+
+An uncropped image with an optional caption.
+
+```text
+[domma-block-image image="/media/your-work.jpg" alt="Describe what visitors can see" caption="Add a little context to the image." /]
+```
+
+### domma-block-logos
+
+A responsive row of up to four organisation logos.
+
+```text
+[domma-block-logos header="Who we work with" image1="/media/partner-logo.svg" alt1="Partner name" /]
+```
+
+## Blocks in headers, footers and menus
+
+The running CMS already supports custom blocks in **Site Settings > Footer**.
+The selected blocks appear above the standard footer menus. Each footer entry
+is a block name, without per-placement parameters, so duplicate a starter block
+and replace its placeholders with your site's details before selecting it there.
+
+A custom block can also contain a menu shortcode, for example:
+
+```text
+[menu location="footer-primary" /]
+```
+
+Keep navigation links in Menus so visibility, nesting and current-page behaviour
+continue to come from the menu system. A block can supply the surrounding layout.
+
+Header block slots would be a useful next step: a shared announcement bar,
+contact strip or branded header around the existing navigation. They are a
+proposed extension, not part of this library change. Replacing the full navigation
+would also need to retain mobile controls, keyboard access and the visitor's
+current-page indication.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.8.44",
+  "version": "1.8.45",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/server/blocks/catalog.json

@@ -0,0 +1,98 @@
+[
+    {
+        "name": "domma-block-banner",
+        "category": "introductions",
+        "description": "A photo banner with a readable overlay across its left half.",
+        "example": "[domma-block-banner header=\"A little guidance, or a helping hand.\" blurb=\"Find an answer, learn something new or get in touch.\" image=\"/media/banner.jpg\" alt=\"People working together at a laptop\" link=\"/contact\" label=\"Get in touch\" /]"
+    },
+    {
+        "name": "domma-block-split",
+        "category": "content",
+        "description": "An image beside a section heading and introduction.",
+        "example": "[domma-block-split header=\"Made for your business\" blurb=\"Tell visitors how you can help.\" image=\"/media/about.jpg\" alt=\"Our workspace\" link=\"/about\" label=\"Meet us\" /]"
+    },
+    {
+        "name": "domma-block-cta",
+        "category": "conversion",
+        "description": "A welcoming call to action using your site theme.",
+        "example": "[domma-block-cta header=\"Have something in mind?\" blurb=\"Tell us a little about your plans.\" link=\"/contact\" label=\"Let us help\" /]"
+    },
+    {
+        "name": "domma-block-hero",
+        "category": "introductions",
+        "description": "A centred page introduction with an optional button.",
+        "example": "[domma-block-hero header=\"Welcome to your next chapter\" blurb=\"Say what you do and who you help.\" link=\"/contact\" label=\"Let us help\" /]"
+    },
+    {
+        "name": "domma-block-text",
+        "category": "content",
+        "description": "A readable text section for your story or an introduction.",
+        "example": "[domma-block-text header=\"Our story\" blurb=\"Share a little about your business and the people behind it.\" /]"
+    },
+    {
+        "name": "domma-block-features",
+        "category": "services",
+        "description": "An introduction and up to three feature cards.",
+        "example": "[domma-block-features header=\"How we help\" blurb=\"Practical support for your business.\" title1=\"Plan\" text1=\"Find the right direction.\" title2=\"Build\" text2=\"Bring your ideas to life.\" title3=\"Grow\" text3=\"Keep moving forward.\" /]"
+    },
+    {
+        "name": "domma-block-service-card",
+        "category": "services",
+        "description": "A reusable service card with an optional photo and button.",
+        "example": "[domma-block-service-card header=\"Your service\" blurb=\"Explain the benefit in a sentence or two.\" link=\"/services\" label=\"Find out more\" /]"
+    },
+    {
+        "name": "domma-block-testimonial",
+        "category": "trust",
+        "description": "A customer quotation with an optional attribution.",
+        "example": "[domma-block-testimonial quote=\"Replace this with a customer quotation you have permission to share.\" name=\"Customer name\" detail=\"Business or role\" /]"
+    },
+    {
+        "name": "domma-block-stats",
+        "category": "trust",
+        "description": "Up to three useful figures with clear labels.",
+        "example": "[domma-block-stats header=\"A few useful facts\" value1=\"Your figure\" label1=\"Explain what it represents\" /]"
+    },
+    {
+        "name": "domma-block-steps",
+        "category": "services",
+        "description": "A clear, numbered process with up to three steps.",
+        "example": "[domma-block-steps header=\"Getting started\" blurb=\"A simple way forward.\" title1=\"Say hello\" text1=\"Tell us what you need.\" title2=\"Make a plan\" text2=\"Agree the details together.\" title3=\"Get going\" text3=\"Put your plan into action.\" /]"
+    },
+    {
+        "name": "domma-block-faq",
+        "category": "support",
+        "description": "Up to three questions and answers, readable without JavaScript.",
+        "example": "[domma-block-faq header=\"A few common questions\" question1=\"How do we get started?\" answer1=\"Get in touch and tell us what you have in mind.\" question2=\"Can I ask a question first?\" answer2=\"Of course. We are happy to help.\" /]"
+    },
+    {
+        "name": "domma-block-contact",
+        "category": "support",
+        "description": "Contact details, an address and opening hours.",
+        "example": "[domma-block-contact header=\"Get in touch\" blurb=\"Tell us how we can help.\" email=\"hello@example.com\" phone=\"+44 1234 567890\" address=\"Your business address\" hours=\"Your opening hours\" /]"
+    },
+    {
+        "name": "domma-block-pricing-card",
+        "category": "services",
+        "description": "A clear price or package card with an optional enquiry button.",
+        "example": "[domma-block-pricing-card header=\"Your package\" price=\"Ask for a quote\" blurb=\"Describe exactly what is included.\" link=\"/contact\" label=\"Talk it through\" /]"
+    },
+    {
+        "name": "domma-block-team-card",
+        "category": "trust",
+        "description": "A team member photo, role and short introduction.",
+        "example": "[domma-block-team-card name=\"Team member\" role=\"Role or specialism\" blurb=\"A short, friendly introduction.\" image=\"/media/team-member.jpg\" alt=\"Portrait of your team member\" /]"
+    },
+    {
+        "name": "domma-block-image",
+        "category": "content",
+        "description": "An uncropped image with an optional caption.",
+        "example": "[domma-block-image image=\"/media/your-work.jpg\" alt=\"Describe what visitors can see\" caption=\"Add a little context to the image.\" /]"
+    },
+    {
+        "name": "domma-block-logos",
+        "category": "trust",
+        "description": "A responsive row of up to four organisation logos.",
+        "example": "[domma-block-logos header=\"Who we work with\" image1=\"/media/partner-logo.svg\" alt1=\"Partner name\" /]"
+    }
+]

package/server/blocks/domma-block-banner.css

@@ -0,0 +1,65 @@
+.db-banner {
+    margin-block: 1.5rem;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: #152832;
+    color: #fff;
+}
+.db-banner-image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.db-banner-image[src=""], .db-banner-image:not([src]) { display: none; }
+.db-banner-panel {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    width: 50%;
+    min-height: 30rem;
+    padding: clamp(1.5rem, 4vw, 3.5rem);
+    background: rgb(13 30 40 / 92%);
+}
+.db-banner-heading {
+    margin: 0 0 1.25rem;
+    color: #fff;
+    font-size: clamp(2rem, 3.5vw, 3.25rem);
+    line-height: 1.12;
+    letter-spacing: -.02em;
+    overflow-wrap: anywhere;
+}
+.db-banner-blurb {
+    margin: 0;
+    color: #fff;
+    font-size: 1.1rem;
+    line-height: 1.7;
+    overflow-wrap: anywhere;
+    white-space: pre-line;
+}
+.db-banner a.db-banner-link {
+    display: inline-flex;
+    margin-top: 1.75rem;
+    padding: .8rem 1.3rem;
+    border: 2px solid #fff;
+    border-radius: var(--dm-radius, .5rem);
+    background: #fff;
+    color: #152832;
+    font-weight: 600;
+    line-height: 1.4;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+}
+.db-banner a.db-banner-link:hover { background: #e8f1f5; color: #152832; }
+.db-banner a.db-banner-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
+.db-banner a.db-banner-link[href=""], .db-banner a.db-banner-link:not([href]), .db-banner a.db-banner-link:empty { display: none; }
+@media (max-width: 767px) {
+    .db-banner-image { position: relative; display: block; height: 15rem; }
+    .db-banner-panel { width: 100%; min-height: 0; padding: 1.75rem; }
+}

package/server/blocks/domma-block-banner.html

@@ -0,0 +1,22 @@
+<!--
+  domma-block-banner - A photo banner with a readable overlay across its left half.
+
+  Parameters:
+    header - Main page heading (h1; use once per page)
+    blurb  - Short introduction, as plain text
+    image  - Image address from your media library
+    alt    - Description of the image; leave empty for a decorative photo
+    link   - Optional button destination
+    label  - Optional button text
+
+  Example:
+    [domma-block-banner header="A little guidance, or a helping hand." blurb="Find an answer, learn something new or get in touch." image="/media/banner.jpg" alt="People working together at a laptop" link="/contact" label="Get in touch" /]
+-->
+<section class="db-banner">
+  <img class="db-banner-image" src="{{image}}" alt="{{alt}}" fetchpriority="high">
+  <div class="db-banner-panel">
+    <h1 class="db-banner-heading">{{header}}</h1>
+    <p class="db-banner-blurb">{{blurb}}</p>
+    <a class="db-banner-link db-banner-btn" href="{{link}}">{{label}}</a>
+  </div>
+</section>

package/server/blocks/domma-block-banner.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "introductions"
+    ]
+}

package/server/blocks/domma-block-contact.css

@@ -0,0 +1,18 @@
+.db-contact {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-contact-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-contact-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-contact-blurb:empty { display: none; }
+.db-contact-details { display: grid; gap: .75rem; margin-top: 1.5rem; font-style: normal; line-height: 1.7; }
+.db-contact-details p, .db-contact-hours { margin: 0; white-space: pre-line; line-height: 1.7; }
+.db-contact-hours { margin-top: 1rem; }
+.db-contact-link { justify-self: start; }
+.db-contact-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-contact-link:not([href]), .db-contact-link[href="mailto:"], .db-contact-link[href="tel:"], .db-contact-details p:empty, .db-contact-hours:empty { display: none; }

package/server/blocks/domma-block-contact.html

@@ -0,0 +1,15 @@
+<!--
+  domma-block-contact - Contact details, an address and opening hours.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    email - Email address
+    phone - Phone number, including country code when useful
+    address - Postal address, as plain text
+    hours - Opening hours, as plain text
+
+  Example:
+    [domma-block-contact header="Get in touch" blurb="Tell us how we can help." email="hello@example.com" phone="+44 1234 567890" address="Your business address" hours="Your opening hours" /]
+-->
+<section class="db-contact"><h2 class="db-contact-heading">{{header}}</h2><p class="db-contact-blurb">{{blurb}}</p><address class="db-contact-details"><a class="db-contact-link" href="mailto:{{email}}">{{email}}</a><a class="db-contact-link" href="tel:{{phone}}">{{phone}}</a><p>{{address}}</p></address><p class="db-contact-hours">{{hours}}</p></section>

package/server/blocks/domma-block-contact.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "support"
+    ]
+}

package/server/blocks/domma-block-cta.css

@@ -0,0 +1,8 @@
+.db-cta {
+    margin-block: 1.5rem; padding: clamp(2rem, 5vw, 4rem) 1.5rem; border: 1px solid var(--dm-card-border, #d5e0e5); border-radius: var(--dm-radius-xl, 1rem); background: var(--dm-card-bg, #f4f8fa); color: var(--dm-text, #152832); text-align: center; }
+.db-cta-heading { margin: 0 auto 1rem; max-width: 48rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; color: inherit; overflow-wrap: anywhere; }
+.db-cta-blurb { margin: 0 auto; max-width: 42rem; font-size: 1.1rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
+.db-cta a.db-cta-link { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
+.db-cta a.db-cta-link:hover { text-decoration: underline; }
+.db-cta a.db-cta-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-cta a.db-cta-link[href=""], .db-cta a.db-cta-link:not([href]), .db-cta a.db-cta-link:empty { display: none; }

package/server/blocks/domma-block-cta.html

@@ -0,0 +1,17 @@
+<!--
+  domma-block-cta - A welcoming call to action using your site's theme colours.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb  - Short invitation, as plain text
+    link   - Button destination
+    label  - Button text
+
+  Example:
+    [domma-block-cta header="Have something in mind?" blurb="Tell us a little about your plans." link="/contact" label="Let us help" /]
+-->
+<section class="db-cta">
+  <h2 class="db-cta-heading">{{header}}</h2>
+  <p class="db-cta-blurb">{{blurb}}</p>
+  <a class="db-cta-link db-cta-btn" href="{{link}}">{{label}}</a>
+</section>

package/server/blocks/domma-block-cta.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "conversion"
+    ]
+}

package/server/blocks/domma-block-faq.css

@@ -0,0 +1,13 @@
+.db-faq {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-faq-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-faq-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-faq-blurb:empty { display: none; }
+.db-faq-list { display: grid; gap: .75rem; margin: 1.5rem 0 0; }
+.db-faq-item { border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5)); border-radius: var(--dm-radius, .5rem); background: var(--dm-card-bg, var(--dm-surface, #f5f8fa)); }
+.db-faq-item dt { padding: 1.25rem; font-weight: 600; line-height: 1.5; }
+.db-faq-item dd { margin: 0; padding: 0 1.25rem 1.25rem; line-height: 1.75; white-space: pre-line; }
+.db-faq-item:has(dt:empty) { display: none; }

package/server/blocks/domma-block-faq.html

@@ -0,0 +1,17 @@
+<!--
+  domma-block-faq - Up to three questions and answers, readable without JavaScript.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    question1 - Question 1
+    answer1 - Answer 1, as plain text
+    question2 - Question 2
+    answer2 - Answer 2, as plain text
+    question3 - Question 3
+    answer3 - Answer 3, as plain text
+
+  Example:
+    [domma-block-faq header="A few common questions" question1="How do we get started?" answer1="Get in touch and tell us what you have in mind." question2="Can I ask a question first?" answer2="Of course. We are happy to help." /]
+-->
+<section class="db-faq"><h2 class="db-faq-heading">{{header}}</h2><p class="db-faq-blurb">{{blurb}}</p><dl class="db-faq-list"><div class="db-faq-item"><dt>{{question1}}</dt><dd>{{answer1}}</dd></div><div class="db-faq-item"><dt>{{question2}}</dt><dd>{{answer2}}</dd></div><div class="db-faq-item"><dt>{{question3}}</dt><dd>{{answer3}}</dd></div></dl></section>

package/server/blocks/domma-block-faq.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "support"
+    ]
+}

package/server/blocks/domma-block-features.css

@@ -0,0 +1,18 @@
+.db-features {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-features-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-features-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-features-blurb:empty { display: none; }
+.db-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
+.db-features-card {
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-features-card h3 { margin: 0 0 .75rem; color: inherit; font-size: 1.25rem; }
+.db-features-card p { margin: 0; line-height: 1.7; white-space: pre-line; }
+.db-features-card:has(h3:empty) { display: none; }

package/server/blocks/domma-block-features.html

@@ -0,0 +1,19 @@
+<!--
+  domma-block-features - An introduction and up to three feature cards.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    title1 - Feature 1 heading
+    text1 - Feature 1 description
+    title2 - Feature 2 heading
+    text2 - Feature 2 description
+    title3 - Feature 3 heading
+    text3 - Feature 3 description
+
+  Example:
+    [domma-block-features header="How we help" blurb="Practical support for your business." title1="Plan" text1="Find the right direction." title2="Build" text2="Bring your ideas to life." title3="Grow" text3="Keep moving forward." /]
+-->
+<section class="db-features"><h2 class="db-features-heading">{{header}}</h2><p class="db-features-blurb">{{blurb}}</p><div class="db-features-grid"><article class="db-features-card"><h3>{{title1}}</h3><p>{{text1}}</p></article>
+<article class="db-features-card"><h3>{{title2}}</h3><p>{{text2}}</p></article>
+<article class="db-features-card"><h3>{{title3}}</h3><p>{{text3}}</p></article></div></section>

package/server/blocks/domma-block-features.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "services"
+    ]
+}

package/server/blocks/domma-block-hero.css

@@ -0,0 +1,15 @@
+.db-hero {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    padding: clamp(2rem, 6vw, 5rem) 1.25rem; text-align: center;
+}
+.db-hero-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-hero-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-hero-blurb:empty { display: none; }
+.db-hero-heading { max-width: 54rem; margin-inline: auto; font-size: clamp(2rem, 5vw, 4rem); }
+.db-hero-blurb { max-width: 42rem; margin-inline: auto; font-size: 1.15rem; }
+.db-hero a.db-hero-link { display: inline-block; max-width: 100%; box-sizing: border-box; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; line-height: 1.4; }
+.db-hero a.db-hero-link:hover { text-decoration: underline; }
+.db-hero a.db-hero-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-hero a.db-hero-link[href=""], .db-hero a.db-hero-link:not([href]), .db-hero a.db-hero-link:empty { display: none; }

package/server/blocks/domma-block-hero.html

@@ -0,0 +1,13 @@
+<!--
+  domma-block-hero - A centred page introduction with an optional button.
+
+  Parameters:
+    header - Main page heading (h1; use once per page)
+    blurb - Short introduction, as plain text
+    link - Optional button destination
+    label - Optional button text
+
+  Example:
+    [domma-block-hero header="Welcome to your next chapter" blurb="Say what you do and who you help." link="/contact" label="Let us help" /]
+-->
+<section class="db-hero"><h1 class="db-hero-heading">{{header}}</h1><p class="db-hero-blurb">{{blurb}}</p><a class="db-hero-link db-hero-btn" href="{{link}}">{{label}}</a></section>

package/server/blocks/domma-block-hero.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "introductions"
+    ]
+}

package/server/blocks/domma-block-image.css

@@ -0,0 +1,8 @@
+.db-image {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-image img { display: block; width: 100%; height: auto; border-radius: var(--dm-radius-xl, 1rem); }
+.db-image figcaption { margin-top: .75rem; font-size: .95rem; line-height: 1.6; text-align: center; white-space: pre-line; }
+.db-image img[src=""], .db-image img:not([src]), .db-image figcaption:empty { display: none; }

package/server/blocks/domma-block-image.html

@@ -0,0 +1,12 @@
+<!--
+  domma-block-image - An uncropped image with an optional caption.
+
+  Parameters:
+    image - Image address from your Media library
+    alt - Image description; empty for a decorative image
+    caption - Optional image caption, as plain text
+
+  Example:
+    [domma-block-image image="/media/your-work.jpg" alt="Describe what visitors can see" caption="Add a little context to the image." /]
+-->
+<figure class="db-image"><img src="{{image}}" alt="{{alt}}" loading="lazy" decoding="async"><figcaption>{{caption}}</figcaption></figure>

package/server/blocks/domma-block-image.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "content"
+    ]
+}

package/server/blocks/domma-block-logos.css

@@ -0,0 +1,13 @@
+.db-logos {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    text-align: center;
+}
+.db-logos-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-logos-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-logos-blurb:empty { display: none; }
+.db-logos-heading:empty { display: none; }
+.db-logos-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; padding: 1.5rem; }
+.db-logos-grid img { display: block; width: 10rem; max-width: 100%; height: 5rem; object-fit: contain; }
+.db-logos-grid img[src=""], .db-logos-grid img:not([src]) { display: none; }

package/server/blocks/domma-block-logos.html

@@ -0,0 +1,18 @@
+<!--
+  domma-block-logos - A responsive row of up to four organisation logos.
+
+  Parameters:
+    header - Optional heading (h2)
+    image1 - Logo 1 image address
+    alt1 - Logo 1 organisation name
+    image2 - Logo 2 image address
+    alt2 - Logo 2 organisation name
+    image3 - Logo 3 image address
+    alt3 - Logo 3 organisation name
+    image4 - Logo 4 image address
+    alt4 - Logo 4 organisation name
+
+  Example:
+    [domma-block-logos header="Who we work with" image1="/media/partner-logo.svg" alt1="Partner name" /]
+-->
+<section class="db-logos"><h2 class="db-logos-heading">{{header}}</h2><div class="db-logos-grid"><img src="{{image1}}" alt="{{alt1}}" loading="lazy" decoding="async"><img src="{{image2}}" alt="{{alt2}}" loading="lazy" decoding="async"><img src="{{image3}}" alt="{{alt3}}" loading="lazy" decoding="async"><img src="{{image4}}" alt="{{alt4}}" loading="lazy" decoding="async"></div></section>

package/server/blocks/domma-block-logos.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "trust"
+    ]
+}

package/server/blocks/domma-block-pricing-card.css

@@ -0,0 +1,20 @@
+.db-price {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-price-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-price-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-price-blurb:empty { display: none; }
+.db-price-heading { font-size: 1.4rem; }
+.db-price-amount { margin: 0 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.2; }
+.db-price-period { margin: 0 0 1.5rem; line-height: 1.6; }
+.db-price-period:empty { display: none; }
+.db-price a.db-price-link { display: inline-block; max-width: 100%; box-sizing: border-box; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; line-height: 1.4; }
+.db-price a.db-price-link:hover { text-decoration: underline; }
+.db-price a.db-price-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-price a.db-price-link[href=""], .db-price a.db-price-link:not([href]), .db-price a.db-price-link:empty { display: none; }

package/server/blocks/domma-block-pricing-card.html

@@ -0,0 +1,15 @@
+<!--
+  domma-block-pricing-card - A clear price or package card with an optional enquiry button.
+
+  Parameters:
+    header - Package heading (h3)
+    blurb - What is included, as plain text
+    price - Price text, including currency and any tax wording
+    period - Optional billing period or pricing note
+    link - Optional button destination
+    label - Optional button text
+
+  Example:
+    [domma-block-pricing-card header="Your package" price="Ask for a quote" blurb="Describe exactly what is included." link="/contact" label="Talk it through" /]
+-->
+<article class="db-price"><h3 class="db-price-heading">{{header}}</h3><p class="db-price-amount">{{price}}</p><p class="db-price-period">{{period}}</p><p class="db-price-blurb">{{blurb}}</p><a class="db-price-link db-price-btn" href="{{link}}">{{label}}</a></article>

package/server/blocks/domma-block-pricing-card.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "services"
+    ]
+}

package/server/blocks/domma-block-service-card.css

@@ -0,0 +1,17 @@
+.db-service {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    overflow: hidden; border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5)); border-radius: var(--dm-radius-xl, 1rem); background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-service-image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
+.db-service-image[src=""], .db-service-image:not([src]) { display: none; }
+.db-service-body { padding: 1.5rem; }
+.db-service-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-service-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-service-blurb:empty { display: none; }
+.db-service-heading { font-size: 1.4rem; }
+.db-service a.db-service-link { display: inline-block; max-width: 100%; box-sizing: border-box; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; line-height: 1.4; }
+.db-service a.db-service-link:hover { text-decoration: underline; }
+.db-service a.db-service-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-service a.db-service-link[href=""], .db-service a.db-service-link:not([href]), .db-service a.db-service-link:empty { display: none; }

package/server/blocks/domma-block-service-card.html

@@ -0,0 +1,15 @@
+<!--
+  domma-block-service-card - A reusable service card with an optional photo and button.
+
+  Parameters:
+    header - Card heading (h3)
+    blurb - Service description, as plain text
+    image - Image address from your Media library
+    alt - Image description; empty for a decorative image
+    link - Optional button destination
+    label - Optional button text
+
+  Example:
+    [domma-block-service-card header="Your service" blurb="Explain the benefit in a sentence or two." link="/services" label="Find out more" /]
+-->
+<article class="db-service"><img class="db-service-image" src="{{image}}" alt="{{alt}}" loading="lazy" decoding="async"><div class="db-service-body"><h3 class="db-service-heading">{{header}}</h3><p class="db-service-blurb">{{blurb}}</p><a class="db-service-link db-service-btn" href="{{link}}">{{label}}</a></div></article>

package/server/blocks/domma-block-service-card.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "services"
+    ]
+}

package/server/blocks/domma-block-split.css

@@ -0,0 +1,26 @@
+.db-split {
+    margin-block: 1.5rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: center;
+    gap: clamp(1.5rem, 4vw, 3.5rem);
+    color: var(--dm-text, #152832);
+}
+.db-split-image {
+    display: block;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+    border-radius: var(--dm-radius-xl, 1rem);
+}
+.db-split-image[src=""], .db-split-image:not([src]) { display: none; }
+.db-split-body { min-width: 0; padding: .5rem 0; }
+.db-split-heading { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; color: inherit; overflow-wrap: anywhere; }
+.db-split-blurb { margin: 0; font-size: 1.1rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
+.db-split a.db-split-link { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
+.db-split a.db-split-link:hover { text-decoration: underline; }
+.db-split a.db-split-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-split a.db-split-link[href=""], .db-split a.db-split-link:not([href]), .db-split a.db-split-link:empty { display: none; }
+@media (max-width: 767px) {
+    .db-split { grid-template-columns: minmax(0, 1fr); }
+}

package/server/blocks/domma-block-split.html

@@ -0,0 +1,22 @@
+<!--
+  domma-block-split - A simple image and text section that stacks on phones.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb  - Section introduction, as plain text
+    image  - Image address from your media library
+    alt    - Description of the image
+    link   - Optional button destination
+    label  - Optional button text
+
+  Example:
+    [domma-block-split header="Made for your business" blurb="Tell visitors how you can help." image="/media/about.jpg" alt="Our workspace" link="/about" label="Meet us" /]
+-->
+<section class="db-split">
+  <img class="db-split-image" src="{{image}}" alt="{{alt}}" loading="lazy" decoding="async">
+  <div class="db-split-body">
+    <h2 class="db-split-heading">{{header}}</h2>
+    <p class="db-split-blurb">{{blurb}}</p>
+    <a class="db-split-link db-split-btn" href="{{link}}">{{label}}</a>
+  </div>
+</section>

package/server/blocks/domma-block-split.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "content"
+    ]
+}

package/server/blocks/domma-block-stats.css

@@ -0,0 +1,20 @@
+.db-stats {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    text-align: center;
+}
+.db-stats-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-stats-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-stats-blurb:empty { display: none; }
+.db-stats-heading:empty { display: none; }
+.db-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem; margin: 0; }
+.db-stats-item { display: flex; flex-direction: column; gap: .5rem;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-stats-item dt { order: 2; font-weight: 400; line-height: 1.6; }
+.db-stats-item dd { order: 1; margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.2; }
+.db-stats-item:has(dd:empty) { display: none; }

package/server/blocks/domma-block-stats.html

@@ -0,0 +1,16 @@
+<!--
+  domma-block-stats - Up to three useful figures with clear labels.
+
+  Parameters:
+    header - Optional section heading (h2)
+    value1 - Figure 1, including any unit
+    label1 - Figure 1 explanation
+    value2 - Figure 2, including any unit
+    label2 - Figure 2 explanation
+    value3 - Figure 3, including any unit
+    label3 - Figure 3 explanation
+
+  Example:
+    [domma-block-stats header="A few useful facts" value1="Your figure" label1="Explain what it represents" /]
+-->
+<section class="db-stats"><h2 class="db-stats-heading">{{header}}</h2><dl class="db-stats-grid"><div class="db-stats-item"><dt>{{label1}}</dt><dd>{{value1}}</dd></div><div class="db-stats-item"><dt>{{label2}}</dt><dd>{{value2}}</dd></div><div class="db-stats-item"><dt>{{label3}}</dt><dd>{{value3}}</dd></div></dl></section>

package/server/blocks/domma-block-stats.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "trust"
+    ]
+}

package/server/blocks/domma-block-steps.css

@@ -0,0 +1,19 @@
+.db-steps {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-steps-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-steps-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-steps-blurb:empty { display: none; }
+.db-steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; counter-reset: db-step; list-style: none; margin: 1.5rem 0 0; padding: 0; }
+.db-steps-item { counter-increment: db-step;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-steps-item::before { content: counter(db-step, decimal-leading-zero); display: block; margin-bottom: 1rem; font-size: 1.75rem; font-weight: 700; }
+.db-steps-item h3 { margin: 0 0 .75rem; color: inherit; font-size: 1.25rem; }
+.db-steps-item p { margin: 0; line-height: 1.7; white-space: pre-line; }
+.db-steps-item:has(h3:empty) { display: none; }

package/server/blocks/domma-block-steps.html

@@ -0,0 +1,17 @@
+<!--
+  domma-block-steps - A clear, numbered process with up to three steps.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    title1 - Step 1 heading
+    text1 - Step 1 description
+    title2 - Step 2 heading
+    text2 - Step 2 description
+    title3 - Step 3 heading
+    text3 - Step 3 description
+
+  Example:
+    [domma-block-steps header="Getting started" blurb="A simple way forward." title1="Say hello" text1="Tell us what you need." title2="Make a plan" text2="Agree the details together." title3="Get going" text3="Put your plan into action." /]
+-->
+<section class="db-steps"><h2 class="db-steps-heading">{{header}}</h2><p class="db-steps-blurb">{{blurb}}</p><ol class="db-steps-list"><li class="db-steps-item"><h3>{{title1}}</h3><p>{{text1}}</p></li><li class="db-steps-item"><h3>{{title2}}</h3><p>{{text2}}</p></li><li class="db-steps-item"><h3>{{title3}}</h3><p>{{text3}}</p></li></ol></section>

package/server/blocks/domma-block-steps.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "services"
+    ]
+}

package/server/blocks/domma-block-team-card.css

@@ -0,0 +1,13 @@
+.db-team {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5)); border-radius: var(--dm-radius-xl, 1rem); overflow: hidden; background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-team-image { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
+.db-team-image[src=""], .db-team-image:not([src]) { display: none; }
+.db-team-body { padding: 1.5rem; }
+.db-team-name { margin: 0 0 .5rem; font-size: 1.4rem; color: inherit; }
+.db-team-role { margin: 0 0 1rem; font-weight: 600; }
+.db-team-blurb { margin: 0; white-space: pre-line; line-height: 1.7; }
+.db-team-role:empty, .db-team-blurb:empty { display: none; }

package/server/blocks/domma-block-team-card.html

@@ -0,0 +1,14 @@
+<!--
+  domma-block-team-card - A team member photo, role and short introduction.
+
+  Parameters:
+    name - Person name (h3)
+    role - Role or specialism
+    blurb - Short introduction, as plain text
+    image - Image address from your Media library
+    alt - Image description; empty for a decorative image
+
+  Example:
+    [domma-block-team-card name="Team member" role="Role or specialism" blurb="A short, friendly introduction." image="/media/team-member.jpg" alt="Portrait of your team member" /]
+-->
+<article class="db-team"><img class="db-team-image" src="{{image}}" alt="{{alt}}" loading="lazy" decoding="async"><div class="db-team-body"><h3 class="db-team-name">{{name}}</h3><p class="db-team-role">{{role}}</p><p class="db-team-blurb">{{blurb}}</p></div></article>

package/server/blocks/domma-block-team-card.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "trust"
+    ]
+}

package/server/blocks/domma-block-testimonial.css

@@ -0,0 +1,13 @@
+.db-testimonial {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-testimonial-quote { margin: 0; padding: 0; border: 0; color: inherit; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.65; white-space: pre-line; }
+.db-testimonial-attribution { display: grid; gap: .3rem; margin-top: 1.25rem; }
+.db-testimonial-attribution span { font-size: .95rem; }
+.db-testimonial-attribution strong:empty, .db-testimonial-attribution span:empty, .db-testimonial-attribution:has(strong:empty):has(span:empty) { display: none; }

package/server/blocks/domma-block-testimonial.html

@@ -0,0 +1,12 @@
+<!--
+  domma-block-testimonial - A customer quotation with an optional attribution.
+
+  Parameters:
+    quote - An approved customer quotation, as plain text
+    name - Customer name
+    detail - Optional role or business
+
+  Example:
+    [domma-block-testimonial quote="Replace this with a customer quotation you have permission to share." name="Customer name" detail="Business or role" /]
+-->
+<figure class="db-testimonial"><blockquote class="db-testimonial-quote">{{quote}}</blockquote><figcaption class="db-testimonial-attribution"><strong>{{name}}</strong><span>{{detail}}</span></figcaption></figure>

package/server/blocks/domma-block-testimonial.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "trust"
+    ]
+}

package/server/blocks/domma-block-text.css

@@ -0,0 +1,9 @@
+.db-text {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    max-width: 48rem; margin-inline: auto; padding-block: 1rem;
+}
+.db-text-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-text-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-text-blurb:empty { display: none; }

package/server/blocks/domma-block-text.html

@@ -0,0 +1,11 @@
+<!--
+  domma-block-text - A readable text section for your story or an introduction.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+
+  Example:
+    [domma-block-text header="Our story" blurb="Share a little about your business and the people behind it." /]
+-->
+<section class="db-text"><h2 class="db-text-heading">{{header}}</h2><p class="db-text-blurb">{{blurb}}</p></section>

package/server/blocks/domma-block-text.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "content"
+    ]
+}

package/server/services/blocks.js

@@ -7,6 +7,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import {fileURLToPath} from 'url';
 import * as cache from './cache/index.js';
+import {seedStarterBlocks} from './starter-blocks.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const BLOCKS_DIR = path.resolve(__dirname, '../../content/blocks');
@@ -427,6 +428,7 @@ export async function deleteBlock(name) {
  * Skips any file that already exists to preserve user customisations.
  */
 export async function seedDefaultBlocks() {
+    await seedStarterBlocks(BLOCKS_DIR);
     for (const [name, content] of Object.entries(BLOCKS)) {
         await seedBlock(name, content);
     }

package/server/services/starter-blocks.js

@@ -0,0 +1,18 @@
+/** Editable starting points for new pages, copied without replacing site edits. */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const sourceDir = fileURLToPath(new URL('../blocks/', import.meta.url));
+
+export async function seedStarterBlocks(destination) {
+    await fs.mkdir(destination, {recursive: true});
+    for (const name of await fs.readdir(sourceDir)) {
+        if (!/^domma-block-[a-z-]+\.(html|css|meta\.json)$/.test(name)) continue;
+        try {
+            await fs.copyFile(path.join(sourceDir, name), path.join(destination, name), fs.constants.COPYFILE_EXCL);
+        } catch (error) {
+            if (error.code !== 'EEXIST') throw error;
+        }
+    }
+}