{"id":3397,"date":"2026-02-08T19:40:11","date_gmt":"2026-02-08T19:40:11","guid":{"rendered":"https:\/\/maag.codesupply.co\/lifestyle\/?page_id=3397"},"modified":"2026-02-08T19:40:12","modified_gmt":"2026-02-08T19:40:12","slug":"blocks","status":"publish","type":"page","link":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/","title":{"rendered":"Blocks"},"content":{"rendered":"<h1 class=\"wp-block-heading\">Typography &amp; Gutenberg Blocks Showcase<\/h1><p>This page demonstrates how common Gutenberg blocks are styled in the theme: headings, paragraphs, links, lists, quotes, code, tables, separators, columns, media, buttons, and more.<\/p><p><a href=\"#\">This is a link example<\/a>. Here is <strong>bold text<\/strong>, <em>italic text<\/em>, <s>strikethrough<\/s>, <mark>highlight<\/mark>, and <code>inline code<\/code>.<\/p><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Headings<\/h2><h3 class=\"wp-block-heading\">Heading level 3<\/h3><h4 class=\"wp-block-heading\">Heading level 4<\/h4><h5 class=\"wp-block-heading\">Heading level 5<\/h5><h6 class=\"wp-block-heading\">Heading level 6<\/h6><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Lists<\/h2><p>Unordered list:<\/p><ul class=\"wp-block-list\"><li>List item one<\/li>\n\n<li>List item two<ul class=\"wp-block-list\"><li>Nested item A<\/li>\n\n<li>Nested item B<\/li><\/ul><\/li>\n\n<li>List item three<\/li><\/ul><p>Ordered list:<\/p><ol class=\"wp-block-list\"><li>First item<\/li>\n\n<li>Second item<\/li>\n\n<li>Third item<\/li><\/ol><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Quotes &amp; Pullquote<\/h2><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>This is a standard quote block. It should have proper typography and spacing.<\/p><cite>Quote citation<\/cite><\/blockquote><figure class=\"wp-block-pullquote\"><blockquote><p>This is a pullquote block, typically more prominent.<\/p><cite>Pullquote citation<\/cite><\/blockquote><\/figure><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Code<\/h2><p>Inline code example: <code>npm run build<\/code><\/p><pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Code block example\nadd_action('init', function () {\n  \/\/ Your code here\n});\n<\/code><\/pre><pre class=\"wp-block-preformatted\">Preformatted text keeps spacing.\nLine 2\n    Indented line 3<\/pre><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Table<\/h2><figure class=\"wp-block-table\"><table><thead><tr><th>Feature<\/th><th>Supported<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Responsive table<\/td><td>Yes<\/td><td>Check on mobile for horizontal scroll if needed<\/td><\/tr><tr><td>Striped rows<\/td><td>Theme dependent<\/td><td>May use default WP styling or theme styling<\/td><\/tr><tr><td>Alignment<\/td><td>Yes<\/td><td>Left\/center\/right as needed<\/td><\/tr><\/tbody><\/table><\/figure><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Media &amp; Captions<\/h2><figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"http:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1024x576.webp\" alt=\"Demo image\" class=\"wp-image-2878\" srcset=\"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1024x576.webp 1024w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1376x774.webp 1376w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-300x169.webp 300w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-768x432.webp 768w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1536x864.webp 1536w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-2048x1152.webp 2048w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-527x296.webp 527w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1054x593.webp 1054w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-688x387.webp 688w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1044x587.webp 1044w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-2088x1174.webp 2088w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1400x788.webp 1400w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1920x1080.webp 1920w, https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1200x675.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image caption example<\/figcaption><\/figure><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Buttons<\/h2><div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Primary Button<\/a><\/div>\n\n<div class=\"wp-block-button is-style-outline is-style-outline--24\"><a class=\"wp-block-button__link wp-element-button\">Outline Button<\/a><\/div><\/div><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Columns<\/h2><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\"><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\">Column A<\/h3>\n\n<p>Text in the first column. This helps verify spacing and typography in multi-column layouts.<\/p><\/div>\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h3 class=\"wp-block-heading\">Column B<\/h3>\n\n<ul class=\"wp-block-list\"><li>List item<\/li>\n\n<li>List item<\/li>\n\n<li>List item<\/li><\/ul><\/div><\/div><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Typography Extras<\/h2><p>Small text: <small>this is small<\/small>. Superscript: 10<sup>2<\/sup>. Subscript: H<sub>2<\/sub>O. Abbreviation: <abbr title=\"Search Engine Optimization\">SEO<\/abbr>.<\/p><hr class=\"wp-block-separator has-css-opacity\"\/><h2 class=\"wp-block-heading\">Separator &amp; Spacer<\/h2><div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div><p>Text after spacer to check vertical rhythm.<\/p>","protected":false},"excerpt":{"rendered":"Typography &amp; Gutenberg Blocks Showcase This page demonstrates how common Gutenberg blocks are styled in the theme: headings,&hellip;","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0,"footnotes":""},"class_list":{"0":"post-3397","1":"page","2":"type-page","3":"status-publish","5":"cs-entry","6":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Blocks - Lifestyle<\/title>\n<meta name=\"description\" content=\"Blocks - Lifestyle\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blocks - Lifestyle\" \/>\n<meta property=\"og:description\" content=\"Blocks - Lifestyle\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Lifestyle\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-08T19:40:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"7680\" \/>\n\t<meta property=\"og:image:height\" content=\"4320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/\",\"url\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/\",\"name\":\"Blocks - Lifestyle\",\"isPartOf\":{\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1024x576.webp\",\"datePublished\":\"2026-02-08T19:40:11+00:00\",\"dateModified\":\"2026-02-08T19:40:12+00:00\",\"description\":\"Blocks - Lifestyle\",\"breadcrumb\":{\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#primaryimage\",\"url\":\"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061.webp\",\"contentUrl\":\"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061.webp\",\"width\":7680,\"height\":4320,\"caption\":\"Demo image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/maag.codesupply.co\/lifestyle\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/maag.codesupply.co\/lifestyle\/#website\",\"url\":\"https:\/\/maag.codesupply.co\/lifestyle\/\",\"name\":\"Lifestyle\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/maag.codesupply.co\/lifestyle\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Blocks - Lifestyle","description":"Blocks - Lifestyle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/","og_locale":"en_US","og_type":"article","og_title":"Blocks - Lifestyle","og_description":"Blocks - Lifestyle","og_url":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/","og_site_name":"Lifestyle","article_modified_time":"2026-02-08T19:40:12+00:00","og_image":[{"width":7680,"height":4320,"url":"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/","url":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/","name":"Blocks - Lifestyle","isPartOf":{"@id":"https:\/\/maag.codesupply.co\/lifestyle\/#website"},"primaryImageOfPage":{"@id":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#primaryimage"},"image":{"@id":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#primaryimage"},"thumbnailUrl":"http:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061-1024x576.webp","datePublished":"2026-02-08T19:40:11+00:00","dateModified":"2026-02-08T19:40:12+00:00","description":"Blocks - Lifestyle","breadcrumb":{"@id":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maag.codesupply.co\/lifestyle\/blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#primaryimage","url":"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061.webp","contentUrl":"https:\/\/maag.codesupply.co\/lifestyle\/wp-content\/uploads\/sites\/2\/2024\/05\/demo-image-0061.webp","width":7680,"height":4320,"caption":"Demo image"},{"@type":"BreadcrumbList","@id":"https:\/\/maag.codesupply.co\/lifestyle\/blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/maag.codesupply.co\/lifestyle\/"},{"@type":"ListItem","position":2,"name":"Blocks"}]},{"@type":"WebSite","@id":"https:\/\/maag.codesupply.co\/lifestyle\/#website","url":"https:\/\/maag.codesupply.co\/lifestyle\/","name":"Lifestyle","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/maag.codesupply.co\/lifestyle\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/pages\/3397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/comments?post=3397"}],"version-history":[{"count":2,"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/pages\/3397\/revisions"}],"predecessor-version":[{"id":3399,"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/pages\/3397\/revisions\/3399"}],"wp:attachment":[{"href":"https:\/\/maag.codesupply.co\/lifestyle\/wp-json\/wp\/v2\/media?parent=3397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}