{"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":[],"_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}]}}