{"id":2033,"date":"2014-05-27T19:13:44","date_gmt":"2014-05-28T00:13:44","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=2033"},"modified":"2014-05-27T19:13:44","modified_gmt":"2014-05-28T00:13:44","slug":"custom-headline","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/icon-1\/shortcodes\/custom-headline\/","title":{"rendered":"Custom Headline"},"content":{"rendered":"<p>The <code>&#091;custom_headline&#093;<\/code> shortcode affords you a level of control over your headlines like you&#8217;ve never had before! Easily align your headings to the left, right, or center, and even specify an accent if you&#8217;d like, but that&#8217;s only the beginning. You can also set the level for each of your headings (i.e. h1, h2, h3, et cetera), but then you can <em>specify it to look like another heading level<\/em>.<\/p>\n<h2  class=\"h-custom-headline h3 accent\" ><span>Custom Headline<\/span><\/h2>\n<h2  class=\"h-custom-headline center-text h3 accent\" ><span>Custom Headline<\/span><\/h2>\n<h2  class=\"h-custom-headline right-text h3 accent\" style=\"margin-bottom: 1.25em;\"><span>Custom Headline<\/span><\/h2>\n<p>In the examples above, if you inspect the headings with any web development tools you have available, you&#8217;ll notice that each headline is an <code>&lt;h2&gt;<\/code>, but it has the appearance of an <code>&lt;h3&gt;<\/code>. This is great for styling purposes, as it allows you to keep the proper heading structure of your document without interfering with appropriate styling as well.<\/p>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[custom_headline type=\"left\" level=\"h2\" looks_like=\"h3\" accent=\"true\"]Custom Headline[\/custom_headline]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[custom_headline type=\"center\" level=\"h2\" looks_like=\"h3\" accent=\"true\"]Custom Headline[\/custom_headline]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[custom_headline type=\"right\" level=\"h2\" looks_like=\"h3\" accent=\"true\"]Custom Headline[\/custom_headline]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>type<\/strong>: &#8220;left,&#8221; &#8220;right,&#8221; or &#8220;center.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>level<\/strong>: &#8220;h1,&#8221; &#8220;h2,&#8221; &#8220;h3,&#8221; &#8220;h4,&#8221; &#8220;h5,&#8221; or &#8220;h6.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>looks_like<\/strong>: &#8220;h1,&#8221; &#8220;h2,&#8221; &#8220;h3,&#8221; &#8220;h4,&#8221; &#8220;h5,&#8221; or &#8220;h6.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>accent<\/strong>: set to &#8220;true&#8221; to activate the custom headline accent.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The &#091;custom_headline&#093; shortcode affords you a level of control over your headlines like you&#8217;ve never had before! Easily align your headings to the left, right, or center, and even specify an accent if you&#8217;d like, but that&#8217;s only the beginning. You can also set the level for each of your headings (i.e. h1, h2, h3, et cetera), but then you &#8230;<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/2033"}],"collection":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/comments?post=2033"}],"version-history":[{"count":0,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/2033\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/media?parent=2033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}