This is a sample post headline

This is a sample post body linking to Brain Outline. This is an external link to Google. Here are some formattings like em, strong, del, code, highlights, underline, and so on.

Images and Videos

Responsive Images

Here's an example of a responsive image that automatically loads the appropriate size and format:

Video Example

And here's an example of a video that supports multiple formats and lazy loading:

This is a sample subheadline

Here's some normal text next to an h2 headline. We can see how the opacity affects readability while maintaining hierarchy. The quick brown fox jumps over the lazy dog.

This is an h3 headline with blue-300

Normal text next to an h3 headline with blue-300 color. This helps us see how the blue tint compares to the default text color. The quick brown fox jumps over the lazy dog. With a list:

• Item 1
• Item 2
• Item 3

And h4 a numbered list

Regular paragraph text next to an h4 with green-300 color. We can evaluate if the green provides enough contrast while staying readable. The quick brown fox jumps over the lazy dog.

1. Item 1
2. Item 2
3. Item 3

This is an h5 headline with orange-300

Standard text content next to an h5 with orange-300 color. This shows how warm colors work in our hierarchy. The quick brown fox jumps over the lazy dog.

Some kbd

cmd + shift + p

cmd + shift + p

Collapsible section

This is highlighted text inside a paragraph.

Hey!

This is an h6 headline with violet-300

Base text beside an h6 with violet-300 color. This is the smallest headline size, showing how the violet color works at this scale. The quick brown fox jumps over the lazy dog.

Code Examples

// This line will be highlighted
const x = 1;
// These lines will be highlighted
console.log(x);

Whats this about?

const carrot = '🥕';
const req = fetch('https://example.com/api/carrot');

Group blocks.

const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

And a foldable code block

() {
    // Only enable fine steps if value hasn't changed
    HapticFeedback.selectionClick();
    if (_lastDragValue == lowerValue && _isDragging) {
        setState(() {
            useFineSteps = true;
            if (isThc) {
                thcFineStepCenter = lowerValue;
            } else {
                cbdFineStepCenter = lowerValue;
            }
        });
        HapticFeedback.heavyImpact();
    }
}

const x = 1;
function y() {
    return x;
}

const x = 1;
function y() {
    return x;
}

Call setState to update the state with useFineSteps and thcFineStepCenter or cbdFineStepCenter. const x = 1;

And a callout

this is normal text

A second callout

Does it do tasklists?

• Task 1
• Task 2
• Task 3

What bout a table