Kevin Chu
Components Demo
PARKnSHOP

Work Post Components Demo

This document demonstrates all the available components used in work posts within the app/work/ directory.

1. WorkSummary Component

The WorkSummary component displays project metadata in a responsive 3-column grid layout (desktop) and single column (mobile). It uses the

syntax.

Basic Example

Extended Example with Multiple Fields

 

2. WorkLink Component

The WorkLink component creates attractive linked cards to external websites or any custom URL using the

syntax.

Example External Links in Grid

Consecutive links automatically form a 2-column grid:

Single Link Example

This single link displays with full width:

Another Grid Section

More consecutive links in a separate grid:

Key Features:

  • External links automatically open in new tabs
  • Internal links stay in the same tab
  • External link icon appears for external URLs
  • Same visual style as WorkSection thumbnails
  • Automatic image URL processing
  • Automatically groups consecutive links into a 2-column grid layout
  • Single links display with full width
  • Responsive design: grid becomes single column on mobile

 

3. WorkPoints Component

The WorkPoints component displays 2-column text points with titles and subtitles using the

syntax. It's perfect for highlighting key features, benefits, or project outcomes.

Basic Example

Extended Example with More Points

Key Features:

  • 2-column layout on desktop, single column on mobile
  • Responsive design that adapts to different screen sizes
  • Supports stacking multiple WorkPoints components
  • Clean typography with proper spacing and hierarchy
  • Dark mode support with appropriate color schemes

 

3.5. WorkPoints Variants

The WorkPoints component now has several variants to support different layouts and widths:

WorkPointsThreeCol - 3-Column Layout (1200px max-width)

The 3-column variant displays points in 3 columns on desktop (1 on mobile, 2 on tablet, 3 on desktop) with 1200px max-width:

WorkPointsMid - 2-Column with Mid-Width (1200px)

The mid-width variant uses the same 2-column layout but with 1200px max-width and full viewport behavior:

WorkPointsThreeColMid - 3-Column with Mid-Width (1200px)

The 3-column mid-width variant combines 3-column layout with 1200px max-width behavior:

Variant Features:

  • : Original 2-column layout (stays within normal content width)
  • : 3-column layout with 1200px max-width (1→2→3 columns responsive)
  • : 2-column with 1200px max-width, full viewport behavior
  • : 3-column with 1200px max-width, full viewport behavior
  • All variants: Maintain consistent styling, spacing, and dark mode support
  • Responsive: All variants adapt gracefully across different screen sizes
  • 1200px max-width: Three new variants break out of normal content constraints like WorkCarousel
  • HTML parsing: All variants now properly parse HTML content in subtitles

Syntax Examples

<!-- Original 2-column (normal content width) -->




<!-- 3-column with 1200px max-width -->




<!-- 2-column with 1200px max-width -->




<!-- 3-column with 1200px max-width (same as workpointsthreecol) -->

 

4. WorkStats Component

The WorkStats component displays statistics in a responsive grid layout with large numbers/percentages and descriptive text below. It automatically adapts the layout based on the number of stats provided.

2 Stats Example

3 Stats Example (as shown in screenshot)

4+ Stats Example (stacking behavior)

Key Features:

  • Responsive grid layout that adapts based on the number of stats
  • Large, prominent numbers with smaller descriptive text below
  • Left-aligned text for better readability
  • Supports 2, 3, or more stats with automatic column management
  • Dark mode support with appropriate color schemes

 

5. Image Components

Standard Images

Regular images with alt text:

Wide Images

Images that span the full width using the (wide) modifier:

Images with Captions

Images with descriptive captions using the :caption= syntax:

 

6. WorkHighlight Component

The WorkHighlight component creates a highlighted pullout section with an icon and content. It's perfect for emphasizing important information, key insights, or special notes within your work posts.

Basic Example

Example with HTML Content

 

7. Side-by-Side Images

The SideBySideImages component displays two images side by side using the !side-by-side[...] syntax. It now supports different sizes:

Default Size (1200px max-width, centered)

Mid Size (1200px max-width, full viewport behavior)

Wide Size (1632px max-width, full viewport behavior)

 

8. Image + Text Side-by-Side

The ImageTextSideBySide component displays an image alongside text content in a flexible layout. It supports left/right positioning, optional titles, and size variants.

Left Image Position (with title)

Right Image Position (without title)

Mid Size with Left Image

Wide Size with Right Image

Video Support

 

9. Combined Examples

Project Overview with Multiple Components

This project involved redesigning the online shopping experience for city'super, a premium supermarket chain. The main challenge was bringing the online experience up to par with their exceptional physical shopping experience.

Design Process Documentation

The design process involved multiple stages of research, ideation, and testing:

Navigation Design Iterations

We explored different navigation patterns and their trade-offs:

Before and After Comparisons

Final Design Showcase

Related Work

Check out other related projects using WorkLink components:

 

9. Typography and Content Structure

Headings and Text Formatting

Main Project Title

Section Heading

Subsection Heading

Bold text for emphasis and italic text for subtle emphasis.

Lists and Content Organization

