redline — Lattice component

redline

ComparisonCanvasProse

Clause-by-clause comparison — verbatim language with inline <ins>/<del> tracking the amendment.

Open in Playground
Variant

Use when an amendment's diff is the slide. The blockquote carries the redlined text with ins/del markers; the trailing list explains why the diff matters operationally.

contractcontrastcompliancetransformation

When to use

  • Verbatim text matters. When the amendment is the language — legal clauses, regulatory paragraphs, contract terms. Paraphrasing would lose the exact words the parties are bound by.
  • Diff is the slide. The inline <ins> and <del> markers are the editorial argument. The audience reads what changed by scanning the green and red inline marks, not by toggling between two blocks.
  • Why-this-matters trailer. End with a single operational sentence explaining what the diff means for the team's work. The clause is the evidence; the trailer is the implication.

When not to use

  • Code diffs. For two code snippets side-by-side, use compare-code. redline is for natural language — legal, regulatory, contractual — not source code.
  • Paraphrased clauses. If the quoted text isn't verbatim, the diff is meaningless. Either render the actual clause with its diff, or move to compare-prose for narrative comparison.
  • Long passage with one tiny diff. If one word changed in a paragraph, quote only the affected sentence or two. A wall of unchanged text with one inline mark buries the change.

Common mistakes

  • Placing the citation paragraph BEFORE the heading instead of after it. Immediately after the heading (the documented placement) the citation paragraph stays in the flow and gets redline's dedicated accent-mono citation styling. Before the heading, it's captured as the shared masthead eyebrow (mono-caps kicker) instead — a different, generic treatment. Keep it after the heading, matching the skeleton.
  • Assuming Markdown strikethrough (~~text~~) doesn't render as a tracked deletion the way literal <del> does. ~~text~~ DOES render as a tracked deletion — Markdown strikethrough produces <s>, and redline's CSS styles del/s identically (line-through, fail-red color and background). Either syntax works for a deletion; <ins>new</ins> still needs literal HTML since Markdown has no native insertion syntax.

Authoring

<!-- _class: redline -->

## Headline naming the amendment.

`Citation reference · amendment name (year)`

> Verbatim language with <del>old wording</del> <ins>new wording</ins> inline so the diff reads cleanly.

- **Why this matters.** What the amendment changes in operational terms, in one sentence.

Slots

SlotSelectorRequiredDescription
headingh2yesSlide heading naming the amendment or change.
citationp:first-of-type > codeyesInline-code citation of the amended provision (e.g. 'Cal. Civ. Code §1798.135 · SB-362 (2024)').
redlineblockquoteyesThe amended language. Use <del>old text</del> and <ins>new text</ins> inline.
implicationsul > linoOptional explanation. Use Why this matters for the operational read.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  Clause diff heading.                   │
│                                         │
│  The original clause text with          │
│  ~~struck-through removals~~ and        │
│  __underlined insertions__ shown        │
│  inline in the prose stream.            │
│                                         │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier)One clause, ins/del inline in a single blockquote — the simplest, most common redline.
  • annotatedEach individual edit needs its own explanation, not just one trailing 'why this matters' line — numbers each marked edit against a footnoted rationale.
  • three-colThe audience should read old, new, and rationale as three distinct, separately labeled blocks rather than one inline-marked passage.
  • splitBefore and after read better as two full parallel blockquotes than as one passage with inline markup.
  • stackedThe passage is long enough that side-by-side columns would be too narrow — stacks the prior text (struck) above the current instead.

Variants

annotatedannotated

Adds the why beside each edit.

<!-- _class: redline annotated -->

## annotated adds the why beside each edit.

`Cal. Civ. Code §1798.135 · amendment SB-362 (2024)`

> A business that <del>collects</del> <ins>collects, sells, or shares</ins><sup>1</sup> consumers' personal information shall provide <del>two or more</del> <ins>at least one</ins><sup>2</sup> designated method for submitting requests to opt-out, <ins>including, at minimum, a clear and conspicuous link on the homepage titled "Your Privacy Choices,"</ins><sup>3</sup> for use by consumers.

- **Scope expansion.** Collapses sale and sharing into one duty.
- **Method floor.** One method is now sufficient; previously two were required.
- **Link mandate.** Pins a uniform link title across all businesses.

three-colthree-col

Old, new, and why side by side.

<!-- _class: redline three-col -->

## three-col sets old, new, and why side by side.

`Cal. Civ. Code §1798.135 · amendment SB-362 (2024)`

> A business that collects consumers' personal information shall provide two or more designated methods for submitting requests to opt out of the sale of their personal information.

> A business that collects, sells, or shares consumers' personal information shall provide at least one designated method for submitting requests to opt-out, including a clear and conspicuous homepage link titled "Your Privacy Choices."

- **Scope.** Sale and sharing fold into one duty.
- **Method floor.** One method now suffices.
- **Link title.** Homepage label is mandatory and standardized.

splitsplit

Before and after in parallel.

<!-- _class: redline split -->

## split shows before and after in parallel.

`Cal. Civ. Code §1798.135 · amendment SB-362 (2024)`

> A business that collects consumers' personal information shall provide two or more designated methods for submitting requests to opt out of the sale of their personal information.

> A business that collects, sells, or shares consumers' personal information shall provide at least one designated method for submitting requests to opt-out, including a clear and conspicuous homepage link titled "Your Privacy Choices."

- **Why this matters.** The left column is the prior text; the right is the amendment. Reading across makes the scope expansion obvious.

stackedstacked

Prior text struck above the current.

<!-- _class: redline stacked -->

## stacked strikes the prior text above the current.

`Cal. Civ. Code §1798.135 · amendment SB-362 (2024)`

> A business that collects consumers' personal information shall provide two or more designated methods for submitting requests to opt out of the sale of their personal information.

> A business that collects, sells, or shares consumers' personal information shall provide at least one designated method for submitting requests to opt-out, including a clear and conspicuous homepage link titled "Your Privacy Choices."

- **Why this matters.** Stacking keeps the reading order vertical when each passage is a full sentence or more.

Related