{"id":5017,"date":"2026-08-16T20:33:20","date_gmt":"2026-08-16T20:33:20","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/side-panel-light\/"},"modified":"2026-08-16T20:40:06","modified_gmt":"2026-08-16T20:40:06","slug":"side-panel-light","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/side-panel-light\/","title":{"rendered":"Side Panel &#8211; Light"},"content":{"rendered":"<div class=\"container\">\n<div class=\"text-center\">\n<a class=\"button button-xlarge button-rounded side-panel-trigger mb-5\" href=\"#\">Open Side Panel<\/a>\n<br>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-left-overlay\/\">Left &#8211; Overlay<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-left-push\/\">Left &#8211; Pushed<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-right-overlay\/\">Right &#8211; Overlay<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel\/\">Right &#8211; Pushed<\/a>\n<a class=\"button button-mini button-rounded button-dark\" href=\"https:\/\/demos.canvaswp.com\/classic\/side-panel-light\/\">Light Background<\/a>\n<\/div>\n<div class=\"line\"><\/div>\n<div class=\"row col-mb-50\">\n<div class=\"col-12\">Canvas ships with a flexible twelve-column grid that adapts to any screen size with ease. Drop content into full-width rows for hero sections, long-form articles, or media galleries, then split the same row into halves, thirds, and quarters wherever you need more structure. Each column gutter, breakpoint, and offset is fully customizable, so you can craft balanced page layouts that stay perfectly aligned from large desktops down to small mobile devices.<\/div>\n<div class=\"col-md-6\">\n<h5 class=\"wp-block-heading\">Half Width<\/h5>\nTwo equal half-width columns sit side by side on larger screens and stack neatly on smaller ones. Use this balanced split to pair an image with descriptive text, list features beside benefits, or compare two related options.<\/div>\n<div class=\"col-md-6\">\n<h5 class=\"wp-block-heading\">Half Width<\/h5>\nThe half-width column is ideal for placing a heading and supporting paragraph next to a complementary block. Content reflows automatically at each breakpoint, keeping both sides readable without any extra configuration on your part.<\/div>\n<div class=\"w-100\"><\/div>\n<div class=\"col-md-8\">\n<h5 class=\"wp-block-heading\">2\/3 Width<\/h5>\nThe two-thirds column gives long-form content room to breathe while leaving a sidebar space alongside it. Place primary articles, detailed product descriptions, or rich editorial copy in this wider column to keep readers focused on what matters most. Paired with a one-third column, it forms a classic content-plus-sidebar layout that remains responsive, collapsing into a single stacked column on smaller screens for comfortable mobile reading throughout.<\/div>\n<div class=\"col-md-4\">\n<h5 class=\"wp-block-heading\">1\/3 Width<\/h5>\nThe one-third column works perfectly as a sidebar beside wider content. Use it for quick links, highlighted callouts, author details, or a compact set of related items that support the main column without competing for attention.<\/div>\n<div class=\"w-100\"><\/div>\n<div class=\"col-md-3\">\n<h5 class=\"wp-block-heading\">1\/4 Width<\/h5>\nQuarter-width columns let you display four compact blocks in a single row, perfect for feature icons, short stats, or a tidy set of small navigation links.<\/div>\n<div class=\"col-md-9\">\n<h5 class=\"wp-block-heading\">3\/4 Width<\/h5>\nThe three-quarter column dominates the row while still leaving a slim sidebar beside it. This generous width suits showcase sections, image-heavy stories, and detailed feature breakdowns that benefit from extra horizontal space. The grid keeps everything aligned to consistent gutters, and the adjacent quarter column is ideal for tags, metadata, or a short call to action. On smaller devices the two columns stack gracefully into a clean, fully readable single-column flow.<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-canvas","meta":{"footnotes":""},"class_list":["post-5017","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/5017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/comments?post=5017"}],"version-history":[{"count":2,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/5017\/revisions"}],"predecessor-version":[{"id":5075,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/5017\/revisions\/5075"}],"wp:attachment":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/media?parent=5017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}