domma-cms 1.8.43 → 1.8.45

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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.
+- **Inline code on an indented HTML line shows again.** `<code>` inside an HTML line indented four or more spaces came out as `SC1:0` - the code-region scrub stored the line holding the code's placeholder and restored it only once. Restore now restores what it brings back too.
+
 ## [1.8.43] - 2026-10-23
 
 - **What is inside a short tag is indented too.** Shift+Alt+F now indents the content of `[grid]`, `[col]`, `[card]`, `[tabs]` and the other container short tags by how deeply it nests, not only the tag lines, and Enter after an opening tag goes one deeper. A nested list or fenced code keeps its shape inside. The renderer takes the nesting indent off before anything else (a container's content loses the indent its lines share), so four spaces inside a card is no longer a code block - and a page written flat reads exactly as before (checked across the fleet's 1,700 pages).

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.43",
+  "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"
+    ]
+}