Key insights from the project:

  • Online/Offline cross-selling is very common
  • Shoppers expect discounts in physical stores to be present online
  • Additional online and VIP exclusive offers are highly valued
  • Product selection should match between online and physical stores

Numbered Lists

Our design process:

  1. Research Phase: Customer surveys, analytics analysis, stakeholder interviews
  2. Define Phase: Persona creation, journey mapping, pain point identification
  3. Ideate Phase: Navigation pattern exploration, competitive analysis
  4. Design Phase: Wireframing, prototyping, visual design
  5. Test Phase: Stakeholder feedback, usability testing
  6. Implement Phase: Developer handoff, design QA

Quotes and Callouts

"The new navigation system significantly improved product discoverability and reduced customer support tickets related to finding products." - eCommerce Manager

 

10. Advanced Layout Examples

Multi-Column Content with Images

The redesign addressed several key areas:

Navigation Improvements

Changed from hamburger menu to category-based top navigation for better discoverability.

Carousel Enhancements

Improved banner navigation with always-visible arrows and VIP exclusive promotions.

Brand Showcase

Added dedicated brand section to highlight premium product selection.

Complex Project Metadata

 

Component Usage Guidelines

WorkSummary Best Practices

  • Use concise labels (Product, Timeline, Role, Team, Skills, etc.)
  • Keep values brief but descriptive
  • Include 3-8 items for optimal layout
  • Use pipe | to separate label:value pairs

WorkPoints Best Practices

  • Use descriptive titles that clearly identify the point or feature
  • Keep subtitles informative but concise
  • Include 2-8 points for optimal layout (displays in 2 columns on desktop)
  • Use pipe | to separate title:subtitle pairs
  • Perfect for highlighting key features, benefits, or project outcomes
  • Can be stacked multiple times for different categories of information

WorkPoints Variants Best Practices

  •  (Original)    : Use for standard 2-column layouts within normal content width
  • : Use when you have 6+ points and want better visual distribution (3 columns on desktop, 1200px max-width)
  • : Use when you need 2-column layout but want to break out of content constraints (1200px max-width)
  • : Use for 6+ points with mid-width behavior (3 columns, 1200px max-width)
  • Choose based on content: More points work better with 3-column variants
  • Consider context: Mid-width variants work well for emphasizing important sections
  • Responsive behavior: All variants gracefully adapt from 1→2→3 columns based on screen size
  • HTML support: All variants now support HTML formatting in subtitles (bold, italic, links, etc.)

WorkStats Best Practices

  • Use clear, prominent values (percentages, numbers, metrics)
  • Keep descriptions concise but informative
  • Include 2-6 stats for optimal layout (2-3 columns on desktop)
  • Use pipe | to separate value:description pairs
  • Perfect for highlighting key metrics, research findings, or project impact
  • Values should be easily scannable (38%, 2.5x, 150+, etc.)

WorkHighlight Best Practices

  • Use for emphasizing important insights, key findings, or critical information
  • Keep content concise but impactful - aim for 1-3 sentences
  • Perfect for highlighting stakeholder quotes, design principles, or key takeaways
  • Supports HTML formatting for emphasis (bold, italic, links)
  • Use sparingly - 1-2 highlights per page for maximum impact
  • Great for breaking up long sections of text with important callouts

WorkLink Best Practices

  • Use descriptive titles that clearly identify the destination
  • Include helpful subtitles that explain what users will find
  • Choose relevant images that represent the linked content
  • Use full URLs for external links (https://example.com)
  • External links automatically open in new tabs for better UX
  • Internal links can use relative paths (/about) or absolute paths

Image Best Practices

  • Use (wide) modifier for full-width hero images
  • Add captions with :caption= for context
  • Optimize images for web (WebP format preferred)
  • Use descriptive alt text for accessibility

Side-by-Side Image Best Practices

  • Use for before/after comparisons
  • Keep image dimensions similar for best results
  • Use descriptive labels for each image
  • Ensure both images are relevant to the comparison
  • Size options: Default (centered, 1200px max), Mid (full viewport, 1200px max), Wide (full viewport, 1632px max)
  • Use (mid) for images that should break out of content width but stay within 1200px
  • Use (wide) for images that need maximum width and visual impact

ImageTextSideBySide Best Practices

  • Use for feature explanations, process descriptions, or showcasing design details
  • Syntax options: 4-part (no title) or 5-part (with title) for flexible content structure
  • Position options: left or right to control image placement relative to text
  • Size options: Default (centered, 1200px max), Mid (full viewport, 1200px max), Wide (full viewport, 1632px max)
  • Keep descriptions concise but informative - aim for 1-3 sentences
  • Use titles to highlight key features or benefits
  • Choose images that directly relate to and support the text content
  • Video support: Automatically handles video files with proper autoplay, loop, and muted attributes
  • Responsive design: Stacks vertically on mobile, side-by-side on desktop
  • Perfect for explaining design decisions, showcasing features, or walking through processes
  • Use left positioning when the image provides context for what follows in the text
  • Use right positioning when the text explains or describes what's shown in the image

 

This demo showcases all the major components available for work posts. Each component is designed to be responsive and accessible, providing a rich content experience for portfolio case studies.