{"id":2708,"date":"2022-09-08T09:56:38","date_gmt":"2022-09-08T09:56:38","guid":{"rendered":"http:\/\/clapat-themes.com\/wordpress\/humpton\/?page_id=2708"},"modified":"2022-09-08T09:56:38","modified_gmt":"2022-09-08T09:56:38","slug":"typography","status":"publish","type":"page","link":"https:\/\/insuweb.techsoft.asia\/?page_id=2708","title":{"rendered":"Typography"},"content":{"rendered":"\n<div class=\"wp-block-humpton-gutenberg-container content-row light-section normal\" data-bgcolor=\"#ffffff\" style=\"text-align:left\">\n<h5 class=\"wp-block-heading\">Headings<\/h5>\n\n\n\n<p>When creating a header, all you need to do is add before your header or use the contextual toolbar. You can keep adding up to six n a row to make the headers smaller.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"has-mask-fill wp-block-heading\">Heading 1<\/h1>\n\n\n\n<h2 class=\"has-mask-fill wp-block-heading\">Heading 2<\/h2>\n\n\n\n<h3 class=\"has-mask-fill wp-block-heading\">Heading 3<\/h3>\n\n\n\n<h4 class=\"has-mask-fill wp-block-heading\">Heading 4<\/h4>\n\n\n\n<h5 class=\"has-mask-fill wp-block-heading\">Heading 5<\/h5>\n\n\n\n<h6 class=\"has-mask-fill wp-block-heading\">Heading 6<\/h6>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Links<\/h5>\n\n\n\n<p>If you paste in a URL, like <a class=\"link\" href=\"https:\/\/clapat-themes.com\">https:\/\/clapat-themes.com<\/a> &#8211; it&#8217;ll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here&#8217;s a link to the <a class=\"link\" href=\"https:\/\/clapat-themes.com\">ClaPat Website<\/a>.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Floating Image<\/h5>\n\n\n\n<p>This is a text with a <span class=\"has-hover-image hide-ball\" data-img=\"http:\/\/elymor.clapat-templates.com\/images\/shortcodes\/collage01.jpg\">floating image<\/span> which you can use as <span class=\"has-hover-image vertical hide-ball\" data-img=\"http:\/\/elymor.clapat-templates.com\/images\/shortcodes\/pinned02.jpg\">many times<\/span> you want in each paragraph.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Quoting<\/h5>\n\n\n\n<p>If you want to add a quote, you just need to add a blockquote to the beginning of the line or use the contextual toolbar, and it will put it into the quote format.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Our time is limited, so don\u2019t waste it living someone else\u2019s life. Don\u2019t be trapped by dogma which is living with the results of other people\u2019s thinking.<\/p><\/blockquote>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Tables<\/h5>\n\n\n\n<p>This theme supports responsive tables that will display a horizontal scroll bar if the screen is too small to display the full content.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>#<\/th><th>Heading<\/th><th>Heading<\/th><th>Heading<\/th><th>Heading<\/th><\/tr><\/thead><tbody><tr><td>1<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><\/tr><tr><td>2<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><\/tr><tr><td>3<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><\/tr><tr><td>4<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><\/tr><tr><td>5<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><td>Cell<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Highlighting<\/h5>\n\n\n\n<p><mark>Highlighting text<\/mark> can help bring important information immediately to the reader&#8217;s attention. When creating a highlighting text, all you need to do is add a <code>==<\/code> before and after your text in a <strong>Markdown card<\/strong>.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-3\">\n<div class=\"wp-block-column is-layout-flow\">\n<h5 class=\"wp-block-heading\">Unordered list<\/h5>\n\n\n\n<ul><li>Item number one<\/li><li>Item number two<ul><li>Item number one<\/li><\/ul><ul><li>Item number two<\/li><\/ul><\/li><li>Item number three<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<h5 class=\"wp-block-heading\">Ordered list<\/h5>\n\n\n\n<ol><li>Item number one<\/li><li>Item number two<ol><li>Item number one<\/li><li>Item number two<\/li><\/ol><\/li><li>Item number three<\/li><\/ol>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Code<\/h5>\n\n\n\n<p>If you\u2019re a technical writer, you may want to use example snippets of code to teach your readers a particular syntax.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.awesome-thing {\n  display: block;\n  width: 100%;\n}<\/code><\/pre>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Text Indentation<\/h5>\n\n\n\n<p class=\"has-indent\">You don&#8217;t see this visual style as much in web pages because browsers, by default, display paragraphs with space underneath them as a way to show where one ends and another begins, but if you want to style a page to have that print-inspired indent style on paragraphs, you can do so with the text-indent style property. <\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Text Indentation<\/h5>\n\n\n\n<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&#8217;t look even slightly believable.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-6\">\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-wrap small-btn right \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-angle-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky right\"><span data-hover=\"Sticky Button Right\">Sticky Button Right<\/span><\/div><\/a><\/div>\n\n\n\n<div class=\"button-wrap large-btn right \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-angle-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky right\"><span data-hover=\"Sticky Button Right\">Sticky Button Right<\/span><\/div><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-wrap small-btn left \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-angle-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky left\"><span data-hover=\"Sticky Button Left\">Sticky Button Left<\/span><\/div><\/a><\/div>\n\n\n\n<div class=\"button-wrap large-btn left \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-angle-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky left\"><span data-hover=\"Sticky Button Left\">Sticky Button Left<\/span><\/div><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-9\">\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-wrap small-btn right button-link \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky right\"><span data-hover=\"Sticky Button Right\">Sticky Button Right<\/span><\/div><\/a><\/div>\n\n\n\n<div class=\"button-wrap large-btn right button-link \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky right\"><span data-hover=\"Sticky Button Right\">Sticky Button Right<\/span><\/div><\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-wrap small-btn left button-link \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky left\"><span data-hover=\"Sticky Button Left\">Sticky Button Left<\/span><\/div><\/a><\/div>\n\n\n\n<div class=\"button-wrap large-btn left button-link \"><div class=\"icon-wrap parallax-wrap\"><div class=\"button-icon parallax-element\"><i class=\"fa-solid fa-arrow-right\"><\/i><\/div><\/div><a target=\"_blank\" href=\"http:\/\/\"><div class=\"button-text sticky left\"><span data-hover=\"Sticky Button Left\">Sticky Button Left<\/span><\/div><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-12\">\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-box \"><div class=\"clapat-button-wrap parallax-wrap hide-ball\"><div class=\"clapat-button parallax-element\"><div class=\"button-border parallax-element-second outline rounded\"><a class=\" ajax-link animation-link\" href=\"http:\/\/elymor.clapat-themes.com\/typhography\/\" data-type=\"page-transition\" target=\"_self\"><span data-hover=\"Button Text\">Button Text<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-box \"><div class=\"clapat-button-wrap parallax-wrap hide-ball\"><div class=\"clapat-button parallax-element\"><div class=\"button-border parallax-element-second outline\"><a class=\" ajax-link animation-link\" href=\"http:\/\/elymor.clapat-themes.com\/typhography\/\" data-type=\"page-transition\" target=\"_self\"><span data-hover=\"Button Text\">Button Text<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-15\">\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-box \"><div class=\"clapat-button-wrap parallax-wrap hide-ball\"><div class=\"clapat-button parallax-element\"><div class=\"button-border parallax-element-second rounded\"><a class=\" ajax-link animation-link\" href=\"http:\/\/elymor.clapat-themes.com\/typhography\/\" data-type=\"page-transition\" target=\"_self\"><span data-hover=\"Button Text\">Button Text<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"button-box \"><div class=\"clapat-button-wrap parallax-wrap hide-ball\"><div class=\"clapat-button parallax-element\"><div class=\"button-border parallax-element-second\"><a class=\" ajax-link animation-link\" href=\"http:\/\/elymor.clapat-themes.com\/typhography\/\" data-type=\"page-transition\" target=\"_self\"><span data-hover=\"Button Text\">Button Text<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=\/wp\/v2\/pages\/2708"}],"collection":[{"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2708"}],"version-history":[{"count":0,"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=\/wp\/v2\/pages\/2708\/revisions"}],"wp:attachment":[{"href":"https:\/\/insuweb.techsoft.asia\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}