Article Styleguide
A comprehensive styleguide demonstrating how all key Markdown/MDX features, Astro components, and prose styles render in an article context.
Component & Styleguide
Welcome! This page is a comprehensive styleguide and visual testbed for all Astro components used in this project.
- Use this page to check component appearance, variants, and responsive behavior.
- For context-specific typography and MDX component tests, see:
How to use this styleguide: Review each section below for visual and functional tests of every major component. Add new components here as they are created. Use the Note/Article styleguides to check MDX and content-collection context.
Default text styles
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph with link
Strikethrough,
Superscript,
Bold,
Italic,
Inline code,
Highlighted text,
Ctrl+C Abbr Abbr
Pill Component
Default Green Yellow AccentGrid Component
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
FormattedDate Component
ButtonLink Component
Two-tier button hierarchy for clear information architecture.
Primary Button
Use for main CTAs - one per page section.
Secondary Button
Use for alternative actions like cancel, go back, or secondary options.
Button Comparison
Both variants side by side:
ContentCard Component Tests
Standard Variant
Full card with summary, meta info, and responsive image support.
A Simpler Responsive Grid
A simple percentage-based CSS grid system that makes responsive design math easy
Apple's Thunderbolt 3 Cables
Technical insights on Apple's Thunderbolt 3 cable design and specifications. Understanding the engineering behind premium computer accessories.
On Minimalist Packing
Systems thinking applied to travel. A consultant's approach to minimalist packing for remote work and efficient travel.
Compact Variant
Minimal card with just title and type indicator.
Article Styleguide
A comprehensive styleguide demonstrating how all key Markdown/MDX features, Astro components, and prose styles render in an article context.
A Simpler Responsive Grid
A simple percentage-based CSS grid system that makes responsive design math easy
Apple's Thunderbolt 3 Cables
Technical insights on Apple's Thunderbolt 3 cable design and specifications. Understanding the engineering behind premium computer accessories.
On Minimalist Packing
Systems thinking applied to travel. A consultant's approach to minimalist packing for remote work and efficient travel.
Responsive Testing
Test cards in different container widths to verify responsive behavior.
Narrow Container (300px)
Medium Container (500px)
Wide Container (700px)
Callout Component Tests
Basic Callouts with Icons
Callouts without Titles
Callouts without Icons
Responsive Test
Narrow Container (300px):
