Hamburger Menu

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.

Pill Component

Default Green Yellow Custom

Grid Component

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Notion Component

📅 Meetings Manual Title Example

FormattedDate Component

Callout Component Tests

Basic Callouts with Icons

Callouts without Titles

Callouts without Icons

Responsive Test

Narrow Container (300px):

BookmarkCard Tests

Test 1: Wide Container (Horizontal Layout)

Test 2: Medium Container

Test 3: Narrow Container (Should Stack)

Test 4: Very Narrow Container (Should Stack)

Embed Component Tests

Embed Component: YouTube

Play

Embed Component: Tweet

Embed Component: Vimeo

Embed Component: Regular Article (Fallback)

Embed Component: Loom