{"id":678,"date":"2024-03-27T16:39:16","date_gmt":"2024-03-27T16:39:16","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/cells\/?page_id=678"},"modified":"2024-10-01T19:25:04","modified_gmt":"2024-10-01T19:25:04","slug":"examples","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/","title":{"rendered":"Icon Box Examples With Left-Hand Navigation"},"content":{"rendered":"

Example One<\/h2>\n

Below is an example of a three-column<\/strong>\u00a0layout using the medium blue on white color option<\/strong>. Content has been added to the Primary Heading<\/strong> and Primary Text<\/strong> fields, which display before the icon boxes.<\/p>\n<\/som-cell>\n

\n

Example Two<\/h2>\n

Below is an example from the GENYSIS<\/a> web site of a two-column<\/strong>\u00a0layout using the dark blue on white color option<\/strong>. The Primary Heading<\/strong> and Primary Text<\/strong> fields were not<\/strong> used on this Cell. With links disabled, the read more buttons disappear, leaving only the box content.<\/p>\n<\/som-cell>\n

\n

Example Three<\/h2>\n

Below is an example of a three-column<\/strong>\u00a0layout using the light blue on white color option<\/strong>. It displays the Primary Heading<\/strong> above the icon boxes.<\/p>\n<\/som-cell>\n

\n

Example Four<\/h2>\n

Below is an example from the Sports Medicine Institute<\/a> of a three-column<\/strong> layout, without links<\/strong>. This Cells has a Primary Heading<\/strong> and uses the light blue on medium blue color option<\/strong>.<\/p>\n<\/som-cell>\n

\n

Example Five<\/h2>\n

Below is an example of a four-column layout<\/strong>, using the light gray on medium blue color option<\/strong>. The 4-column layout only works on pages without<\/strong> the left-hand navigation (e.g.: a web site’s home page). It will render as a 3-column layout when placed in the body content of pages that display the left-hand navigation. This is to prevent the content from getting too squished. See an example of a four-column layout on a page without left-hand navigation<\/a>.<\/p>\n<\/som-cell>\n

\n

Example Six<\/h2>\n

Below is an example of a three-column<\/strong>\u00a0layout using the light blue on dark blue color option<\/strong>. It uses the Primary Heading<\/strong> and Primary Text<\/strong> above the icon boxes.<\/p>\n<\/som-cell>\n

\n

Example Seven<\/h2>\n

Below is an example of a three-column<\/strong>\u00a0layout using the light gray on dark blue color option<\/strong>.<\/p>\n<\/som-cell>\n

\n

Example Eight<\/h2>\n

Below is an example of a two-column<\/strong>\u00a0layout using the medium blue on light blue color option<\/strong>. The Primary Heading<\/strong> and Primary Text<\/strong> fields were not<\/strong> used and the boxes do not<\/strong> link out.<\/p>\n<\/som-cell>\n

\n

Example Nine<\/h2>\n

Below is an example of a two-column<\/strong>\u00a0layout using the medium blue on light gray color option<\/strong>.<\/p>\n<\/som-cell>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Example One Below is an example of a three-column\u00a0layout using the medium blue on white color option. Content has been added to the Primary Heading and Primary Text fields, which display before the icon boxes. Example Two Below is an example from the GENYSIS web site of a two-column\u00a0layout using the dark blue on white … Read more<\/a><\/p>\n","protected":false},"author":113210,"featured_media":0,"parent":223,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-678","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"\nIcon Box Examples With Left-Hand Navigation - Cells Plugin Documentation<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Icon Box Examples With Left-Hand Navigation - Cells Plugin Documentation\" \/>\n<meta property=\"og:description\" content=\"Example One Below is an example of a three-column\u00a0layout using the medium blue on white color option. Content has been added to the Primary Heading and Primary Text fields, which display before the icon boxes. Example Two Below is an example from the GENYSIS web site of a two-column\u00a0layout using the dark blue on white … Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Cells Plugin Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-01T19:25:04+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/\",\"name\":\"Icon Box Examples With Left-Hand Navigation - Cells Plugin Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\"},\"datePublished\":\"2024-03-27T16:39:16+00:00\",\"dateModified\":\"2024-10-01T19:25:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Repeatable Boxes\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Icon Link Boxes\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Icon Boxes\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Icon Box Examples With Left-Hand Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/\",\"name\":\"Cells Plugin Documentation\",\"description\":\"School of Medicine IT Web Guide\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/?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":"Icon Box Examples With Left-Hand Navigation - Cells Plugin Documentation","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Icon Box Examples With Left-Hand Navigation - Cells Plugin Documentation","og_description":"Example One Below is an example of a three-column\u00a0layout using the medium blue on white color option. Content has been added to the Primary Heading and Primary Text fields, which display before the icon boxes. Example Two Below is an example from the GENYSIS web site of a two-column\u00a0layout using the dark blue on white … Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/","og_site_name":"Cells Plugin Documentation","article_modified_time":"2024-10-01T19:25:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/","name":"Icon Box Examples With Left-Hand Navigation - Cells Plugin Documentation","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website"},"datePublished":"2024-03-27T16:39:16+00:00","dateModified":"2024-10-01T19:25:04+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/"},{"@type":"ListItem","position":2,"name":"Repeatable Boxes","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/"},{"@type":"ListItem","position":3,"name":"Icon Link Boxes","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/"},{"@type":"ListItem","position":4,"name":"Icon Boxes","item":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/"},{"@type":"ListItem","position":5,"name":"Icon Box Examples With Left-Hand Navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/","name":"Cells Plugin Documentation","description":"School of Medicine IT Web Guide","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/cells\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/users\/113210"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/comments?post=678"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/678\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/223"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/media?parent=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}