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.
Personal CRMs Aren't What I Need
A consultant's honest take on why personal CRMs fail for relationship-building. Alternative approaches to managing professional networks by remote work expert Danny Smith.
Apple's Thunderbolt 3 Cables
Technical insights on Apple's Thunderbolt 3 cable design and specifications. Understanding the engineering behind premium computer accessories.
Why Remote Companies Must Be Calm Companies
Discover why calm companies outperform frenzied ones in remote work. Essential insights on sustainable growth and team well-being from organizational health expert Danny Smith.
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.
Personal CRMs Aren't What I Need
A consultant's honest take on why personal CRMs fail for relationship-building. Alternative approaches to managing professional networks by remote work expert Danny Smith.
Apple's Thunderbolt 3 Cables
Technical insights on Apple's Thunderbolt 3 cable design and specifications. Understanding the engineering behind premium computer accessories.
Why Remote Companies Must Be Calm Companies
Discover why calm companies outperform frenzied ones in remote work. Essential insights on sustainable growth and team well-being from organizational health expert Danny Smith.
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):