Style Test for Custom SCSS

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Styles

Bold Text
Italic Text
~~Strikethrough~~
Inline Code
Example Link
Superscript: E=mc²
Subscript: H₂O

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

Lists

Unordered List

Item 1
Item 2
- Sub-item 2.1
- Sub-item 2.2
Item 3

Ordered List

First item
Second item
1. Sub-item 2.1
2. Sub-item 2.2
Third item

Code Blocks

# Python Code Example
def greet(name):
    print(f"Hello, {name}!")

greet("World")

# R Code Example
x <- c(1, 2, 3, 4, 5)
mean(x)

Tables

Simple Table

Column 1	Column 2	Column 3
Value 1	Value 2	Value 3
Data 1	Data 2	Data 3

Advanced Table

Header	Numeric	Boolean
Row 1	10	True
Row 2	15	False
Row 3	20	True

Images

Local Image

Quarto Logo

External Image

Alerts and Callouts

Note

Note: This is a note callout.

Warning

Warning: This is a warning callout.

Tip

Tip: This is a tip callout.

Important

Important: This is an important callout.

Buttons

Primary Button Click Me

Secondary Button Click Me

Outline Button Click Me

Math Equations

Inline Math

The formula for energy is $E = mc^2$.

Display Math

\[ f(x) = \int_{-\infty}^\infty e^{-x^2} dx \]

Blockquotes

This is a blockquote. Blockquotes are styled with a left border.

Custom Components

Example of a Custom Box ```html

This is a custom-styled box.

Here is an example of a footnote¹.

Card Title

This is a card body. Cards can contain any content.

Note

This is a note callout styled with $info Bootstrap variable.

Warning

This is a warning callout styled with $warning Bootstrap variable.

Danger

Important

This is a danger callout styled with $danger Bootstrap variable.

Primary Button Click Me

Warning Button Click Me

Danger Button Click Me

Success Button Click Me

Add your custom-styled elements here to test them.

Footnotes

This is the footnote content.↩︎