MDC Component Showcase
This page demonstrates every MDC component available for Stratafy content.
1. Callouts — tip, note, warning, caution
Tip (green — best practices)
Note (blue — informational)
Warning (amber — caution)
:: on its own line. Missing closings will break the entire page render.Caution (red — critical)
Callout as Link
2. Card
Basic Card
Key Finding
Organizations lose $99M for every $1B invested due to poor strategy execution. This represents the single largest source of preventable waste in business.
Card as Link
Continuous Alignment
Monitor strategy execution with live dashboards and automated alerts. Detect drift before it compounds into failure.
3. Card Group
Real-time Signals
Detect strategy drift before it compounds.
AI Analysis
AI-powered insights from your strategy data.
Team Alignment
Keep every team member connected to strategy.
4. Accordion
Strategy execution is the process of turning strategic plans into action and results. It bridges the gap between what an organization plans to do and what it actually achieves.
Most strategies fail due to poor communication, lack of alignment, missing feedback loops, and resource misallocation. Only 50% of strategic initiatives fully succeed.
Continuous alignment keeps strategy connected to reality through regular check-ins, real-time monitoring, and automated adaptation instead of relying on quarterly reviews.
5. Tabs
Annual strategic plans reviewed quarterly. Updates happen in boardrooms. Teams learn about changes weeks later. Strategy documents become obsolete the moment they're approved.
Living strategy updated continuously. AI agents monitor execution in real-time. Teams get immediate feedback loops. Strategy adapts to reality rather than reality conforming to outdated plans.
Human judgment sets strategic direction. AI handles monitoring, pattern detection, and early warning signals. Regular human reviews informed by AI-generated insights rather than manual data gathering.
6. Steps
Define Your Strategy
Write a clear strategic intent with measurable objectives. Start with the why before jumping to the what.
Align Your Team
Ensure every team member understands how their work connects to strategy. Use continuous alignment rather than quarterly reviews.
Monitor & Adapt
Use real-time signals to detect strategy drift and course-correct before small deviations become major failures.
7. Collapsible
The research methodology involved surveys of 500+ organizations across 12 industries, with longitudinal tracking over 18 months. Data was collected through structured interviews, performance metric analysis, and organizational assessment frameworks. Results were validated through peer review and cross-referenced with PMI, McKinsey, and Gartner datasets.
8. Badge
This feature is Beta and may change.
Status: Active — Version v2.0
9. Icon
Here are some inline icons: Approved Rejected Pending
10. Kbd
Press + K to open the command palette.
Use ⇧ + Enter to submit.
Navigate with up and down arrow keys.
11. Field + Field Group
draft.12. Blog Quote
"Strategy without execution is hallucination. Execution without strategy is chaos."
"Speed drives your learning cycle and ability to compound knowledge."
Jaryd Hermann
13. Project Timeline
Product Roadmap
14. Metric Card
Basic Metric
Active Users
Metric with Target
MRR
Percentage Metric
Conversion Rate
15. Code Group
export default defineNuxtConfig({
modules: ['@nuxt/content', '@nuxt/ui'],
})
16. Div — Layout Wrapper
Centered content inside a styled div with a background.
17. Inline Attributes
This is highlighted text using inline attributes.
Bold with class
code with styling
18. Data Binding
Article title: MDC Component Showcase
Description: A test page demonstrating all available MDC components for Stratafy content.
19. Standard Markdown Features
Tables
| Feature | Traditional | AI-Native | Impact |
|---|---|---|---|
| Planning | Annual cycle | Continuous | 10x faster adaptation |
| Monitoring | Manual reports | Real-time signals | Early drift detection |
| Feedback | Quarterly reviews | Immediate loops | Reduced execution gap |
| Alignment | Top-down only | Bidirectional | Higher team engagement |
Code Block
const strategy = {
vision: 'Close the execution gap',
approach: 'continuous-alignment',
tools: ['AI agents', 'real-time signals', 'living strategy'],
}
Blockquote
The best strategy is one that adapts. Static plans in dynamic markets are a recipe for failure.
Excerpt Divider
Everything above this point would appear in blog listing previews if this were a real post.
This content would only appear in the full article view.