{"id":9,"date":"2026-07-16T20:56:19","date_gmt":"2026-07-16T19:56:19","guid":{"rendered":"https:\/\/atomix-one.wpatomix.com\/?page_id=9"},"modified":"2026-07-16T20:56:19","modified_gmt":"2026-07-16T19:56:19","slug":"elements","status":"publish","type":"page","link":"https:\/\/atomix-one.wpatomix.com\/index.php\/elements\/","title":{"rendered":"Elements"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Atomix One is a <strong>hybrid theme<\/strong>, meaning it supports both the Classic Editor&#8217;s HTML elements and the Block Editor&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:8px;font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.935), 1.6rem);font-weight:700\">Classic Elements<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-bottom:var(--wp--preset--spacing--10)\">Content below is authored in the Classic block, using raw HTML tags rather than block markup.<\/p>\n\n\n<h3>Headings<\/h3>\n<h1>Header one<\/h1>\n<h2>Header two<\/h2>\n<h3>Header three<\/h3>\n<h4>Header four<\/h4>\n<h5>Header five<\/h5>\n<h6>Header six<\/h6>\n<h3>Blockquotes<\/h3>\n<p>Single line blockquote:<\/p>\n<blockquote>\n<p>Stay hungry. Stay foolish.<\/p>\n<\/blockquote>\n<p>Multi line blockquote with a cite reference:<\/p>\n<blockquote>\n<p>The HTML <code>&lt;blockquote&gt;<\/code> 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 <code>cite<\/code> attribute, while a text representation of the source can be given using the <code>&lt;cite&gt;<\/code> element.<\/p>\n<p><cite>multiple contributors \u2014 MDN HTML element reference: blockquote<\/cite><\/p>\n<\/blockquote>\n<h3>Tables<\/h3>\n<table>\n<thead>\n<tr>\n<th>Employee<\/th>\n<th>Salary<\/th>\n<th style=\"text-align: left;\">Note<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Jane<\/td>\n<td>$1<\/td>\n<td>Because that&#8217;s all Steve Jobs needed for a salary.<\/td>\n<\/tr>\n<tr>\n<td>John<\/td>\n<td>$100K<\/td>\n<td>For all the blogging he does.<\/td>\n<\/tr>\n<tr>\n<td>Jane<\/td>\n<td>$100M<\/td>\n<td>Pictures are worth a thousand words, right? So Tom x 1,000.<\/td>\n<\/tr>\n<tr>\n<td>Jane<\/td>\n<td>$100B<\/td>\n<td>With hair like that?! Enough said\u2026<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Definition Lists<\/h3>\n<dl>\n<dt>Definition List Title<\/dt>\n<dd>Definition list division.<\/dd>\n<dt>Startup<\/dt>\n<dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.<\/dd>\n<dt>#dowork<\/dt>\n<dd>Coined by Rob Dyrdek and his personal body guard Christopher \u201cBig Black\u201d Boykins, \u201cDo Work\u201d works as a self motivator, to motivating your friends.<\/dd>\n<dt>Do It Live<\/dt>\n<dd>I&#8217;ll let Bill O&#8217;Reilly explain this one.<\/dd>\n<\/dl>\n<h3>Unordered Lists (Nested)<\/h3>\n<ul>\n<li>List item one\n<ul>\n<li>List item one\n<ul>\n<li>List item one<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ul>\n<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ul>\n<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ul>\n<h3>Ordered List (Nested)<\/h3>\n<ol>\n<li>List item one \u2014 start at 8\n<ol start=\"8\">\n<li>List item one<\/li>\n<li value=\"3\">List item one \u2014 reversed attribute<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ol>\n<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ol>\n<h3>Common HTML Tags<\/h3>\n<p><strong>Address tag<\/strong> \u2014 sets aside contact information for its nearest article or body ancestor:<\/p>\n<address>1 Infinite Loop<br \/>Cupertino, CA 95014<br \/>United States<\/address>\n<p><strong>Anchor tag<\/strong> \u2014 creates a hyperlink: <a href=\"#\">this is an example of a link<\/a>.<\/p>\n<p><strong>Abbreviation tag<\/strong> \u2014 marks up an abbreviation or acronym, often paired with a title attribute for the expansion: the abbreviation <abbr title=\"Seriously\">srsly<\/abbr> stands for \u201cseriously\u201d.<\/p>\n<p><strong>Code tag<\/strong> \u2014 styles a fragment of computer code inline or as a block:<\/p>\n<pre><code>.post-title {\n\tmargin: 0 0 5px;\n\tfont-weight: bold;\n\tfont-size: 38px;\n\tline-height: 1.2;\n}<\/code><\/pre>\n<p>Long unbroken strings inside a code block rely on <code>word-wrap: break-word;<\/code> to avoid overflowing their container.<\/p>\n<p><strong>Emphasis tag<\/strong> \u2014 <em>italicizes the enclosed text<\/em>, typically used to indicate stress emphasis.<\/p>\n<p><strong>Preformatted tag<\/strong> \u2014 preserves whitespace and line breaks exactly as typed, useful for poetry or ASCII art:<\/p>\n<pre>The Road Not Taken\n Robert Frost\n\nTwo roads diverged in a yellow wood,\nAnd sorry I could not travel both          (\\_\/)\nAnd be one traveler, long I stood         (='.'=)\nAnd looked down one as far as I could     (\")_(\")\nTo where it bent in the undergrowth;\n\nI shall be telling this with a sigh\nSomewhere ages and ages hence:\nTwo roads diverged in a wood, and I\u2014\nI took the one less traveled by,\nAnd that has made all the difference.<\/pre>\n<p><strong>Quote tag<\/strong> \u2014 for short, inline quotations: <q>Developers, developers, developers\u2026<\/q> \u2014 Steve Ballmer.<\/p>\n<p><strong>Strike\/S tag<\/strong> \u2014 <s>this tag shows strike-through text<\/s>, used to mark content that is no longer accurate or relevant.<\/p>\n<p><strong>Small tag<\/strong> \u2014 <small>this tag renders text at a smaller size<\/small>, often used for fine print or side comments.<\/p>\n<p><strong>Strong tag<\/strong> \u2014 <strong>this tag shows bold text<\/strong>, indicating strong importance.<\/p>\n<p><strong>Subscript tag<\/strong> \u2014 getting our science styling on with H<sub>2<\/sub>O, which pushes the \u201c2\u201d down.<\/p>\n<p><strong>Superscript tag<\/strong> \u2014 sticking with science, Albert Einstein&#8217;s E = MC<sup>2<\/sup>, which lifts the \u201c2\u201d up.<\/p>\n<h3>Images<\/h3>\n<p>A standard image with an optional caption, rendered using the classic <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code> elements:<\/p>\n<figure>\n<img decoding=\"async\" src=\"https:\/\/atomix-one.wpatomix.com\/wp-content\/themes\/atomix-one\/inc\/demo-image.jpg\" alt=\"A sample image demonstrating classic figure and figcaption markup\" style=\"max-width:100%;height:auto;display:block;\" \/><figcaption>A sample image \u2014 the figcaption element sits directly beneath the image inside the figure wrapper.<\/figcaption><\/figure>\n<p>This sentence is followed by a horizontal rule:<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:8px;font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.935), 1.6rem);font-weight:700\">Block Elements<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:32px\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Heading block<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:20px\">The Heading block offers a level selector (H1\u2013H6) directly in the toolbar, rather than requiring a separate tag for each size:<\/p>\n\n\n\n<h1 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:4px\">Header one<\/h1>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:4px\">Header two<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:4px\">Header three<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:4px\">Header four<\/h4>\n\n\n\n<h5 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:4px\">Header five<\/h5>\n\n\n\n<h6 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:32px\">Header six<\/h6>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Quote block<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:16px\">Single line blockquote:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\" style=\"border-left-color:#5B4FE8;border-left-width:3px;padding-left:20px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#0F1729;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-style:italic;line-height:1.6\">Stay hungry. Stay foolish.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-top:24px;margin-bottom:16px\">Multi line blockquote with a cite reference:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\" style=\"border-left-color:#5B4FE8;border-left-width:3px;padding-left:20px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#0F1729;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-style:italic;line-height:1.6\">The HTML <code>&lt;blockquote&gt;<\/code> 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 <code>cite<\/code> attribute, while a text representation of the source can be given using the <code>&lt;cite&gt;<\/code> element.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:0.85rem\">\u2014 multiple contributors, MDN HTML element reference: blockquote<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Table block<\/h3>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.042), 0.9rem);\"><table class=\"has-fixed-layout\"><thead><tr><th>Employee<\/th><th>Salary<\/th><th>Note<\/th><\/tr><\/thead><tbody><tr><td>Jane<\/td><td>$1<\/td><td>Because that&#8217;s all Steve Jobs needed for a salary.<\/td><\/tr><tr><td>John<\/td><td>$100K<\/td><td>For all the blogging he does.<\/td><\/tr><tr><td>Jane<\/td><td>$100M<\/td><td>Pictures are worth a thousand words, right? So Tom x 1,000.<\/td><\/tr><tr><td>Jane<\/td><td>$100B<\/td><td>With hair like that?! Enough said\u2026<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">List block (unordered, nested)<\/h3>\n\n\n\n<ul style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\" class=\"wp-block-list has-text-color\">\n<li>List item one\n\n<ul class=\"wp-block-list\">\n<li>List item one\n\n<ul class=\"wp-block-list\">\n<li>List item one<\/li>\n\n\n\n<li>List item two<\/li>\n\n\n\n<li>List item three<\/li>\n\n\n\n<li>List item four<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>List item two<\/li>\n\n\n\n<li>List item three<\/li>\n\n\n\n<li>List item four<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>List item two<\/li>\n\n\n\n<li>List item three<\/li>\n\n\n\n<li>List item four<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">List block (ordered, nested)<\/h3>\n\n\n\n<ol style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\" class=\"wp-block-list has-text-color\">\n<li>List item one\n\n<ol class=\"wp-block-list\">\n<li>List item one<\/li>\n\n\n\n<li>List item two<\/li>\n\n\n\n<li>List item three<\/li>\n\n\n\n<li>List item four<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>List item two<\/li>\n\n\n\n<li>List item three<\/li>\n\n\n\n<li>List item four<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Common inline elements (Paragraph block)<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Anchor<\/strong> \u2014 creates a hyperlink: <a href=\"#\">this is an example of a link<\/a>.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Abbreviation<\/strong> \u2014 the abbreviation <abbr title=\"Seriously\">srsly<\/abbr> stands for &#8220;seriously&#8221;.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Emphasis<\/strong> \u2014 <em>italicizes the enclosed text<\/em>, typically used to indicate stress emphasis.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Strong<\/strong> \u2014 <strong>this tag shows bold text<\/strong>, indicating strong importance.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Inline quote<\/strong> \u2014 for short, inline quotations: <q>Developers, developers, developers\u2026<\/q> \u2014 Steve Ballmer.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Strikethrough<\/strong> \u2014 <s>this tag shows strike-through text<\/s>, used to mark content that is no longer accurate or relevant.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Small<\/strong> \u2014 <small>this tag renders text at a smaller size<\/small>, often used for fine print or side comments.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Subscript<\/strong> \u2014 getting our science styling on with H<sub>2<\/sub>O, which pushes the &#8220;2&#8221; down.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\"><strong>Superscript<\/strong> \u2014 sticking with science, Albert Einstein&#8217;s E = MC<sup>2<\/sup>, which lifts the &#8220;2&#8221; up.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Code block<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-background\" style=\"border-color:#E2E8F0;border-width:1px;border-radius:8px;background-color:#F8FAFC;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px;font-size:0.85rem\"><code>.post-title {\n\tmargin: 0 0 5px;\n\tfont-weight: bold;\n\tfont-size: 38px;\n\tline-height: 1.2;\n}<\/code><\/pre>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-top:12px;margin-bottom:0\">Unlike the classic <code>&lt;pre&gt;&lt;code&gt;<\/code> pairing, the block automatically escapes HTML characters as you type, so angle brackets render correctly without manual entity encoding.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Image block<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:16px\">The Image block supports alignment, captions, alt text, linking, and rounded corners from the block toolbar \u2014 no HTML attributes required.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border wp-duotone-unset-1\"><img decoding=\"async\" src=\"https:\/\/atomix-one.wpatomix.com\/wp-content\/themes\/atomix-one\/inc\/demo-image.jpg\" alt=\"A sample image demonstrating the Image block with rounded corners\" style=\"border-radius:8px\"\/><figcaption class=\"wp-element-caption\">A sample image \u2014 the Image block generates the figcaption automatically when you type below the image.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Columns block <em style=\"font-weight:400;color:#8892A4;font-size:0.85rem\">(no classic equivalent)<\/em><\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:16px\">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.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-17c5c485 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-color:#E2E8F0;border-width:1px;border-radius:8px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.042), 0.9rem);line-height:1.6\">Column widths can be set individually, and each column can hold any other block, including nested columns.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-color:#E2E8F0;border-width:1px;border-radius:8px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.042), 0.9rem);line-height:1.6\">Columns automatically stack on smaller screens, something a hand-rolled HTML table layout would not do without extra responsive CSS.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-color:#E2E8F0;border-width:1px;border-radius:8px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.042), 0.9rem);line-height:1.6\">Each column can hold any combination of blocks &#8211; headings, images, lists, or even further nested columns.<\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Media &amp; Text block <em style=\"font-weight:400;color:#8892A4;font-size:0.85rem\">(no classic equivalent)<\/em><\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:16px\">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.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile has-border-color\" style=\"border-color:#E2E8F0;border-width:1px;border-radius:8px;margin-bottom:0\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/atomix-one.wpatomix.com\/wp-content\/themes\/atomix-one\/inc\/demo-image.jpg\" alt=\"A sample image used in the Media and Text block\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<h4 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:0;margin-bottom:8px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.208), 1rem);font-weight:600\">A heading sits alongside the image<\/h4>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\">Supporting body copy sits here, alongside the image. The text column can contain any blocks &#8211; headings, lists, buttons &#8211; and the image panel fills its height automatically.<\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Pull Quote block <em style=\"font-weight:400;color:#8892A4;font-size:0.85rem\">(no classic equivalent)<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-pullquote has-text-color\" style=\"border-top-color:#5B4FE8;border-top-width:2px;border-bottom-color:#5B4FE8;border-bottom-width:2px;color:#0F1729;padding-top:24px;padding-bottom:24px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.542), 1.2rem);\"><blockquote><p>The Pull Quote block is designed for editorial callouts &#8211; a sentence lifted from the body copy and given visual weight to draw readers in.<\/p><cite>\u2014 the WordPress Block Editor handbook<\/cite><\/blockquote><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Buttons block <em style=\"font-weight:400;color:#8892A4;font-size:0.85rem\">(no classic equivalent)<\/em><\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:16px\">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.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button\" style=\"border-radius:8px;color:#FFFFFF;background-color:#5B4FE8;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px;font-size:14px;font-weight:600\">Primary button<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link has-text-color has-border-color has-custom-font-size wp-element-button\" style=\"border-color:#5B4FE8;border-width:1px;border-radius:8px;color:#5B4FE8;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px;font-size:14px;font-weight:600\">Secondary button<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide\" style=\"background-color:#E2E8F0;color:#E2E8F0\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#0F1729;margin-top:32px;margin-bottom:12px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.292), 1.05rem);font-weight:600\">Callout with button <em style=\"font-weight:400;color:#8892A4;font-size:0.85rem\">(no classic equivalent)<\/em><\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:16px\">A Group block used as a styled callout panel, combining a heading, body copy, and a Button block within a single container &#8211; a common pattern for feature highlights or calls to action.<\/p>\n\n\n\n<div class=\"wp-block-group has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-5ce297e8 wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#0F1729;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px\">\n<h2 class=\"wp-block-heading has-text-align-center has-text-color\" style=\"color:#FFFFFF;margin-top:0;margin-bottom:12px;font-size:clamp(0.984rem, 0.984rem + ((1vw - 0.2rem) * 0.86), 1.5rem);font-weight:700\">Ready to get started?<\/h2>\n\n\n\n<p class=\"has-text-align-center has-text-color wp-block-paragraph\" style=\"color:#8892A4;margin-bottom:28px;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.125), 0.95rem);line-height:1.7\">Group blocks can combine headings, text, and buttons into a single styled container \u2014 useful for callouts, banners, or feature highlights without any custom HTML.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button\" style=\"border-radius:8px;color:#FFFFFF;background-color:#5B4FE8;padding-top:14px;padding-right:32px;padding-bottom:14px;padding-left:32px;font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.104), 15px);font-weight:600\">Get started<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--3\"><a class=\"wp-block-button__link has-text-color has-border-color has-custom-font-size wp-element-button\" style=\"border-color:#8892A4;border-width:1px;border-radius:8px;color:#8892A4;padding-top:14px;padding-right:32px;padding-bottom:14px;padding-left:32px;font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.104), 15px);font-weight:600\">Learn more<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Atomix One is a hybrid theme, meaning it supports both the Classic Editor&#8217;s HTML elements and the Block Editor&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/atomix-one.wpatomix.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}