{"id":33,"date":"2026-02-11T16:07:05","date_gmt":"2026-02-11T16:07:05","guid":{"rendered":"https:\/\/teton.wwwdev.uwosh.edu\/web\/?page_id=33"},"modified":"2026-02-13T16:18:50","modified_gmt":"2026-02-13T16:18:50","slug":"details-image-block","status":"publish","type":"page","link":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/","title":{"rendered":"Details \/ Image Block"},"content":{"rendered":"\n<section class=\"Hero circles\" data-animate>\n  \n\n<div class=\"Common\">\n  \n\n<h1 class=\"wp-block-heading\">Details \/ Image Block<\/h1>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/\">Return to CMS Guide<\/a><\/div>\n<\/div>\n\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\" alt=\"placeholder 900 x 600\" class=\"wp-image-9\" style=\"aspect-ratio:3\/2;object-fit:cover\" srcset=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg 900w, https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600-300x200.jpg 300w, https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600-768x512.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n<\/section>\n\n\n\n<div class=\"Common\">\n  \n\n<p class=\"is-style-intro\">The Details \/ Image block was designed primarily for use on academic program pages. It is meant to hold career information, but can be used for other content. It contains a heading, intro text, an image, and three columns for content. Each column contains an icon, sub-heading, and text. Explore the functional example below for additional details.<\/p>\n\n<\/div>\n\n\n\n<section class=\"Details is-style-dark\">\n  \n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"600\" src=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\" alt=\"placeholder 900 x 600\" class=\"wp-image-9\" style=\"aspect-ratio:3\/2;object-fit:cover\" srcset=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg 900w, https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600-300x200.jpg 300w, https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600-768x512.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<div class=\"Common\">\n  \n\n<h2 class=\"wp-block-heading\">Details \/ Image Example<\/h2>\n\n\n\n<p>This is an intro text area that is meant to provide details and context for the content in the columns below. Best practice is to limit this text to 1-3 sentences.<\/p>\n\n<\/div>\n\n\n\n<div class=\"Common\">\n  \n\n<div class=\"Icon\">\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.1.0 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free Copyright 2025 Fonticons, Inc.--><path d=\"M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z\"\/><\/svg><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sub-heading<\/h3>\n\n\n\n<p>This text area is used to provide brief details about the sub-heading topic. It can also be used to create lists of job titles and potential employers. Best practice is to limit this text to a paragraph or an 8-10 item list.<\/p>\n\n<\/div>\n\n\n\n<div class=\"Common\">\n  \n\n<div class=\"Icon\">\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.1.0 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free Copyright 2025 Fonticons, Inc.--><path d=\"M380.8 96C372.7 110.1 368 126.5 368 144L368 160L96 160L96 384L368 384L368 448L96 448C60.7 448 32 419.3 32 384L32 160C32 124.7 60.7 96 96 96L380.8 96zM368 496C368 513.5 372.7 529.9 380.8 544L152 544C138.7 544 128 533.3 128 520C128 506.7 138.7 496 152 496L368 496zM464 96L560 96C586.5 96 608 117.5 608 144L608 496C608 522.5 586.5 544 560 544L464 544C437.5 544 416 522.5 416 496L416 144C416 117.5 437.5 96 464 96zM488 160C474.7 160 464 170.7 464 184C464 197.3 474.7 208 488 208L536 208C549.3 208 560 197.3 560 184C560 170.7 549.3 160 536 160L488 160zM488 256C474.7 256 464 266.7 464 280C464 293.3 474.7 304 488 304L536 304C549.3 304 560 293.3 560 280C560 266.7 549.3 256 536 256L488 256zM544 400C544 382.3 529.7 368 512 368C494.3 368 480 382.3 480 400C480 417.7 494.3 432 512 432C529.7 432 544 417.7 544 400z\"\/><\/svg><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Lorem Ipsum<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nulla facilisi<\/li>\n\n\n\n<li>Maecenas mauris erat<\/li>\n\n\n\n<li>Integer scelerisque scelerisque<\/li>\n\n\n\n<li>Pellentesque<\/li>\n\n\n\n<li>Etiam eu faucibus nunc<\/li>\n\n\n\n<li>Nam facilisis felis<\/li>\n\n\n\n<li>Duis vestibulum sem vel pulvinar mattis<\/li>\n\n\n\n<li>Phasellus<\/li>\n<\/ul>\n\n<\/div>\n\n\n\n<div class=\"Common\">\n  \n\n<div class=\"Icon\">\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 640\"><!--!Font Awesome Free 7.1.0 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free Copyright 2025 Fonticons, Inc.--><path d=\"M337.3 51C325.9 48.7 314.2 48.7 302.8 51L115.3 88.5C104.1 90.7 96 100.6 96 112C96 122.3 102.5 131.3 112 134.6L112 208L96.3 286.6C96.1 287.5 96 288.5 96 289.5C96 297.5 102.5 304.1 110.6 304.1L145.5 304.1C153.5 304.1 160.1 297.6 160.1 289.5C160.1 288.5 160 287.6 159.8 286.6L144 208L144 141.3L192 150.9L192 208C192 278.7 249.3 336 320 336C390.7 336 448 278.7 448 208L448 150.9L524.7 135.6C535.9 133.3 544 123.4 544 112C544 100.6 535.9 90.7 524.7 88.5L337.3 51zM320 288C275.8 288 240 252.2 240 208L400 208C400 252.2 364.2 288 320 288zM216.1 384.1C154.7 412.3 112 474.3 112 546.3C112 562.7 125.3 576 141.7 576L296 576L296 430L238.6 387C232.1 382.1 223.4 380.8 216 384.2zM344 576L498.3 576C514.7 576 528 562.7 528 546.3C528 474.3 485.3 412.3 423.9 384.2C416.5 380.8 407.8 382.1 401.3 387L343.9 430L343.9 576z\"\/><\/svg><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Vestibulum facilisis<\/h3>\n\n\n\n<p>Fusce aliquam porttitor fermentum. Mauris condimentum euismod tellus, nec laoreet erat luctus id.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Donec ac erat quis<\/li>\n\n\n\n<li>Phasellus eu felis<\/li>\n\n\n\n<li>Nunc efficitur leo<\/li>\n\n\n\n<li>Integer efficitur sed sapien vel congue<\/li>\n<\/ul>\n\n<\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":5,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Details \/ Image Block - Web Guide<\/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:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Details \/ Image Block - Web Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-13T16:18:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/\",\"url\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/\",\"name\":\"Details \/ Image Block - Web Guide\",\"isPartOf\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\",\"datePublished\":\"2026-02-11T16:07:05+00:00\",\"dateModified\":\"2026-02-13T16:18:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#primaryimage\",\"url\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\",\"contentUrl\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg\",\"width\":900,\"height\":600,\"caption\":\"placeholder 900 x 600\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Guide\",\"item\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Details \/ Image Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website\",\"url\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/\",\"name\":\"Web Guide\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teton.wwwdev.uwosh.edu\/web\/?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":"Details \/ Image Block - Web Guide","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:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/","og_locale":"en_US","og_type":"article","og_title":"Details \/ Image Block - Web Guide","og_url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/","og_site_name":"Web Guide","article_modified_time":"2026-02-13T16:18:50+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/","url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/","name":"Details \/ Image Block - Web Guide","isPartOf":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#primaryimage"},"image":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#primaryimage"},"thumbnailUrl":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","datePublished":"2026-02-11T16:07:05+00:00","dateModified":"2026-02-13T16:18:50+00:00","breadcrumb":{"@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#primaryimage","url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","contentUrl":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-content\/uploads\/sites\/3\/2026\/02\/900x600.jpg","width":900,"height":600,"caption":"placeholder 900 x 600"},{"@type":"BreadcrumbList","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/details-image-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teton.wwwdev.uwosh.edu\/web\/"},{"@type":"ListItem","position":2,"name":"CMS Guide","item":"https:\/\/teton.wwwdev.uwosh.edu\/web\/cms-guide\/"},{"@type":"ListItem","position":3,"name":"Details \/ Image Block"}]},{"@type":"WebSite","@id":"https:\/\/teton.wwwdev.uwosh.edu\/web\/#website","url":"https:\/\/teton.wwwdev.uwosh.edu\/web\/","name":"Web Guide","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teton.wwwdev.uwosh.edu\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":3,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/33\/revisions\/161"}],"up":[{"embeddable":true,"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/pages\/5"}],"wp:attachment":[{"href":"https:\/\/teton.wwwdev.uwosh.edu\/web\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}