Component Kitchen Sink

This is a sample post that demonstrates all available components and content styles. It won’t appear on the live site because it’s marked as a draft.

Headings

This is an h3 heading

Regular paragraph text with bold text, italic text, and a link for reference. Here’s some inline code as well.

Callouts

Code blocks

Inline code looks like const foo = 'bar' within a sentence.

// A JavaScript code block
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet('world');
console.log(message);

// A PHP code block
function get_custom_taxonomy_count( string $taxonomy ): int {
    $terms = get_terms([
        'taxonomy'   => $taxonomy,
        'hide_empty' => false,
    ]);

    return is_array( $terms ) ? count( $terms ) : 0;
}

Lists

Unordered list:

First item with some text
Second item with bold text
Third item with inline code

Ordered list:

Set up your development environment
Install the required dependencies
Run the build command

Blockquotes

This is a blockquote. It can be used for quotes, citations, or to highlight a passage of text from another source.

Horizontal rule

CTA color options — dark green

Exploring a dark green as the primary CTA color. All options pass WCAG AA contrast for small text on #FAFAF8 (≥4.5:1) and for white text on the green background (buttons).

Option	Hex	Hover	Vibe
████ Forest	`#2B6E4F`	`#235A40`	Classic, trustworthy — leans editorial
████ Sage	`#3A7251`	`#2E5E42`	Slightly warmer, approachable
████ Emerald	`#1E6B4A`	`#18573C`	Richer, more saturated — bolder feel
████ Olive	`#4A6741`	`#3D5636`	Muted, earthy — pairs well with warm neutrals

Contrast ratios on #FAFAF8:

Forest #2B6E4F: 5.0:1 ✓
Sage #3A7251: 4.5:1 ✓
Emerald #1E6B4A: 5.4:1 ✓
Olive #4A6741: 5.1:1 ✓

White on button background:

Forest: 4.9:1 ✓ — Sage: 4.3:1 borderline — Emerald: 5.2:1 ✓ — Olive: 4.7:1 ✓

That’s it! This post covers all the content styles and components currently available.