Premium content block playground
A test piece that exercises every fenced component block so Clinton AI admins can see how stats, callouts, takeaways, quotes, charts, timelines, tables and two-column layouts render in the public view.
Clinton Onyekwere
Clinton AI Ltd
This page exists so we can check every premium content block renders correctly. Standard markdown (paragraphs, bold, italic, links) renders as before. Fenced blocks with a known language tag get replaced with the shared component from src/components/content-blocks/.
Stat row
Use this at the top of a piece to anchor three hero numbers.
Callout
A one-line summary block. Amber left border, warm background.
A success variant for wins:
A warning variant when something needs attention:
Key takeaways
Drop this at the top of a long piece as a TL;DR, or at the bottom as a summary.
- Fenced blocks render as shared components. Standard markdown still works around them.
- Never insert a block mid-paragraph. Always between sections.
- The AI Enhance button reads your prose and only inserts blocks where they're supported by the content.
Quote
Use when the prose contains a genuine quote worth highlighting.
“The speed and reliability changed how our procurement team works. We went from writing every RFQ by hand to fully structured enquiries in under two minutes.”
Bar chart
Horizontal bars with one highlighted row. Scales to the largest value in the list.
Data table
Prose-compatible comparison table. Numeric columns right-align automatically.
Gantt
Project timeline. Each row has a label, a week range, and an intensity keyword.
Two-column comparison
Side-by-side cards for before/after, pros/cons, then/now framings.
Round-up
Standard markdown keeps working everywhere. Lists:
- First item in a regular bullet list
- Second item
- Third item
And ordered:
- First step, numbered
- Second step
- Third step
Tables via markdown (without a fence) still render:
| Column A | Column B | Column C |
|---|---|---|
| Row 1A | Row 1B | Row 1C |
| Row 2A | Row 2B | Row 2C |
Code blocks without a matching fence language fall through as code:
export function helloWorld() {
return "hello";
}
Mermaid charts still render via the existing integration:
graph TD
A[Request] --> B{Auth?}
B -->|Yes| C[Process]
B -->|No| D[Reject]
That's every block the system currently supports. If you see anything above that doesn't render the way you expect, something in the parser or the renderer is broken.