Comparisons Block
Before After Story
A transformation block that contrasts current state with improved future state.
before-after-story1 slidebalanced density
Before / After
From manual handoffs to guided flow
Show contrast around a single axis of improvement.
Before
Before
After
After
OPF Config
blocks:before-after-storyOpen Presentation Format
{
"$schema": "https://openpresentation.org/schema/opf/v1",
"name": "Before After Story",
"description": "A transformation block that contrasts current state with improved future state.",
"tone": "persuasive",
"narrative": "change-story",
"takeaway": "Make a transformation visible through current and future states.",
"tags": [
"content-block",
"gallery:blocks/before-after-story"
],
"design": {
"colorScheme": "golden-yellow",
"fontScheme": "poppins",
"background": {
"type": "gradient",
"gradient": {
"angle": 135,
"stops": [
{
"color": "#fffaf0",
"position": 0
},
{
"color": "#f7fafc",
"position": 1
}
]
}
}
},
"slides": [
{
"id": "before-after-story",
"layout": "before-after",
"title": "From manual handoffs to guided flow",
"subtitle": "A clear contrast between current and future state.",
"items": [
"Before: fragmented, slow, hard to measure",
"After: guided, faster, measurable"
],
"design": {
"contentBox": true,
"contentAlignment": "left",
"titleAlignment": "left",
"contentDirection": "horizontal"
}
}
]
}Open in visual editorOpen in Inspector
Load this config in the gallery's visual editor, or in the Inspector at pptx.dev.
Use Case
Use when the deck needs to make change tangible.
When to Use
For transformation, product, process, and case-study narratives.
When to Avoid
Avoid when the change is incremental and a timeline would be clearer.
Block Structure
before-after
From manual handoffs to guided flow
A clear contrast between current and future state.
- -Before: fragmented, slow, hard to measure
- -After: guided, faster, measurable
Best Practices
1
Use the same criteria on both sides.
2
Avoid turning each side into a dense list.
3
Make the improvement measurable where possible.
Playground deep link: config=blocks:before-after-story