{"id":332,"date":"2025-07-15T09:53:52","date_gmt":"2025-07-15T13:53:52","guid":{"rendered":"https:\/\/www.clarku.edu\/jp\/?page_id=332"},"modified":"2025-12-16T15:40:12","modified_gmt":"2025-12-16T20:40:12","slug":"boxouts","status":"publish","type":"page","link":"https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/","title":{"rendered":"Boxouts"},"content":{"rendered":"\n<p class=\"is-style-intro\">A boxout is a good solution for a sidebar, or a way to call attention to an idea.<\/p>\n\n\n\n<div class=\"wp-block-columns sidebar is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45rem\">\n<p>Boxouts are exactly what they sound like: a bit of content wrapped in a box.  They&#8217;re used for a few purposes, and the differences are subtle, but important to ensure that the website is accessible to everyone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sidebars<\/h2>\n\n\n\n<p>The most common use for a boxout is as a sidebar, like you see here.  A sidebar is used to supply the reader with information related to the rest of the page, but not critical to it.  Sidebar content should be short, skimmable, and importantly make the page more interesting. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<aside class=\"wp-block-group boxout has-light-warm-gray-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<p>Use a boxout to convey a related piece of information.  By default, it&#8217;s an <em>aside<\/em>, so it&#8217;s used to supplement the main topic of the page.<\/p>\n<\/aside>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns sidebar is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45rem\">\n<h2 class=\"wp-block-heading\">Options<\/h2>\n\n\n\n<p>Boxouts can also be used to illustrate options or steps in a process.  When you use a boxout as part of the main idea on a page, it&#8217;s important that you change it from aside to its default (div). That helps assistive technology differentiate between the main and auxillary content of the page.  Open block settings -&gt; Advanced, and change the HTML element drop down to &#8220;Default (&lt;div&gt;).&#8221;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#b6ced173\">\n<h3 class=\"wp-block-heading\">Draft<\/h3>\n\n\n\n<p>Create a new post that communicates your idea, save it as a draft.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#abbd8f73\">\n<h3 class=\"wp-block-heading\">Edit<\/h3>\n\n\n\n<p>Ask a colleague to review your post and edit for style and clarity.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#fcc89a87\">\n<h3 class=\"wp-block-heading\">Publish<\/h3>\n\n\n\n<p>Once everything looks great, publish your post and share it in your networks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><em>Tip: when presenting boxouts within a set of columns, set each column&#8217;s vertical orientation to &#8220;Stretch to fill&#8221; to keep them all the same height.<\/em><\/p>\n\n\n\n<div class=\"wp-block-columns sidebar is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45rem\">\n<h2 class=\"wp-block-heading\">Alternatives<\/h2>\n\n\n\n<p>You can use a boxout to display an important piece of information that draws the eye, and it can take up the full width of the column.  It does the same job as a sidebar, but it looks different on a page.<\/p>\n\n\n\n<aside class=\"wp-block-group boxout has-light-yellow-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<p>The sidewalk in front of our building is temporarily closed for maintenance. Please use the entrance on the south side of the building.<\/p>\n<\/aside>\n\n\n\n<p>Using a grid with the special class of <code>no-gap<\/code>, you can present options in a tiled format.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group no-gap is-layout-grid wp-container-core-group-is-layout-88c98fc8 wp-block-group-is-layout-grid\">\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#b6ced173\">\n<h3 class=\"wp-block-heading\">Aesthetic Perspective<\/h3>\n\n\n\n<p>Enhance appreciation and understanding of the arts.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#abbd8f6e\">\n<h3 class=\"wp-block-heading\">Scientific Perspective<\/h3>\n\n\n\n<p>Experience the experimental and problem-solving nature of scientific study.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#fcc89a78\">\n<h3 class=\"wp-block-heading\">Global Comparative Perspective<\/h3>\n\n\n\n<p>Gain a global context for understanding the human experience \u2014 diverse cultures, societies, political systems, and economic structures.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#d1b2c875\">\n<h3 class=\"wp-block-heading\">History Perspective<\/h3>\n\n\n\n<p>Better understand how the past informs, shapes, and diverges from the present.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background wp-container-content-79286276 is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#f2e8b878\">\n<h3 class=\"wp-block-heading\">Language and Culture Perspective<\/h3>\n\n\n\n<p>Develop intercultural literacy through the study of a language or literature other than English.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-gray-100-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Values Perspective<\/h3>\n\n\n\n<p>Inspire critical thinking around moral, ethical, and prescriptive frameworks that formulate your view of the world.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#e61e2e21\">\n<h3 class=\"wp-block-heading\">Diversity and Inclusion<\/h3>\n\n\n\n<p>Analyze concepts such as power, privilege, intersectionality, and identity.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#849eb03d\">\n<h3 class=\"wp-block-heading\">Written Expression<\/h3>\n\n\n\n<p>Focus on writing clearly and persuasively, making strong arguments grounded in textual evidence, and thinking critically about texts.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group boxout has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\" style=\"background-color:#abbd8f4a\">\n<h3 class=\"wp-block-heading\">Formal Analysis<\/h3>\n\n\n\n<p>Problem-solve through quantitative aspects of the world.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns sidebar is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45rem\">\n<p>Boxouts are not limited in size nor contents.  This page demonstrates boxouts with headings and paragraphs, but you can include images, buttons, or other elements \u2014 whatever is necessary to communicate your idea effectively.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A boxout is a good solution for a sidebar, or a way to call attention to an idea. Boxouts are exactly what they sound like: a bit of content wrapped in a box. They&#8217;re used for a few purposes, and the differences are subtle, but important to ensure that the website is accessible to everyone. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-332","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Boxouts - ClarkU WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boxouts\" \/>\n<meta property=\"og:description\" content=\"A boxout is a good solution for a sidebar, or a way to call attention to an idea. Boxouts are exactly what they sound like: a bit of content wrapped in a box. They&#8217;re used for a few purposes, and the differences are subtle, but important to ensure that the website is accessible to everyone. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/\" \/>\n<meta property=\"og:site_name\" content=\"ClarkU WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T20:40:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/boxouts\\\/\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/boxouts\\\/\",\"name\":\"Boxouts - ClarkU WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\"},\"datePublished\":\"2025-07-15T13:53:52+00:00\",\"dateModified\":\"2025-12-16T20:40:12+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/boxouts\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/332#breadcrumbs\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":0,\"name\":\"ClarkU\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/\"},{\"@type\":\"ListItem\",\"position\":1,\"name\":\"ClarkU WordPress\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/\",\"name\":\"ClarkU WordPress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Boxouts - ClarkU WordPress","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:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/","og_locale":"en_US","og_type":"article","og_title":"Boxouts","og_description":"A boxout is a good solution for a sidebar, or a way to call attention to an idea. Boxouts are exactly what they sound like: a bit of content wrapped in a box. They&#8217;re used for a few purposes, and the differences are subtle, but important to ensure that the website is accessible to everyone. [&hellip;]","og_url":"https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/","og_site_name":"ClarkU WordPress","article_modified_time":"2025-12-16T20:40:12+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/","url":"https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/","name":"Boxouts - ClarkU WordPress","isPartOf":{"@id":"https:\/\/www.clarku.edu\/wordpress\/#website"},"datePublished":"2025-07-15T13:53:52+00:00","dateModified":"2025-12-16T20:40:12+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clarku.edu\/wordpress\/components\/boxouts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/332#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"name":"ClarkU","item":"https:\/\/www.clarku.edu\/"},{"@type":"ListItem","position":1,"name":"ClarkU WordPress","item":"https:\/\/www.clarku.edu\/wordpress"}]},{"@type":"WebSite","@id":"https:\/\/www.clarku.edu\/wordpress\/#website","url":"https:\/\/www.clarku.edu\/wordpress\/","name":"ClarkU WordPress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clarku.edu\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":11,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/332\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/332\/revisions\/476"}],"up":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}