Hero component (heading, H1)

Article component (H2)

This section demonstrates a generic article content block used to display structured informational text on a page.
It can be used for explanations, introductions, or any long-form content where readability and layout are important.

The content is intentionally neutral and serves as an example of how paragraphs, spacing, and typography appear on the frontend.

Color Variables

A screenshot displayed next to this section illustrates the color palette used on the page.

Heading 3

Below is an example of a bullet list, commonly used to highlight key points or features within an article:

• Primary item — short description of a key concept.
• Secondary item — supporting explanation or detail.
• Optional item — additional information for context.
• Extra item — can be used when more points are needed.

Quick Comparison

This table demonstrates how comparison data can be displayed inside an article section.

How This Section Works

1. Add structured content using headings and paragraphs.
2. Use lists to highlight important points.
3. Insert tables for comparisons or structured data.
4. Combine text with other elements such as quotes or code blocks.

Expert Insight

Well-structured content improves readability and helps users quickly understand the information presented on a page.

1. First Section — a short introductory point that demonstrates how primary information can be organized for quick scanning.
2. Second Section — supporting information that expands on the main topic and provides additional context for the reader.
3. Third Section — a structured subsection that shows how nested content can be used to organize more detailed points.
   1. First Unit — a smaller piece of information related to the main section.
   2. Second Unit — another supporting point that demonstrates hierarchical structure.

inline code

function hello() {
  console.log("Hello, world!");
}