Atomix One is a hybrid theme, meaning it supports both the Classic Editor’s HTML elements and the Block Editor’s structured blocks side by side. This page is a showcase for both: the first half renders through a Classic block using traditional HTML tags such as headings, blockquotes, and tables, while the second half uses native Gutenberg blocks to achieve comparable formatting.

Classic Elements

Content below is authored in the Classic block, using raw HTML tags rather than block markup.

Headings

Header one

Header two

Header three

Header four

Header five

Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

The HTML <blockquote> element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

multiple contributors — MDN HTML element reference: blockquote

Tables

Employee	Salary	Note
Jane	$1	Because that’s all Steve Jobs needed for a salary.
John	$100K	For all the blogging he does.
Jane	$100M	Pictures are worth a thousand words, right? So Tom x 1,000.
Jane	$100B	With hair like that?! Enough said…

Definition Lists

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

#dowork

Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.

Do It Live

I’ll let Bill O’Reilly explain this one.

Unordered Lists (Nested)

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Ordered List (Nested)

1. List item one — start at 8
   8. List item one
   3. List item one — reversed attribute
   4. List item two
   5. List item three
   6. List item four
2. List item two
3. List item three
4. List item four

Common HTML Tags

Address tag — sets aside contact information for its nearest article or body ancestor:

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor tag — creates a hyperlink: this is an example of a link.

Abbreviation tag — marks up an abbreviation or acronym, often paired with a title attribute for the expansion: the abbreviation srsly stands for “seriously”.

Code tag — styles a fragment of computer code inline or as a block:

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Long unbroken strings inside a code block rely on word-wrap: break-word; to avoid overflowing their container.

Emphasis tag — italicizes the enclosed text, typically used to indicate stress emphasis.

Preformatted tag — preserves whitespace and line breaks exactly as typed, useful for poetry or ASCII art:

The Road Not Taken
 Robert Frost

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;

I shall be telling this with a sigh
Somewhere ages and ages hence:
Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.

Quote tag — for short, inline quotations: Developers, developers, developers… — Steve Ballmer.

Strike/S tag — this tag shows strike-through text, used to mark content that is no longer accurate or relevant.

Small tag — this tag renders text at a smaller size, often used for fine print or side comments.

Strong tag — this tag shows bold text, indicating strong importance.

Subscript tag — getting our science styling on with H₂O, which pushes the “2” down.

Superscript tag — sticking with science, Albert Einstein’s E = MC², which lifts the “2” up.

Images

A standard image with an optional caption, rendered using the classic <figure> and <figcaption> elements:

This sentence is followed by a horizontal rule:

---

 

Block Elements

The same content as the Classic section above, rebuilt using native Gutenberg blocks, followed by a selection of block-only formatting options that have no direct classic equivalent.

Heading block

The Heading block offers a level selector (H1–H6) directly in the toolbar, rather than requiring a separate tag for each size:

Header one

Header two

Header three

Header four

Header five

Header six

---

Quote block

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

The HTML <blockquote> element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

— multiple contributors, MDN HTML element reference: blockquote

---

Table block

Employee	Salary	Note
Jane	$1	Because that’s all Steve Jobs needed for a salary.
John	$100K	For all the blogging he does.
Jane	$100M	Pictures are worth a thousand words, right? So Tom x 1,000.
Jane	$100B	With hair like that?! Enough said…

---

List block (unordered, nested)

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

List block (ordered, nested)

1. List item one
   1. List item one
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

---

Common inline elements (Paragraph block)

Anchor — creates a hyperlink: this is an example of a link.

Abbreviation — the abbreviation srsly stands for “seriously”.

Emphasis — italicizes the enclosed text, typically used to indicate stress emphasis.

Strong — this tag shows bold text, indicating strong importance.

Inline quote — for short, inline quotations: Developers, developers, developers… — Steve Ballmer.

Strikethrough — this tag shows strike-through text, used to mark content that is no longer accurate or relevant.

Small — this tag renders text at a smaller size, often used for fine print or side comments.

Subscript — getting our science styling on with H₂O, which pushes the “2” down.

Superscript — sticking with science, Albert Einstein’s E = MC², which lifts the “2” up.

---

Code block

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Unlike the classic <pre><code> pairing, the block automatically escapes HTML characters as you type, so angle brackets render correctly without manual entity encoding.

---

Image block

The Image block supports alignment, captions, alt text, linking, and rounded corners from the block toolbar — no HTML attributes required.

---

Columns block (no classic equivalent)

Multi-column layouts had no native classic-editor equivalent and previously required custom shortcodes or raw HTML/CSS. The Columns block builds them visually, with adjustable widths per column, and stacks automatically on smaller screens.

---

Media & Text block (no classic equivalent)

Places an image and text side by side without touching HTML. The image side and text side can be swapped, and the layout stacks on mobile automatically.

---

Pull Quote block (no classic equivalent)

The Pull Quote block is designed for editorial callouts – a sentence lifted from the body copy and given visual weight to draw readers in.

— the WordPress Block Editor handbook

---

Buttons block (no classic equivalent)

Styled call-to-action buttons previously meant writing a plugin shortcode or pasting an anchor tag with inline styles. The Buttons block gives editors colour, radius, and alignment controls without touching markup.

---

Callout with button (no classic equivalent)

A Group block used as a styled callout panel, combining a heading, body copy, and a Button block within a single container – a common pattern for feature highlights or calls to action.