Typography

Heading 2 — Main Section Title

This is a regular paragraph for comparing text sizes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula nulla vitae lectus tincidunt, a congue odio bibendum. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3 — Subsection Title

Another paragraph for size comparison. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 — Minor Section

Paragraph after h4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 5 — Sub-minor Section

Heading 6 — Smallest Heading

---

Inline Formatting

This paragraph has bold text, italic text, bold italic, underlined text, strikethrough text, highlighted text, and inline code. Here is a ^superscript and a _subscript reference.

Links

Here is a standard hyperlink within a paragraph. And here is an external link that opens in a new tab.

---

Blockquote

This is a blockquote. It should be styled distinctly from regular paragraphs and can contain multiple lines of text.

Attribution Source

Pull Quote

This is a pull quote — typically used to highlight a key statement from the article.

Expert Name

---

Unordered List

• First item in the list
• Second item with more text to show wrapping behaviour
• Third item
  • Nested item one
  • Nested item two
• Fourth item

Ordered List

1. Step one of the process
2. Step two with additional detail
3. Step three
   1. Sub-step 3a
   2. Sub-step 3b
4. Step four

---

Image Block

Table Block

Country	GDP (Trillions)	Population (M)	Growth Rate
United States	$25.5	331	2.1%
China	$18.3	1,412	5.2%
Germany	$4.1	83	1.8%

Striped Table Variant

Metric	Q1	Q2	Q3	Q4
Revenue	$1.2M	$1.5M	$1.8M	$2.1M
Expenses	$0.9M	$1.0M	$1.1M	$1.2M
Profit	$0.3M	$0.5M	$0.7M	$0.9M

---

Columns Block

---

Separator Variants

Default (narrow) separator:

---

Wide separator:

---

Dots separator:

---

---

Code Block

function analyseMarket(data) {
  const filtered = data.filter(item => item.volume > 1000);
  return filtered.map(item => ({
    symbol: item.ticker,
    change: ((item.close - item.open) / item.open * 100).toFixed(2)
  }));
}

Preformatted Block

QUARTERLY EARNINGS REPORT
=========================
Company:    Acme Corp
Quarter:    Q3 2026
Revenue:    $4.2 billion
Net Income: $890 million
EPS:        $2.34

---

YouTube Embed

---

Audio Block

---

Button Block

File Block

---

Cover Block

Media & Text Block

---

Group Block with Background

Verse Block

Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth.

Spacer Block

Content before spacer.

Content after spacer (80px gap above).

---

Details / Accordion Block

Click to expand — What are market fundamentals?

Market fundamentals are the qualitative and quantitative financial information that contributes to evaluating a company or security.

Click to expand — How is GDP calculated?

GDP can be calculated using three approaches: the expenditure approach (C + I + G + NX), the income approach, or the production approach.

---

Font Size Utilities

This paragraph has the small font size class.

This paragraph has the regular font size class.

This paragraph has the medium font size class.

This paragraph has the large font size class.

This paragraph has the huge/x-large font size class.

Text Alignment

Left-aligned text (default).

Center-aligned text.

Right-aligned text.

Large Quote Variant

A large-style quote for emphasis. These are often used for particularly impactful statements in feature articles.

Notable Figure