Neutrino custom blocks

Every content block Neutrino adds to Ghost, with each configuration rendered rather than described. For Ghost's own cards — and a shorter tour that shows each of these once — see Style Guide All.

---

Definition list

Numbered pairs — a term and its explanation — for steps, stages or principles, where the order carries meaning. The large ordinal does what a bulleted list cannot: it tells the reader how far through they are, and lets them refer to step three out loud. Use it for a procedure someone will follow with their hands busy.

Entries

Each entry is a heading and a passage.

Scout the room before you unpack

Stand where the microphone will stand and listen for a full minute. Most problems are cheaper to walk away from than to fix afterwards.

Record a minute of nothing

Room tone is what lets an edit disappear. Take it before the session, while the room is still in the state you found it.

Set the level for the quiet part

Headroom costs nothing and clipping cannot be undone. Aim so the loudest passage still has room above it.

Back up before you leave the site

Two copies in two places, made while you can still re-record. A card that fails at home is a session you no longer have.

---

With nested points

Bullets can hang beneath an entry where a step has parts of its own.

Scout the room before you unpack

Stand where the microphone will stand and listen for a full minute. Most problems are cheaper to walk away from than to fix afterwards.

• Find the quietest corner, not the most convenient one
• Note anything on a timer — fridges, boilers, ventilation

Record a minute of nothing

Room tone is what lets an edit disappear. Take it before the session, while the room is still in the state you found it.

• Same position and gain as the take itself
• Label it immediately; unlabelled tone is useless tone

Set the level for the quiet part

Headroom costs nothing and clipping cannot be undone. Aim so the loudest passage still has room above it.

• Run the loudest thing you expect before you commit
• Leave at least twelve decibels spare

Back up before you leave the site

Two copies in two places, made while you can still re-record. A card that fails at home is a session you no longer have.

• Copy, then verify by listening — not by file size
• Keep the card until the second copy is confirmed

---

Feature tab bar

One idea at a time, in a strip the reader steps through. Each tile carries a picture, a heading and a short passage, and only one is open at once — so a long list of capabilities reads as a sequence rather than a wall. Use it where every item deserves a proper look.

Regular width

Sits inside the reading column, so the bar reads as part of the article.

---

Wide width

Breaks out to the full content width and gives the picture more room — the better choice when the image is carrying the argument. Thirteen panels here, with labels of a realistic length: past a certain point the tabs no longer fit across the bar, so the tab strip itself scrolls sideways and the panel below stays put. Nothing is hidden — the reader drags the labels, and the open panel does not move while they do.

---

Vertical

Tabs stack down one side rather than sitting in a row above the panel. Suits longer labels, and keeps the reading order obvious on a narrow screen.

---

Vertical, scrolling

The same arrangement carrying thirteen panels. A column of tabs runs out of height before a row runs out of width, so the list scrolls vertically instead, fading at whichever end has more to show. What it runs out of is the height of the panel, which is why this one is set to 16:9 — a taller tile would give the column more room than it needs and nothing would scroll. The panel beside it holds still — only the labels move.

---

Tiles at 16:9

For screenshots and landscape subjects. Every tile in one bar shares the proportion, so the strip cannot jump as the reader steps through it.

---

Tiles at 1:1

For product shots and marks that want equal weight.

---

Tiles at 4:5

For portrait subjects and phone screens.

---

Feature grid

Several things at once, side by side, for scanning rather than reading. Where the tab bar asks the reader to step through, the grid lets them take the set in at a glance and stop at whichever tile speaks to them.

List layout

Wraps into columns — three on a wide screen, two on a tablet, one on a phone. Nothing is hidden and nothing needs swiping. This is what you get if you choose no layout at all.

---

Scroll layout

Changes what happens on small screens only. On a phone or tablet the tiles become a single row the reader swipes through, with the next one peeking in to signal there is more, instead of stacking into a long column. On a wide screen it is the same three-column grid as List, because at that width everything already fits — so this variant and the one above look identical here, and differ on a phone.

---

Animated strip

One row that scrolls itself, slowly and continuously — and only when the set does not already fit, which is why this one carries ten tiles. The reader can grab it, and it pauses under the pointer. It does not move at all for anyone who has asked their device to reduce motion.

---

Icon tiles

A small mark above a heading and a passage, for capability lists. Icons size themselves, so the tile proportions below do not apply to this treatment.

---

Media tiles

A full-width picture above the text, for places, products and anything the reader should see before they read.

---

Tiles at 16:9

The same three proportions as the tab bar, applied to every tile at once. 16:9 for screenshots and landscape subjects.

---

Tiles at 1:1

For products and marks that want equal weight.

---

Tiles at 4:5

For portrait subjects and phone screens.

---

Logos strip

Press mentions, partner marks or client badges, in a row that earns trust by association. It is the feature grid wearing its third treatment, so the marks replace the tiles entirely. Marks arrive in wildly different shapes — a long wordmark beside a square badge — and the strip sizes each to the same visual area so none dominates. Upload them as they are; the shapes below run from 8.9:1 to taller-than-wide. A strip is always one row: it never wraps, and the two variants below are the only two things it does.

Still

A set small enough to fit sits still and centres itself — the same block as below with fewer marks, and nothing else changed. Scrolling content past a reader who can already see all of it is a distraction, so the theme measures the row and shuts the motion off itself. The decision is per screen, not per block — the same five marks start moving on a narrow phone, where they no longer fit.

---

Animated

A set too wide for the screen scrolls itself, and the two ends fade so the row reads as continuing past the edge.

---

Scroll-reactive intro

An opening statement that comes into focus as the reader arrives at it, a few words at a time, at roughly reading pace. It buys a moment of attention for the sentence that matters most on a page. There are no settings — the effect follows the reader. One per page, at the top, and only the first on a page runs, which is why this reference shows it once.

Pricing table

Plans side by side, for selling anywhere other than through the site's own membership — a licence, a download, a subscription handled by an outside checkout. On a phone the plans stack in the order you wrote them rather than squeezing a table onto a small screen.

Two things happen without being asked for. Feature rows line up across plans, so row three means the same thing in every column and a label that wraps makes its row taller everywhere rather than drifting one column out of step. And any one plan can carry a ring in your accent colour with a badge above it, for the plan you would rather people chose — the Gold plan below has it.

Three plans

The ordinary case. Three or four plans sit comfortably side by side at any desktop width.

---

Six plans

Past four, the plans reach their narrowest readable width and the table scrolls sideways rather than squeezing them into slivers. A swipe is better than six unreadable columns.

---

Billing cycles

Offer two or more and a switch appears by itself, changing every price in place. One price per plan needs no switch and none appears. A one-off price can sit in the same table as a subscription without the switch touching it.

---

Embed container

A wrapper for somebody else's widget — a review wall, a booking form, a map, a calculator. Third-party embeds arrive with their own ideas about how much room they should take, and some take all of it. This gives you the final say without touching their code. The wall of love below is a real embed, unmodified.

Regular width

Held to the reading column, so the embed reads as part of the article.

---

Wide

Broken out to the content width.

---

Full width

Edge to edge, for an embed that is the point of the page rather than a supporting detail.

---

Truncated

A widget with no ceiling of its own renders every item it has — this one would run to several thousand pixels. Cut to half, a third or a quarter of its natural height, with a fade at the cut and a control to open the rest, the reader chooses whether to see all of it.