{"id":469,"date":"2024-02-05T16:59:57","date_gmt":"2024-02-05T16:59:57","guid":{"rendered":"https:\/\/wpthemetestdata.wordpress.com\/columns\/"},"modified":"2024-02-05T16:59:57","modified_gmt":"2024-02-05T16:59:57","slug":"columns","status":"publish","type":"post","link":"http:\/\/127.0.0.1:8081\/columns\/","title":{"rendered":"Columns"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2fe6cf822d3\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/"><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2fe6cf822d3\"  aria-label=\"Toggle\" \/"><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Column_numbers_and_widths\" >Column numbers and widths<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Custom_column_numbers\" >Custom column numbers<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Do_not_stack_on_mobile\" >Do not stack on mobile<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Alignment\" >Alignment<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Align_middle\" >Align middle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Align_bottom\" >Align bottom<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Color\" >Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Border\" >Border<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Typography\" >Typography<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Font_size\" >Font size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Appearance\" >Appearance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Line_height\" >Line height<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Letter_spacing\" >Letter spacing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Decoration\" >Decoration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Letter_case\" >Letter case<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"http:\/\/127.0.0.1:8081\/columns\/#Spacing\" >Spacing<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Column_numbers_and_widths\"><\/span>Column numbers and widths<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Background colors have been added for visibility<\/em>:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">One column<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Two columns, 50\/50<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">Two columns,  one third<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"wp-block-paragraph\">Two thirds<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"wp-block-paragraph\">Two columns, two thirds<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">One third<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Three columns<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<p class=\"wp-block-paragraph\">Three columns, 25<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"wp-block-paragraph\">50<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<p class=\"wp-block-paragraph\">25<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Custom_column_numbers\"><\/span>Custom column numbers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">One<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Three<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Four<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Five<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Six<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Do_not_stack_on_mobile\"><\/span>Do not stack on mobile<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Two columns, 50\/50<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alignment\"><\/span>Alignment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">No alignment, default. Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Wide. Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Full width. Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Align_middle\"><\/span>Align middle<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">No alignment, default. Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some more text, to showcase alignments.<br>The default alignment is top.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Align_bottom\"><\/span>Align bottom<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-bottom is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-bottom is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">No alignment, default. Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some more text, to showcase alignments.<br>The default alignment is top.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Color\"><\/span>Color<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Background color on columns only:<\/p>\n\n\n\n<div class=\"wp-block-columns has-light-green-cyan-background-color has-background is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Two columns, 50\/50<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Background color on both columns and column:<\/p>\n\n\n\n<div class=\"wp-block-columns has-light-green-cyan-background-color has-background is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Two columns, 50\/50<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Border\"><\/span>Border<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Border on columns only:<\/p>\n\n\n\n<div class=\"wp-block-columns has-border-color has-vivid-red-border-color is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"border-width:5px\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">With border radius:<\/p>\n\n\n\n<div class=\"wp-block-columns has-border-color is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"border-color:#cf2e2e;border-width:5px;border-radius:90px\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Note that border radius conflicts with the background on the inner blocks, this is a known issue (WordPress 6.4)<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile has-border-color is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"border-color:#cf2e2e;border-width:5px;border-radius:90px\">\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-pale-cyan-blue-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Border on the inner column only:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that border radius on the inner columns is not supported (WordPress 6.4)<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Border on both the columns and the inner column:<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile has-border-color has-vivid-green-cyan-border-color is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"border-width:5px\">\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Note that border radius conflicts with the border on the inner blocks, this is a known issue (WordPress 6.4)<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile has-border-color is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"border-color:#00d084;border-width:5px;border-radius:90px\">\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-vivid-red-border-color is-layout-flow wp-block-column-is-layout-flow\" style=\"border-width:5px\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Typography\"><\/span>Typography<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Font_size\"><\/span>Font size<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns has-small-font-size is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-medium-font-size is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-large-font-size is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-x-large-font-size is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Appearance\"><\/span>Appearance<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"font-style:italic;font-weight:200\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"font-style:italic;font-weight:900\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Line_height\"><\/span>Line height<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"line-height:2.4\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Letter_spacing\"><\/span>Letter spacing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"letter-spacing:7px\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Decoration\"><\/span>Decoration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"text-decoration:underline\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"text-decoration:line-through\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Letter_case\"><\/span>Letter case<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"text-transform:uppercase\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"text-transform:lowercase\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\" style=\"text-transform:capitalize\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Spacing\"><\/span>Spacing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Padding preset: 4<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6ff15971 wp-block-columns-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Margin Preset: 4<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-829da109 wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Block spacing preset: 0<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-873e7f5b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Block spacing preset: 4<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-cc2e4ea6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Block spacing preset: 7<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8162d860 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column one<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column two<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Column three<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Column numbers and widths Background colors have been added for visibility: One column Two columns, &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[47,50,48],"class_list":["post-469","post","type-post","status-publish","format-standard","hentry","category-design","tag-block-spacing","tag-border","tag-shadow"],"_links":{"self":[{"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/posts\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":0,"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"wp:attachment":[{"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/127.0.0.1:8081\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}