Section Heading
This is the main content area. It can contain paragraphs, headings, lists, and images.
Subheading (h4)
You can add multiple paragraphs and nest content here.
- List item one
- List item two
- List item three
Two Column with Sidebar
type: "two-column-with-sidebar"
{
"type": "two-column-with-sidebar",
"sectionTitle": "Optional - appears in side nav",
"left": [
{
"heading": "Section Heading",
"blocks": [
{ "type": "paragraph", "text": "Your text here" },
{ "type": "heading", "level": "h4", "text": "Subheading" },
{ "type": "list", "style": "ul", "items": ["Item 1", "Item 2"] }
],
"imageFull": {
"src": "/path/to/image.jpg",
"alt": "Description",
"caption": "Optional caption"
}
}
],
"sidebar": {
"Section Title": ["Item 1", "Item 2", "Item 3"]
}
}
// Main classes .cs-block-two-column // Wrapper .cs-layout-grid // Grid container .cs-main-content // Left column .cs-content-section // Content section .cs-section-heading // Section heading (h2) .cs-section-text // Paragraph text .cs-text-block-heading // Subheading (h3, h4, etc) .cs-text-block-list // List (ul/ol) .cs-sidebar // Right sidebar .cs-sidebar-content // Sidebar wrapper .cs-sidebar-section // Sidebar section .cs-sidebar-title // Sidebar heading .cs-sidebar-list // Sidebar list (dl) .cs-sidebar-item // Sidebar list item (dd) .cs-inline-image-full // Full-width image in section
Story Hook
type: "story-hook"
"This is a compelling quote that hooks the reader"
This is the context that provides background and sets up the story. It should be engaging and draw the reader into the case study.
{
"type": "story-hook",
"quote": "Your compelling quote here",
"context": "Context paragraph that sets up the story"
}
Timeline Process
type: "timeline-process"
How I Got There
Phase 1: Discovery
Week 1-2- Conducted user research
- Analyzed existing workflows
- Identified pain points
Phase 2: Design
Week 3-4- Created wireframes
- Developed prototypes
- User testing sessions
{
"type": "timeline-process",
"sectionTitle": "Optional - appears in side nav",
"heading": "How I Got There",
"phases": [
{
"title": "Phase 1: Discovery",
"period": "Week 1-2",
"icon": "iconoir:search",
"highlights": ["Item 1", "Item 2", "Item 3"]
}
]
}
Before/After Comparison
type: "before-after-comparison"
Impact & Results
Before
- Problem one
- Problem two
- Problem three
After
- Solution one
- Solution two
- Solution three
{
"type": "before-after-comparison",
"sectionTitle": "Optional - appears in side nav",
"heading": "Impact & Results",
"before": {
"label": "Before",
"items": ["Problem 1", "Problem 2", "Problem 3"]
},
"after": {
"label": "After",
"items": ["Solution 1", "Solution 2", "Solution 3"]
}
}
Key Insight / Callout
type: "key-insight"
Key Learning
This is the main insight or learning that you want to highlight. It should be concise and impactful.
→ Result: The outcome or impact of this insight.
{
"type": "key-insight",
"sectionTitle": "Optional - appears in side nav",
"icon": "iconoir:light-bulb",
"title": "Key Learning",
"insight": "Your main insight text here",
"result": "The outcome or impact"
}
Two Column Text
type: "two-column-text"
Left Column
This is the left column content. You can use HTML formatting like bold and italic.
Right Column
This is the right column content. Each column can have multiple blocks.
{
"type": "two-column-text",
"sectionTitle": "Optional - appears in side nav",
"columns": [
{
"heading": "Left Column",
"blocks": [
{ "type": "paragraph", "text": "Column 1 content" },
{ "type": "list", "style": "ul", "items": ["Item 1", "Item 2"] }
]
},
{
"heading": "Right Column",
"blocks": [
{ "type": "paragraph", "text": "Column 2 content" }
]
}
]
}
// Usage Notes: // - Can be used as a top-level block // - Can be nested inside section blocks // - Each column supports all text block types // - HTML formatting supported in text // Classes: .cs-block-two-column-text // Wrapper .cs-two-column-grid // Grid container .cs-text-column // Individual column .cs-column-heading // Column heading (h3)
Three Column Text
type: "three-column-text"
Column 1
First column content with HTML support.
Column 2
Second column content.
Column 3
Third column content.
{
"type": "three-column-text",
"sectionTitle": "Optional - appears in side nav",
"columns": [
{
"heading": "Column 1",
"blocks": [
{ "type": "paragraph", "text": "Content with <strong>HTML</strong>" }
]
},
{
"heading": "Column 2",
"blocks": [
{ "type": "paragraph", "text": "Second column" }
]
},
{
"heading": "Column 3",
"blocks": [
{ "type": "paragraph", "text": "Third column" }
]
}
]
}
// Usage Notes: // - Can be used as a top-level block // - Can be nested inside section blocks // - Each column supports all text block types // - HTML formatting supported in text // - Perfect for comparisons or categorization // Classes: .cs-block-three-column-text // Wrapper .cs-three-column-grid // Grid container (3 columns) .cs-text-column // Individual column .cs-column-heading // Column heading (h3)
Text & Image Split
type: "text-image-split"
Section Heading
Your text content goes here. This layout places text on one side and an image on the other.
{
"type": "text-image-split",
"layout": "text-left", // or "text-right"
"heading": "Section Heading",
"text": "Your text content here",
"image": "/path/to/image.jpg",
"alt": "Image description",
"caption": "Optional image caption"
}
Full Width Image
type: "full-width-image"
{
"type": "full-width-image",
"src": "/path/to/image.jpg",
"alt": "Image description",
"caption": "Optional caption"
}
Image Grid
type: "image-grid"
{
"type": "image-grid",
"sectionTitle": "Optional - appears in side nav",
"columns": 3, // 2 or 3
"images": [
{
"src": "/path/to/image1.jpg",
"alt": "Image description",
"caption": "Optional caption"
},
{
"src": "/path/to/video.mov", // Videos supported!
"alt": "Video description",
"caption": "Video caption"
}
]
}
Full Width Text
type: "full-width-text"
Section Heading
This is a full-width text block. It spans the entire content area without sidebars or columns.
You can have multiple paragraphs here.
{
"type": "full-width-text",
"heading": "Section Heading",
"text": "Your text content here.\n\nUse double line breaks for new paragraphs."
}
Text Block Types (for use inside "blocks" arrays)
types: "paragraph", "heading", "list"
Regular paragraph text
This is a callout text block with special styling—it appears as a speech bubble with blue background, rounded corners, italic font, and extra padding. Perfect for highlighting important quotes or key statements.
Heading Level 3
Heading Level 4
- Unordered list item
- Another item
- Third item
- Ordered list item
- Another item
- Third item
// Regular paragraph
{ "type": "paragraph", "text": "Your text here" }
// Paragraph with HTML (for bold, breaks, etc)
{ "type": "paragraph", "html": "<strong>Bold text</strong><br>Next line" }
// Callout paragraph
{ "type": "paragraph", "class": "callout", "html": "<strong>Callout</strong>" }
// Heading
{ "type": "heading", "level": "h3", "text": "Heading text" }
// Unordered list
{ "type": "list", "style": "ul", "items": ["Item 1", "Item 2"] }
// Ordered list
{ "type": "list", "style": "ol", "items": ["Item 1", "Item 2"] }
Sidebar Navigation (Auto-generated)
Appears when hero is scrolled
This navigation is automatically generated from blocks with sectionTitle property. It appears fixed on the right side when scrolling.
// Navigation is auto-generated from blocks with sectionTitle
{
"type": "two-column-with-sidebar",
"sectionTitle": "Context / The Problem", // ← This creates nav item
...
}
// Features:
// - Auto-numbered (01, 02, 03...)
// - Label appears on hover
// - Active state follows scroll position
// - Only appears when hero is scrolled
// - Hidden on mobile
// Sidebar nav classes .cs-side-nav // Container (fixed position) .cs-side-nav-list // Nav list .cs-side-nav-item // List item .cs-side-nav-link // Link (clickable) .cs-side-nav-link.active // Active state .cs-side-nav-label // Section title (shows on hover) .cs-side-nav-number // Number (01, 02, 03) .cs-side-nav-indicator // Animated indicator bar
Collapsible Sticky Hero (Auto-behavior)
Shrinks when scrolling
Auto-behavior: The hero section (breadcrumbs + close button + title + tags) is sticky at the top. When you scroll down, it automatically shrinks to show a compact version with just breadcrumbs and close button. The metrics section moves up into the hero area when collapsed.
// Automatic behavior - no config needed! When scrollTop > 0: .cs-sticky-header gets class "scrolled" Hero shrinks (smaller padding, hidden title/tags) Metrics move into sticky header Side navigation appears When scrollTop === 0: .cs-sticky-header removes "scrolled" class Hero expands (full title, tags, metrics below) Side navigation hides
// Hero & sticky header classes .cs-sticky-header // Sticky container .cs-sticky-header.scrolled // Collapsed state .cs-breadcrumbs // Prev/Next navigation .cs-breadcrumb-nav // Individual nav button .case-study-close // Close button .cs-hero // Hero section .cs-hero-title // Project title .cs-hero-subtitle // Subtitle .cs-hero-tags // Tags container .cs-tag // Individual tag .cs-hero-metrics // Metrics in collapsed hero .cs-metrics // Full metrics section
Metric Cards
Used in case study metrics section
Displays key project metrics with icon, value, and label. Features decorative corner dots and hover effect with transform and shadow.
+15 System States
Translated into human language
Self-diagnosis
Customer autonomy to understand journey
1 Magic Link
From unreliable email system
// Metric cards are auto-generated from JSON detailMetrics array
// In your JSON:
"detailMetrics": [
{
"icon": "iconoir:network-right",
"value": "+15 System States",
"label": "Translated into human language"
},
{
"icon": "iconoir:user-scan",
"value": "Self-diagnosis",
"label": "Customer autonomy"
}
]
// Generates HTML:
<div class="cs-metric-card">
<div class="cs-metric-content">
<div class="cs-metric-top">
<div class="cs-metric-icon-wrapper">
<i class="iconoir-network-right cs-metric-icon"></i>
</div>
</div>
<div class="cs-metric-value">+15 System States</div>
<div class="cs-metric-label">Translated into human language</div>
</div>
<div class="cs-metric-border"></div>
<div class="cs-metric-dot dot-top-left">...</div>
<div class="cs-metric-dot dot-top-right">...</div>
<div class="cs-metric-dot dot-bottom-left">...</div>
<div class="cs-metric-dot dot-bottom-right">...</div>
</div>
// SCSS Mixin @mixin metric-card( $min-width: 270px, $min-height: 130px, $content-min-height: 6rem, $padding: $space-12, $border-color: $color-blue-200, $border-width: 0.12rem, $bg-color: $color-white-alpha, $icon-size: 1.5rem, $value-color: $color-blue-400, $value-font-size: $font-size-base, $label-color: $color-neutral-light, $label-font-size: $font-size-xs ) // Classes: .cs-metric-card // Container .cs-metric-content // Main content wrapper .cs-metric-border // Border overlay .cs-metric-icon-wrapper // Icon container .cs-metric-icon // Icon element .cs-metric-value // Metric value text .cs-metric-label // Metric label text .cs-metric-dot // Corner dot decoration
Scroll Hint (Ripple Animation)
Auto-behavior component
Auto-behavior: The scroll hint appears at the bottom of the About section (first screen). When user scrolls or clicks it, it fades out. Features ripple animation with 3 expanding circles and pulsing text.
Interaction states: On hover, animation slows down and circles get blue tint. On click, compresses and fades.
scroll
<div class="scroll-hint">
<div class="scroll-hint-inner">
<div class="scroll-hint-text">
<p>scroll</p>
</div>
<div class="ripple-box"></div> <!-- Innermost circle -->
<div class="ripple-box"></div> <!-- Middle circle -->
<div class="ripple-box"></div> <!-- Outermost circle -->
</div>
</div>
// Main classes .scroll-hint // Container (absolute position, bottom center) .scroll-hint.hidden // Hidden state .scroll-hint-inner // Inner wrapper (120px square) .scroll-hint-text // Text container .ripple-box // Ripple circle layer // Animations @keyframes ripple // Circle expansion (scale 1 → 1.3 → 1) @keyframes scroll-hint-pulse // Opacity pulse for text @keyframes text-scale // Text scale animation // States &:hover // Slows animation, adds blue tint &:active // Compresses on click
🎨 Theme Support
All blocks automatically adapt to the project theme (blue, green, neutral, red). Colors for links, buttons, and accents change based on the data-theme attribute.