Infographics

P Purpose

3-column grid of red-bordered cards. Each card shows a large value (%, number, multiplier), a bold headline, and a supporting body. Best for framing a problem with industry data or establishing credibility with proof.

W When to Use

• Opening an argument that requires data — AI failure rates, adoption gaps, ROI figures
• After hero or opening statement to ground claims before the solution
• Not on the same page as DESC-04 (Stats Row) — redundant proof formats

I Required Inputs

• stats[] — 2–4 items, each with value, headline, body
• title — section label, top-left
• showLogo — toggle vstorm mark top-right (default true)

F Typical Page Flow

• After: hero or editorial intro
• Before: services, case studies, or comparison section

P Purpose

N-column grid of red-bordered cards, each with an SVG icon, title, and body. Default 5 columns for "5 key characteristics" style infographics. Use for framework pillars, capability lists, or feature breakdowns where items carry equal weight.

W When to Use

• Explaining a framework or methodology with parallel concepts
• Listing key features or capabilities with short descriptions
• After hero or section intro, before case studies or CTA

I Required Inputs

• cards[] — each with optional iconSvg, title, body
• cols — overrides default (cards.length). Use when you want fewer columns than cards
• title — section label, top-left

V Variants

• 5 cards (default) — "5 key characteristics" pattern
• 4 cards, custom cols — tighter grid for fewer items

F Typical Page Flow

• After: hero or section intro
• Before: case studies, testimonials, or CTA

P Purpose

Author name in a narrow left column, oversized opening quotation mark, and bold multi-sentence quote on the right. Supports red-highlighted fragments. Best for industry authority quotes, research findings stated as opinion, or philosophy statements.

W When to Use

• Strong industry or research quote where the copy itself is the argument
• Between statistics and the solution to add voice to data
• Not for client testimonials — use TM-01–TM-06 for those

I Required Inputs

• author — name or attribution displayed in left column
• quoteParts[] — array of text fragments; set highlight: true for red emphasis
• sectionTitle — top-left label

F Typical Page Flow

• After: statistics or editorial intro
• Before: services, comparison, or CTA

P Purpose

Numbered list of ranked items. Each row shows: position, circular icon initial, name and description, category tag pill, and a color-coded score box. Score progresses gold → gray → light → white to reinforce hierarchy visually.

W When to Use

• Vendor comparison or competitive landscape sections
• Tool rankings with category tags and scores
• Any ordered list where position number carries meaning

I Required Inputs

• items[] — each with name, optional description, iconText, tag, score, scoreVariant
• scoreVariant — gold / gray / light / white. Convention: gold for rank 1

F Typical Page Flow

• After: comparison or statistics section
• Before: CTA or case studies

P Purpose

3-column comparison table: left (red arrow, unfavorable), center labels, right (green arrow, favorable). Any number of rows. Fixed semantic convention: red = unfavorable left, green = favorable right. Best for "us vs them," "before vs after," or approach A vs B.

W When to Use

• Contrasting two approaches across multiple criteria
• Competitive positioning (enterprise vs boutique, in-house vs outsourced)
• Before vs after transformation arguments

I Required Inputs

• rows[] — each with label, leftText, rightText
• leftTitle / rightTitle — column headers
• title — full comparison title, top-left

V Variants

• 3 rows (default) — standard comparison
• 2 rows — condensed for tight page layouts

F Typical Page Flow

• After: statistics or pull quote
• Before: ranking, CTA, or testimonials

P Purpose

Bordered grid using the red CSS border-grid technique (container border-top + border-left; each card border-right + border-bottom). Each card: optional icon, title, body. Best for "why us," differentiator lists, or feature highlights where all items carry equal weight.

W When to Use

• Advantages, differentiators, or feature benefits with equal weight
• Best in multiples of cols (2 or 3) to avoid orphan cells
• Not on the same page as DESC-05 (Cards) — both are advantage grids; pick one

I Required Inputs

• cards[] — each with optional iconSvg, title, body
• cols — 2 or 3 (default 3)
• sectionTitle — top-left label

V Variants

• 3 columns (default) — 6 cards, standard grid
• 2 columns — 4 cards, wider content per card

F Typical Page Flow

• After: comparison, ranking, or pull quote
• Before: testimonials, case studies, or CTA

P Purpose

Two-column table contrasting a pros list (dark icons) against a cons list (red icons), with staggered scroll-reveal animation. Best for trade-off arguments, option comparisons, or factual "benefits vs drawbacks" breakdowns embedded inside article or descriptive sections.

W When to Use

• Factual trade-off content — not for testimonials or sales copy
• Embedded inside an article section or descriptive block
• Option A vs option B where both sides have real merit

I Required Inputs

• pros[] — left column string array
• cons[] — right column string array
• prosLabel / consLabel — column headers (default "Pros" / "Cons")

F Typical Page Flow

• Embedded inside: article sections or descriptive blocks
• After: a claim or argument that needs evidence on both sides