Kitchen Sink

Global style reference. This page is unlisted.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text with strong emphasis and italic emphasis. Also bold works. Here's a link to nowhere for hover effects.

Second paragraph to show spacing. The quick brown fox jumps over the lazy dog. Typography should feel readable at length without causing eye strain.

Blockquote

"The future is already here — it's just not evenly distributed." — William Gibson

Code

Inline code snippets look like this.

// Code block
function greet(name) {
  console.log(`Hello, ${name}`);
  return true;
}

Another Example

npm install astro

Lists

Unordered List

• First item
• Second item
• Third item with more text to show wrapping behavior

Ordered List

1. Step one
2. Step two
3. Step three

Command List

• npm install - Install dependencies
• npm run dev - Start dev server
• npm run build - Production build

Callouts

Table

Form Elements

Text Input

Textarea

Images

Images get the cyan border treatment:

Image as Link

Markdown syntax: [![alt](src)](href)

Horizontal Rule

The glowing divider you've been seeing throughout.