Design reference
Locked fenced notation: :::layout{attrs} starts a section; the next fence or end of file closes it. Below: each layout id with attrs, sample fence, and how it renders today.
Spec in repo: docs/content-sections.md · sample:docs/examples/how-we-work.md· icons: Tabler Icons (icon:name in fences →tabler:name; or img:path underpublic/brand/)
layout · hero
Page opening: tagline, title, lead over a full-bleed background image. No marketing CTAs by default.
Fence example
:::hero{tag="How we work" img="illustrations/how-we-work-hero"}
# Building software from operational reality
We don't start with product ideas. We start with work that people struggle to do every day.Rendered example ↓
How we work
We don't start with product ideas. We start with work that people struggle to do every day.
layout · hero{variant="text"}
Centered title band without a media plate — Contact-style openings.
Fence example
:::hero{tag="Contact" variant="text"}
# Start with a working session
Tell us about the workflow you want to examine.Rendered example ↓
Contact
Tell us about the workflow you want to examine.
layout · portrait-hero
Compact personal opening: 120×150 portrait (radius 16) left, copy right; stacks column on mobile with photo first. Additive — does not change content-image-* sizing.
Fence example
:::portrait-hero{img="portraits/george-lewis-linkedin" alt="Portrait of George Lewis"}
I build and lead teams to run operations that keep up with the pace the AI era demands.
Content operations for the AI era — the team, the process, and the verification system that keep AI answers about your products traceable and signed-off.
- **[Get in touch](mailto:hello@example.com){variant=primary}**
- **[LinkedIn](https://www.linkedin.com/){variant=secondary}**Rendered example ↓
I build and lead teams to run operations that keep up with the pace the AI era demands.
Content operations for the AI era — the team, the process, and the verification system that keep AI answers about your products traceable and signed-off.
layout · features
Icon or image card grid of principles, products, or points. Card titles may link (hover motion) via markdown links or href. Per-item art: icon:name (Tabler) or img:path (public/brand/).
Fence example
:::features{tag="Principles" columns="3" bullets="icon"}
# Principles that shape the work
Every product begins with a real problem.
- icon:git-branch | **[Software follows operations](/how-we-work)** — Build software that supports proven practices.
- icon:target | **[Start with a real problem](/how-we-work)** — Products exist because the work demanded them.
- icon:refresh | **[Production is part of development](/how-we-work)** — Real delivery feeds the next cycle.Rendered example ↓
Principles
Every product begins with a real problem.
layout · features{variant="row"}
Compact horizontal feature rows — denser product lists.
Fence example
:::features{variant="row" columns="2" bullets="icon"}
# What we build
- img:logos/cod | **Content Ops Director** — Operational platform for Technical Content Operations.
- img:logos/jive | **Jive-mail** — Shared mailbox management for Microsoft 365.Rendered example ↓
What we build
Operational platform for Technical Content Operations.
Shared mailbox management for Microsoft 365.
layout · content
Title, optional lead, and a structured item list. Use columns and bullets without a media plate. Prefer this over inventing one-off layouts (e.g. leadership = content-image-right with body text).
Fence example
:::content{columns="2" bullets="icon"}
# Our approach
- icon:flag | **Start with a real problem** — Every product starts by solving one.
- icon:check | **Test through use** — Every solution is tested in practice.
- icon:arrows-shuffle | **Successful ideas become products** — Operations and software improve together.
- icon:focus-2 | **How we work** — Learn more about the development cycle.Rendered example ↓
Content
Every product starts by solving one.
Every solution is tested in practice.
Operations and software improve together.
Learn more about the development cycle.
layout · content{variant="split"}
Two columns like content-image, but body prose in one column and the bullet list in the other. Alias: :::content-split. side="left" puts the list on the left.
Fence example
:::content{variant="split" bullets="check"}
# What changes with AI
Creation accelerates; judgement still decides what ships. Answers now come from systems as well as pages — so governance has to keep up.
- **Creation accelerates** — Drafts appear faster; judgement still decides what ships.
- **Consumption shifts** — Answers come from systems as well as pages.
- **Governance stays** — Traceability and accountability do not disappear.Rendered example ↓
Creation accelerates; judgement still decides what ships. Answers now come from systems as well as pages — so governance has to keep up.
Drafts appear faster; judgement still decides what ships.
Answers come from systems as well as pages.
Traceability and accountability do not disappear.
layout · content{bullets="check"}
Tick markers in a filled circle — AstroWind Services “Main Features / Benefits” pattern.
Fence example
:::content{columns="2" bullets="check"}
# Main features
- **High-quality designs** — Professional, polished appearance.
- **Customization tools** — Colours, fonts, and content you control.
- **Pre-designed elements** — Ready layouts that speed delivery.
- **Preview before commit** — See the outcome before you ship.Rendered example ↓
Professional, polished appearance.
Colours, fonts, and content you control.
Ready layouts that speed delivery.
See the outcome before you ship.
layout · content{bullets="chevron"}
Chevron markers for denser lists or FAQ-adjacent point lists.
Fence example
:::content{columns="1" bullets="chevron"}
# What changes with AI
- **Creation accelerates** — Drafts appear faster; judgement still decides what ships.
- **Consumption shifts** — Answers come from systems as well as pages.
- **Governance stays** — Traceability and accountability do not disappear.Rendered example ↓
Drafts appear faster; judgement still decides what ships.
Answers come from systems as well as pages.
Traceability and accountability do not disappear.
layout · content-image-right
Split band: tagline + h2 above; body/list and media share a row so the image top aligns with copy (not the heading). Image on the right. Column split via layout (default 1/2).
Fence example
:::content-image-right{tag="Products" img="illustrations/how-products-emerge" bullets="icon"}
# How products emerge
- icon:search | **Start with the struggle** — Look for work that repeatedly costs time or risk.
- icon:tools | **Process, software, or both** — Validate through use.Rendered example ↓
Products
Look for work that repeatedly costs time or risk.
Validate through use.
layout · content-image-left
Same split with image on the left (isReversed). Image top aligns with list/body, not the h2. layout defaults to 1/2; use layout="1/3" for a narrower image column.
Fence example
:::content-image-left{tag="Feedback" img="illustrations/workshop" bullets="check" columns="1"}
# Production is part of development
- **Exercised in production** — Software behaves differently outside demos.
- **Grounded in the work** — Operations continuously feed development.Rendered example ↓
Feedback
Software behaves differently outside demos.
Operations continuously feed development.
layout · content-image-right (body, no list)
Former “leadership” pattern: section tag, h2 title, running text, portrait. Image aligns with body paragraphs. layout="1/3" gives the image one-third of the row (text two-thirds); omit layout for 50/50.
Fence example
:::content-image-right{tag="Leadership" img="illustrations/george" bullets="none" layout="1/3"}
# George Lewis
c8s-labs was founded by George Lewis. George has spent his career designing, building and leading Technical Content Operations for organisations where documentation is business critical.
Today he divides his time between developing the product portfolio, advising organisations, and operating doc-department.Rendered example ↓
Leadership
c8s-labs was founded by George Lewis. George has spent his career designing, building and leading Technical Content Operations for organisations where documentation is business critical.
Today he divides his time between developing the product portfolio, advising organisations, and operating doc-department.
layout · steps
Ordered process timeline with optional side image. Headline above; image top aligns with the timeline (not the title).
Fence example
:::steps{tag="Delivery" img="illustrations/cycle"}
# From problem to product
- **Discover** — Find the operational friction.
- **Build** — Process, software, or both.
- **Prove** — Exercise it in real delivery.Rendered example ↓
Delivery
Discover
Find the operational friction.
Build
Process, software, or both.
Prove
Exercise it in real delivery.
layout · timeline-cards
Stacked role/career cards with dates on the right (under the title on mobile). Optional per-item link via href:url | or markdown link title. Additive — does not change steps / Timeline.
Fence example
:::timeline-cards
# Built at scale
- **Next chapter** — Open to Director of Content Strategy / Operations roles.
- href:https://c8s-labs.com | **Director of Content Operations · c8s-labs · 20XX – now** — One-line outcome for the product / answers / ops.
- **[International delivery leadership · 3di · 20XX – 20XX](https://3di.com)** — UK · Poland · Mexico teams — outcome in one sentence.Rendered example ↓
High-level only — role · organisation, dates, one outcome line.
layout · process-strip
Compact three-stage plate used on How we work. Stages can be authored as a list or use component defaults.
Fence example
:::process-strip{tag="How products emerge"}
# How products emerge
- **01 · Operational problem** — Start with work that repeatedly costs time or introduces risk.
- **02 · Build the better way** — Process, software, or both — validated through use.
- **03 · Production feedback** — Real delivery feeds the next cycle of improvement.Rendered example ↓
Start with work that repeatedly costs time or introduces risk.
Process, software, or both — validated through use.
Real delivery feeds the next cycle of improvement.
layout · prose
Running paragraphs without cards. Heading optional. Max width 70vw (same as quote and content columns=1).
Fence example
:::prose
Every company has a development process. Ours begins with operational problems.
When we find a problem that repeatedly costs time, we look for a better way.Rendered example ↓
Every company has a development process. Ours begins with operational problems.
When we find a problem that repeatedly costs time, we look for a better way. Sometimes that better way is a process. Sometimes it's software. Often it's both.
layout · quote
Single emphasised statement — not a testimonial carousel. Max width 70vw.
Fence example
:::quote
Documentation is no longer simply something customers read. Increasingly, it is something AI systems answer from.Rendered example ↓
Documentation is no longer simply something customers read. Increasingly, it is something AI systems answer from.
layout · inverse-band
Full-bleed ink band for ecosystem or closing emphasis. Title plus short items or body.
Fence example
:::inverse-band{tag="One ecosystem"}
# Designed to complement one another
- **Content Ops Director** — Provides the operational platform.
- **Dia Bach** — Assists technical authors.
- **doc-department** — Applies the same tools in production.Rendered example ↓
One ecosystem
Products and services are designed to complement one another rather than compete.
Provides the operational platform.
Assists technical authors.
Applies the same tools in production.
Shared mailbox operations for Microsoft 365.
layout · faqs
Question / answer pairs. List items use **Question** — Answer.
Fence example
:::faqs{tag="Trust"}
# Common questions
- **Who is accountable when AI drafts content?** — The human reviewer remains accountable for what ships.
- **Do you invent metrics for marketing?** — No. We only publish figures we can stand behind.Rendered example ↓
Trust
The human reviewer remains accountable for what ships.
No. We only publish figures we can stand behind.
layout · contact-form
Contact form. Title, subtitle, footer copy, button, and placeholder are authored in MD.
Fence example
:::contact-form{tag="Contact" button="Send message" placeholder="A question, a product…"}
# Send a message
Tell us a little about what you're curious about.
We typically reply within two business days. Or write directly to team@c8s-labs.com.Rendered example ↓
Contact
Sample render — prefer the live Contact page for real submissions.
layout · blog-latest
Latest posts grid for personal / product home pages. Fence was missing — wiring only; uses existing blog widget.
Fence example
:::blog-latest{count="3" linkText="View all"}
# Latest writing
Notes on what AI tells your customers, and the content operation that keeps those answers traceable.Rendered example ↓
Notes on what AI tells your customers, and the content operation that keeps those answers traceable.
View all →
When introducing AI into a content production workflow, evaluations typically centre around which model or agent to use. We went a step further, and tested what difference the choice of model used for each step in the workflow makes to the overall quality and efficiency.
What happens when you give an AI authoring agent the same information design assets you give your writers?
Ask an AI assistant to write a manual and it will; but it will do it differently each time. Use the information models, style guides and taxonomies your writers already have to control an AI assistant.
Sub-brand layouts
Not used on c8s-labs.com. Available for product sites (Content Ops Director, Jive-mail, Dia Bach, doc-department) that need social proof, conversion bands, or plans.
layout · testimonials
Quote cards with attribution. For sub-brand sites with real customer voices only — never invent quotes.
Fence example
:::testimonials{tag="Customers"}
# Words from teams using the product
- **Cleaner handoffs** — "Ownership is clear and nothing falls between mailboxes." — **Alex Rivera** · Operations lead
- **Faster reviews** — "Review cycles dropped without losing editorial control." — **Sam Okonkwo** · Documentation manager
- **Fit the workflow** — "It supports how we already work." — **Jordan Lee** · Technical authorRendered example ↓
Customers
" Ownership is clear and nothing falls between mailboxes. "
Alex Rivera
Operations lead
" Review cycles dropped without losing editorial control. "
Sam Okonkwo
Documentation manager
" It supports how we already work. "
Jordan Lee
Technical author
layout · cta
Conversion band: title, lead, one or two actions. Sub-brand landing and product pages.
Fence example
:::cta{tag="Next step"}
# Ready to try it with your team?
Book a working session or start with the docs.
- [Book a session](/contact){variant=primary}
- [Read the docs](#){variant=secondary}Rendered example ↓
Next step
Book a working session or start with the docs.
layout · pricing
Plan cards with price, period, feature list, and CTA. Sub-brand commercial pages only.
Fence example
:::pricing{tag="Plans"}
# Choose a plan
Only pay for what you need.
### basic · Optimal for individuals · $29 / month
- Shared workspace for one team
- Email support
- Core workflows
### standard · Optimal for small teams · $69 / month · popular
- Everything in Basic
- Shared ownership and audit trail
- Priority support
### premium · Optimal for organisations · $199 / month
- Everything in Standard
- Governance controls
- Dedicated onboardingRendered example ↓
Plans
Only pay for what you need.
Optimal for individuals
Optimal for small teams
Optimal for organisations
Shared
| Attr | Values | Effect |
|---|---|---|
| tag | string | Mono eyebrow above the title |
| img | path under public/brand/ | e.g. illustrations/cod →/brand/illustrations/cod.png; missing → labelled placeholder |
| side | left | right | Image side for content.left → isReversed (image left);right is the default (image right). Aliases: content-image-* |
| columns | 1 | 2 | 3 | 4 | Item grid columns on content / features. On content without an image,columns="1" also sets max-width to 70vw (same as prose / quote) |
| bullets | check | chevron | icon | none | check = tick in circle · chevron = › · icon = per-item Tabler (icon:name) or brand image (img:path under public/brand/) · none = body/list without markers |
| variant | per-layout | Pick among related AstroWind widgets |
Grammar and list-item rules: docs/examples/how-we-work.md · catalogue:docs/content-sections.md
AstroWind review
What those compositions map to in our catalogue — and what we deliberately skip.
hero → features (template grid) →content + image with bullets="check" (Main Features / Benefits) → testimonials → cta. c8s-labs uses hero / features / content; testimonials and CTA are sub-brand layouts.
pricing, features, steps,faqs, cta. Pricing + CTA are sub-brand; steps and faqs stay in the shared set.
Hero → Stats → Features3 (banner image + grid) → Steps2 values → feature cards → locations. Map tohero, features, steps,content / content-image-*. Skip Stats unless we have real figures. Bio/portrait = content-image-right with body text.
Long legal prose. Maps to prose (or a future legal page shell). No Privacy/Terms in v1 IA.