{"id":223,"date":"2024-01-03T20:03:24","date_gmt":"2024-01-03T20:03:24","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/cells\/?page_id=223"},"modified":"2024-12-18T13:46:05","modified_gmt":"2024-12-18T13:46:05","slug":"icon-boxes","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/","title":{"rendered":"Icon Boxes"},"content":{"rendered":"<h2>Creating An Icon Box<\/h2>\n<p>Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/pre-asses\/\">Determine where the Cell will be used<\/a>.<\/li>\n<li>In the Dashboard, select <strong>Cells<\/strong> in either the top or left-hand navigation.\n<ul>\n<li>If you do not see this option, then the <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage#activate\"><strong>UNCSOM Cells<\/strong> plugin needs to be activated<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Select the <strong>Add New<\/strong> button.<\/li>\n<li><strong>Cell Name:<\/strong> provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.<\/li>\n<li><strong>Layout:<\/strong> Repeatable Boxes<\/li>\n<li><strong>Box Category:<\/strong> Icon Link Boxes<\/li>\n<li><strong>Box Style:<\/strong> Icon Box<\/li>\n<li>Define the base settings:\n<ol>\n<li><strong>Primary Heading<\/strong> and\u00a0<strong>Primary Text:<\/strong> heading and text fields that display above the icon boxes.<\/li>\n<li><strong>Add Title Accent Underline:<\/strong> show or hide the short yellow accent line that displays under the Primary Heading.<\/li>\n<li><strong>Background Color Options:<\/strong> choose the color of the icons<\/li>\n<li><strong>Include Link (Global):<\/strong> selecting <strong>Yes<\/strong> will provide you with the choice of adding an optional link per box.<\/li>\n<li><strong>Column Layout:<\/strong> choose the number of columns in which the icon boxes will be arranged.\n<ul>\n<li>The <strong>four column layout<\/strong> only works on pages <strong>without<\/strong> left-hand navigation (e.g.: a web site&#8217;s home page). This is to prevent the content from getting too squished. Look at the examples to see what it looks like on a page with and without left-hand navigation.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li>For each box:\n<ol>\n<li>Select the <strong>Add New Box<\/strong> button.<\/li>\n<li><strong>Icon:<\/strong> click the\u00a0<strong>Valid Icons<\/strong>\u00a0link below the field to browse the available icon options. You can also reference our\u00a0<a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-nav-bar\/popular-icons\/\">short list of popular icons<\/a>\u00a0for School of Medicine websites. Once you\u2019ve selected an icon, add it\u2019s\u00a0<strong>name<\/strong>\u00a0to the\u00a0<strong>Icon<\/strong>\u00a0field in Cells.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-808\" style=\"margin-top: 5px; margin-bottom: 8px;\" src=\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png\" alt=\"Screenshot showing the location of the Valid Icons link below the Icon field.\" width=\"400\" height=\"144\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png 490w, https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link-300x108.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/li>\n<li><strong>Box Heading:<\/strong> this is the main heading of the icon box. Provide a clear indication of the topic of the box.<\/li>\n<li><strong>Box Text:<\/strong> this is the description within the icon box. Provide additional information related to the box heading.<\/li>\n<li><strong>Include Link (Box):<\/strong> each box has the option of linking to a webpage.<\/li>\n<li><strong>More Link Text:<\/strong> this is the text that appears in the button at the bottom of the icon box. Provide a short description of where the box links to. This field is restricted to 30 characters. Ensure the text you add is meaningful and descriptive &#8211; view our <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/links\/\">accessibility documentation<\/a> for more information. This option only appears if you select <strong>Yes<\/strong> to <strong>Include Link<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<li>Click the <strong>Create Cell<\/strong> button.<\/li>\n<li>If you&#8217;re ready, you can <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/general-usage\/using-a-cell\/\">display the Cell<\/a> on your website.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating An Icon Box Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/\" aria-label=\"Read more about Icon Boxes\">Read more<\/a><\/p>\n","protected":false},"author":1369,"featured_media":0,"parent":32,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-223","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Icon Boxes - 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 Boxes - Cells Plugin Documentation\" \/>\n<meta property=\"og:description\" content=\"Creating An Icon Box Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/\" \/>\n<meta property=\"og:site_name\" content=\"Cells Plugin Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-18T13:46:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png\" \/>\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\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/\",\"name\":\"Icon Boxes - Cells Plugin Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png\",\"datePublished\":\"2024-01-03T20:03:24+00:00\",\"dateModified\":\"2024-12-18T13:46:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png\",\"width\":490,\"height\":176,\"caption\":\"Screenshot showing the location of the Valid Icons link below the Icon field.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#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\"}]},{\"@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 Boxes - 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 Boxes - Cells Plugin Documentation","og_description":"Creating An Icon Box Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification. Determine where the Cell will be used. In the Dashboard, select Cells in either the top or left-hand navigation. If you &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/","og_site_name":"Cells Plugin Documentation","article_modified_time":"2024-12-18T13:46:05+00:00","og_image":[{"url":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png","type":"","width":"","height":""}],"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\/","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/","name":"Icon Boxes - Cells Plugin Documentation","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png","datePublished":"2024-01-03T20:03:24+00:00","dateModified":"2024-12-18T13:46:05+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-content\/uploads\/sites\/1388\/2024\/04\/valid-icons-link.png","width":490,"height":176,"caption":"Screenshot showing the location of the Valid Icons link below the Icon field."},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/cells\/repeatable-boxes\/icon-link-boxes\/icon-boxes\/#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"}]},{"@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\/223","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\/1369"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/223\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/pages\/32"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/cells\/wp-json\/wp\/v2\/media?parent=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}