{"id":2297,"date":"2017-08-23T15:14:12","date_gmt":"2017-08-23T19:14:12","guid":{"rendered":"https:\/\/med-webguide.sites.unc.edu\/?page_id=2297"},"modified":"2025-10-21T12:30:00","modified_gmt":"2025-10-21T16:30:00","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/headings\/shortcodes\/","title":{"rendered":"Stylized Headings"},"content":{"rendered":"<p>Below are several stylized heading options that all generate <strong>H2-level headings<\/strong>.<\/p>\n<h2>How To Add a Stylized Heading<\/h2>\n<ol start=\"1\">\n<li>Place your cursor on the page where you want the heading to appear.<\/li>\n<li>In the editor toolbar, click the <strong>Shortcodes<\/strong> button.<\/li>\n<li>Hover over <strong>White Coat Theme Shortcodes<\/strong> to open the submenu.<\/li>\n<li>Select the desired heading option from the list.<\/li>\n<li>Shortcode will be inserted into your page.<\/li>\n<li>Replace the placeholder text with your own content.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" style=\"border: 1px solid #888;\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/10\/Screen-Shot-2020-10-19-at-1.10.19-PM-e1605283940628.png\" alt=\"Screenshot showing where to find the White Coat Shortcodes in the editor.\" width=\"800\" height=\"301\" \/><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>School of Medicine Header<\/h2>\n<p>The <strong>School of Medicine Header<\/strong> shortcode is designed to introduce key sections of content on your homepage or other high-level pages. It creates a bold header that has a short underline treatment.<\/p>\n<ol>\n<li>In the editor, select <strong>Shortcodes &gt; White Coat Theme Shortcodes &gt; School of Medicine Headers<\/strong>.<\/li>\n<li>The shortcode will be added to your page.<\/li>\n<li>Replace &#8220;<strong>A Sense of Belonging. Delete this text.<\/strong>&#8221; with your own text.<\/li>\n<\/ol>\n<p><code>[medheader]A Sense of Belonging. Delete this text.[\/medheader]<\/code><\/p>\n<div class = \"alert alert-info  oscitas-bootstrap-container\">\n<h2 class=\"www-somHeader\">Example of a School of Medicine Header<\/h2>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/mens-health-som-header.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9907 aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/mens-health-som-header.png\" alt=\"Example of the School of Medicine Header shortcode option on the UNC Men's Health Program website.\" width=\"500\" height=\"298\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/mens-health-som-header.png 1000w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/mens-health-som-header-300x179.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/mens-health-som-header-768x458.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/mens-health-som-header-600x358.png 600w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<\/div>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>SOM Intro Tagline<\/h2>\n<p>The <strong>SOM Intro Tagline<\/strong> creates a bold, all-caps heading followed by a short supporting paragraph. Both elements are styled with additional white space on the left and right, giving the content a more open appearance that <strong>does not<\/strong> span the full width of it&#8217;s containing element.<\/p>\n<ol>\n<li>In the editor, select <strong>Shortcodes &gt; White Coat Theme Shortcodes &gt; SOM Intro Tagline<\/strong>.<\/li>\n<li>The shortcode will be added to your page.<\/li>\n<li>Inside the opening shortcode, replace &#8220;<strong>INSERT YOUR TAGLINE<\/strong>&#8221; with the desired header text.\n<ul>\n<li><strong>Do not<\/strong> delete the surrounding quotation marks, just replace the text inside them.<\/li>\n<\/ul>\n<\/li>\n<li>Replace the placeholder paragraph that begins with &#8220;<strong>Insert your content&#8230;<\/strong>&#8221; with the supporting text.<\/li>\n<\/ol>\n<p><code>[som-intro tagline=\"INSERT YOUR TAGLINE\"]\nInsert your content. This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me. Delete this text.<br \/>\n[\/som-intro]<\/code><\/p>\n<div class = \"alert alert-info  oscitas-bootstrap-container\">\n<div class=\"intro-som\"><h2><em>Example SOM Intro Tagline\n             <\/em><\/h2><p>\nThis short code is used to display a stylized header and short paragraph that emphasize the mission or purpose of your site.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"border: 1px solid #888;\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/som-tagline.png\" alt=\"Example of the SOM Intro Tagline shortcode on the main School of Medicine website.\" width=\"500\" height=\"712\" \/><\/p>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Stylized Title<\/h2>\n<p>The <strong>Stylized Title<\/strong> shortcode is used to introduce different sections of content on a page. This heading style features a yellow accent line and should only be placed on a white background.\u00a0As shown in the blue example box below, the header text is styled with a white background. This prevents the yellow line from displaying behind the text.<\/p>\n<ol>\n<li>In the editor, select <strong>Shortcodes &gt; White Coat Theme Shortcodes &gt; Stylized Title.<\/strong><\/li>\n<li>The shortcode will be added to your page.<\/li>\n<li>Replace &#8220;<strong>Content<\/strong>&#8221; with the desired heading text.<\/li>\n<\/ol>\n<p><code>[stylized-title]Content[\/stylized-title]<\/code><\/p>\n<div class = \"alert alert-info  oscitas-bootstrap-container\">\n<div id=\"stylized\"><h2 class=\"section-som\"><span>Example Stylized Title<\/span><\/h2><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" style=\"border: 1px solid #888;\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/10\/Screen-Shot-2020-10-16-at-1.54.22-PM-e1605284178476.png\" alt=\"Example of the Stylized Title on the HTSF website. \" width=\"800\" height=\"400\" \/><\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" style=\"border: 1px solid #888;\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/10\/Screen-Shot-2020-10-16-at-1.53.29-PM-e1605284280404.png\" alt=\"Example of the Stylized Title on the Biochemistry website. \" width=\"800\" height=\"392\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Font Awesome Section Header<\/h2>\n<p>The <strong>Font Awesome Section Header<\/strong> shortcode lets you add an icon to a header. There are <strong>17 icons<\/strong> that can be used with this shortcode (see the list below).<\/p>\n<ol>\n<li>In the editor, select <strong>Shortcodes &gt; White Coat Theme Shortcodes &gt; Font Awesome Section Header<\/strong>.<\/li>\n<li>The shortcode will be added to your page.<\/li>\n<li>Replace &#8220;<strong>your fa icon<\/strong>&#8221; with the name of the desired icon.\n<ul>\n<li><strong>Do not<\/strong> delete the surrounding quotation marks, just replace the text inside them.<\/li>\n<\/ul>\n<\/li>\n<li>Replace &#8220;<strong>Content<\/strong>&#8221; with the desired heading text.<\/li>\n<\/ol>\n<p><code>[fa-section id=\"your fa icon\"]Content[\/fa-section]<\/code><\/p>\n<h3>Icon Options<\/h3>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"chart-column\"\n\t         class=\"icon center fa-chart-column\">Chart Column<\/h2>\n<code style=\"text-align: center;\">id=\"chart-column\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"bookmark\"\n\t         class=\"icon center fa-bookmark\">Bookmark<\/h2>\n<code style=\"text-align: center;\">id=\"bookmark\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"calendar\"\n\t         class=\"icon center fa-calendar\">Calendar<\/h2>\n<code style=\"text-align: center;\">id=\"calendar\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"clock\"\n\t         class=\"icon center fa-clock\">Clock<\/h2>\n<code style=\"text-align: center;\">id=\"clock\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"envelope\"\n\t         class=\"icon center fa-envelope\">Envelope<\/h2>\n<code style=\"text-align: center;\">id=\"envelope\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"flask\"\n\t         class=\"icon center fa-flask\">Flask<\/h2>\n<code style=\"text-align: center;\">id=\"flask\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"heart\"\n\t         class=\"icon center fa-heart\">Heart<\/h2>\n<code style=\"text-align: center;\">id=\"heart\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"location-dot\"\n\t         class=\"icon center fa-location-dot\">Location Dot <\/h2>\n<code style=\"text-align: center;\">id=\"location-dot\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"music\"\n\t         class=\"icon center fa-music\">Music<\/h2>\n<code style=\"text-align: center;\">id=\"music\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"newspaper\"\n\t         class=\"icon center fa-newspaper\">Newspaper<\/h2>\n<code style=\"text-align: center;\">id=\"newspaper\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"chart-pie\"\n\t         class=\"icon center fa-chart-pie\">Pie Chart<\/h2>\n<code style=\"text-align: center;\">id=\"chart-pie\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"quote-left\"\n\t         class=\"icon center fa-quote-left\">Quote<\/h2>\n<code style=\"text-align: center;\">id=\"quote-left\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"face-smile\"\n\t         class=\"icon center fa-face-smile\">Face Smile<\/h2>\n<code style=\"text-align: center;\">id=\"face-smile\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"star\"\n\t         class=\"icon center fa-star\">Star<\/h2>\n<code style=\"text-align: center;\">id=\"star\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"thumbs-up\"\n\t         class=\"icon center fa-thumbs-up\">Thumbs Up<\/h2>\n<code style=\"text-align: center;\">id=\"thumbs-up\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"user\"\n\t         class=\"icon center fa-user\">User<\/h2>\n<code style=\"text-align: center;\">id=\"user\"<\/code><\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h2\n\t         id=\"user-doctor\"\n\t         class=\"icon center fa-user-doctor\">User Doctor<\/h2>\n<code style=\"text-align: center;\">id=\"user-doctor\"<\/code><\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class = \"alert alert-info  oscitas-bootstrap-container\">\n<h2\n\t         id=\"star\"\n\t         class=\"icon center fa-star\">Example Font Awesome Section Header<\/h2>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/Screen-Shot-2020-11-10-at-1.16.52-PM-e1605189945107.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9864 aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/Screen-Shot-2020-11-10-at-1.16.52-PM-e1605189945107.jpg\" alt=\"Example of the Font Awesome Section Header on the Department of Medicine.\" width=\"500\" height=\"473\" \/><\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Shortcodes are easy-to-use codes that can add content or styling to a page or post. Here are three shortcode styles for the White Coat theme<\/p>\n","protected":false},"author":56553,"featured_media":0,"parent":14379,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-2297","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/56553"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=2297"}],"version-history":[{"count":5,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2297\/revisions"}],"predecessor-version":[{"id":14641,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2297\/revisions\/14641"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14379"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=2297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}