{"id":54,"date":"2016-02-15T14:01:19","date_gmt":"2016-02-15T14:01:19","guid":{"rendered":"http:\/\/flatsome.dev\/?page_id=3971"},"modified":"2020-03-17T20:42:35","modified_gmt":"2020-03-17T20:42:35","slug":"typography","status":"publish","type":"page","link":"https:\/\/mcpg.org.my\/v1\/elements\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n  <div class=\"banner has-hover\" id=\"banner-1228045080\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1384237736\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3 class=\"uppercase\"><strong>Text Elements<\/strong><\/h3>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1384237736 {\n  width: 60%;\n}\n#text-box-1384237736 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1228045080 {\n  padding-top: 400px;\n}\n#banner-1228045080 .bg.bg-loaded {\n  background-image: url(https:\/\/mcpg.org.my\/v1\/wp-content\/uploads\/2016\/08\/dummy-2.jpg);\n}\n#banner-1228045080 .overlay {\n  background-color: rgba(0, 0, 0, 0.66);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n\t<section class=\"section\" id=\"section_992178856\">\n\t\t<div class=\"bg section-bg fill bg-fill  bg-loaded\" >\n\n\t\t\t\n\t\t\t\n\t\t\t\n\n\t\t<\/div><!-- .section-bg -->\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n<div class=\"container section-title-container\" ><h3 class=\"section-title section-title-center\"><b><\/b><span class=\"section-title-main\" >Typography<\/span><b><\/b><\/h3><\/div><!-- .section-title -->\n<div class=\"row\"  id=\"row-1673612443\">\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h1>Headline h1<\/h1>\n<h2>Headline h2<\/h2>\n<h3>Headline h3<\/h3>\n<h4>Headline h4<\/h4>\n<h5>Headline h5<\/h5>\n<h6>Headline h6<\/h6>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h1 class=\"uppercase\">headline\u00a0h1<\/h1>\n<h2 class=\"uppercase\">headline\u00a0h2<\/h2>\n<h3 class=\"uppercase\">headline\u00a0h3<\/h3>\n<h4 class=\"uppercase\">headline\u00a0H4<\/h4>\n<h5 class=\"uppercase\">headline\u00a0H5<\/h5>\n<h6 class=\"uppercase\">headline\u00a0H6<\/h6>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h3 class=\"uppercase\" data-text-color=\"primary\">primary color<\/h3>\n<h3 class=\"uppercase\" data-text-color=\"secondary\">secondary color<\/h3>\n<h3 class=\"uppercase\" data-text-color=\"alert\">alert color<\/h3>\n<h3 class=\"uppercase\" data-text-color=\"success\">SUCCESS COLOR<\/h3>\n<h3 class=\"uppercase\">DEFAULT\u00a0COLOR<\/h3>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<p><a href=\"#\">Default link<br \/>\n<strong>Bold link<\/strong><\/a><br \/>\n<strong>Bold text<br \/>\n<\/strong><em>Italic text<br \/>\n<\/em><del>Strikethrough<br \/>\n<\/del><span style=\"text-decoration: underline;\">Underline<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<div class=\"row\"  id=\"row-1764825390\">\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n<p class=\"lead\"><strong>Lead paragraph<\/strong>.\u00a0dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n<p><strong>Bold\u00a0Text.<\/strong>\u00a0sit amet, consectetuer <em>italic text\u00a0\u00a0<\/em>elit, sed diam nonummy nibh euismod tincidunt ut laoreet <span style=\"text-decoration: underline;\">underline text<\/span>\u00a0magna aliquam erat volutpat. <del>Strike throught<\/del>.\u00a0ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea. <a href=\"#\">A simple link.<\/a><\/p>\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n<p>Normal Paragraph.\u00a0sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa<\/p>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead\">Default font<\/h2>\n<p class=\"lead\">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.<\/p>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead alt-font\"><b>Alternative Font<\/b>.<\/h2>\n<p class=\"lead alt-font\">Dolor sit amet, consectetuer <strong>adipiscing<\/strong> elit, sed diam nonummy.<\/p>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead\">Thin\u00a0text<\/h2>\n<p class=\"lead\">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.<\/p>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead uppercase\">UPPERCASE<\/h2>\n<p class=\"lead uppercase\">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.<\/p>\n<\/div><\/div>\n<div class=\"col medium-6 large-6\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead\">This is a\u00a0<span class=\"fancy-underline\">Fancy Text Underline<\/span><\/h2>\n<p class=\"lead\">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.<\/p>\n<\/div><\/div>\n<div class=\"col medium-6 large-6\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead\">This a count up number <span class=\"count-up\"><strong>5000<\/strong><\/span><\/h2>\n<p class=\"lead\">Count up number can be added anywhere.<\/p>\n<\/div><\/div>\n<\/div>\n\t\t<\/div><!-- .section-content -->\n\n\t\t\n<style scope=\"scope\">\n\n#section_992178856 {\n  padding-top: 30px;\n  padding-bottom: 30px;\n  background-color: rgb(255, 255, 255);\n}\n<\/style>\n\t<\/section>\n\t\n\t<section class=\"section\" id=\"section_351636538\">\n\t\t<div class=\"bg section-bg fill bg-fill  bg-loaded\" >\n\n\t\t\t\n\t\t\t<div class=\"section-bg-overlay absolute fill\"><\/div>\n\t\t\t\n\n\t\t<\/div><!-- .section-bg -->\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n<div class=\"row row-large align-middle\"  id=\"row-1536998622\">\n<div class=\"col medium-6 small-12 large-6\"  ><div class=\"col-inner text-left\"  >\n<h6>Flatsome Tip<\/h6>\n<h2>You can find\u00a0many text options in the &#8220;Format&#8221; dropdown in text editor.<\/h2>\n<p class=\"lead\">You see the changes live if you use the Page Builder<\/p>\n<\/div><\/div>\n<div class=\"col medium-6 small-12 large-6\"  ><div class=\"col-inner\"  >\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1221601137\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-3 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"260\" src=\"https:\/\/mcpg.org.my\/v1\/wp-content\/uploads\/2016\/08\/dummy-1.jpg\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/mcpg.org.my\/v1\/wp-content\/uploads\/2016\/08\/dummy-1.jpg 400w, https:\/\/mcpg.org.my\/v1\/wp-content\/uploads\/2016\/08\/dummy-1-300x195.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style scope=\"scope\">\n\n#image_1221601137 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<\/div><\/div>\n\n<style scope=\"scope\">\n\n<\/style>\n<\/div>\n\t\t<\/div><!-- .section-content -->\n\n\t\t\n<style scope=\"scope\">\n\n#section_351636538 {\n  padding-top: 30px;\n  padding-bottom: 30px;\n  background-color: rgb(193, 193, 193);\n}\n#section_351636538 .section-bg-overlay {\n  background-color: rgba(255, 255, 255, 0.85);\n}\n<\/style>\n\t<\/section>\n\t\n\t<section class=\"section dark\" id=\"section_536209657\">\n\t\t<div class=\"bg section-bg fill bg-fill  bg-loaded\" >\n\n\t\t\t\n\t\t\t<div class=\"section-bg-overlay absolute fill\"><\/div>\n\t\t\t\n\n\t\t<\/div><!-- .section-bg -->\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n<div class=\"container section-title-container\" ><h3 class=\"section-title section-title-center\"><b><\/b><span class=\"section-title-main\" >Typography on Dark background<\/span><b><\/b><\/h3><\/div><!-- .section-title -->\n<div class=\"row\"  id=\"row-2105536624\">\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h1>Headline h1<\/h1>\n<h2>Headline h2<\/h2>\n<h3>Headline h3<\/h3>\n<h4>Headline h4<\/h4>\n<h5>Headline h5<\/h5>\n<h6>Headline h6<\/h6>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h1 class=\"uppercase\">headline\u00a0h1<\/h1>\n<h2 class=\"uppercase\">headline\u00a0h2<\/h2>\n<h3 class=\"uppercase\">headline\u00a0h3<\/h3>\n<h4 class=\"uppercase\">headline\u00a0H4<\/h4>\n<h5 class=\"uppercase\">headline\u00a0H5<\/h5>\n<h6 class=\"uppercase\">headline\u00a0H6<\/h6>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<h3 class=\"uppercase\" data-text-color=\"primary\">primary color<\/h3>\n<h3 class=\"uppercase\" data-text-color=\"secondary\">secondary color<\/h3>\n<h3 class=\"uppercase\" data-text-color=\"alert\">alert color<\/h3>\n<h3 class=\"uppercase\" data-text-color=\"success\">SUCCESS COLOR<\/h3>\n<h3 class=\"uppercase\">DEFAULT\u00a0COLOR<\/h3>\n<\/div><\/div>\n<div class=\"col medium-3 large-3\"  ><div class=\"col-inner\"  >\n<p><a href=\"#\">Default link<br \/>\n<strong>Bold link<\/strong><\/a><br \/>\n<strong>Bold text<br \/>\n<\/strong><em>Italic text<br \/>\n<\/em><del>Strikethrough<br \/>\n<\/del><span style=\"text-decoration: underline;\">Underline<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<div class=\"row\"  id=\"row-2049789105\">\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n<p class=\"lead\"><strong>Lead paragraph<\/strong>.\u00a0dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n<p><strong>Bold\u00a0Text.<\/strong>\u00a0sit amet, consectetuer <em>italic text\u00a0\u00a0<\/em>elit, sed diam nonummy nibh euismod tincidunt ut laoreet <span style=\"text-decoration: underline;\">underline text<\/span>\u00a0magna aliquam erat volutpat. <del>Strike throught<\/del>.\u00a0ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea. <a href=\"#\">A simple link.<\/a><\/p>\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n<p>Normal Paragraph.\u00a0sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa<\/p>\n<\/div><\/div>\n<div class=\"col medium-7 large-7\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead\">This is a<span class=\"fancy-underline\">\u00a0Fancy Text Underline<\/span><\/h2>\n<p class=\"lead\">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.<\/p>\n<\/div><\/div>\n<div class=\"col medium-5 large-5\"  ><div class=\"col-inner\"  >\n<h2 class=\"lead\">This a count up number <span class=\"count-up\"><strong>5000<\/strong><\/span><\/h2>\n<p class=\"lead\">Count up number can be added anywhere.<\/p>\n<\/div><\/div>\n<\/div>\n\t\t<\/div><!-- .section-content -->\n\n\t\t\n<style scope=\"scope\">\n\n#section_536209657 {\n  padding-top: 60px;\n  padding-bottom: 60px;\n  background-color: rgb(255, 255, 255);\n}\n#section_536209657 .section-bg-overlay {\n  background-color: rgb(34, 34, 34);\n}\n<\/style>\n\t<\/section>\n\t\n\t<section class=\"section\" id=\"section_1350339419\">\n\t\t<div class=\"bg section-bg fill bg-fill  bg-loaded\" >\n\n\t\t\t\n\t\t\t\n\t\t\t\n\n\t\t<\/div><!-- .section-bg -->\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n<div class=\"container section-title-container\" ><h3 class=\"section-title section-title-center\"><b><\/b><span class=\"section-title-main\" >Quote<\/span><b><\/b><\/h3><\/div><!-- .section-title -->\n<div class=\"row\"  id=\"row-1476756284\">\n<div class=\"col large-12\"  ><div class=\"col-inner\"  >\n<blockquote>\n<p class=\"lead\"><strong>Quote<\/strong>.\u00a0dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<\/p>\n<\/blockquote>\n<p class=\"lead\">Normal Paragraph.\u00a0sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa. Horizontal Line:<\/p>\n<div class=\"container section-title-container\" ><h3 class=\"section-title section-title-center\"><b><\/b><span class=\"section-title-main\" >Lists<\/span><b><\/b><\/h3><\/div><!-- .section-title -->\n<\/div><\/div>\n<div class=\"col medium-2 large-2\"  ><div class=\"col-inner\"  >\n<ul>\n<li>Simple List<\/li>\n<li>List item 1<\/li>\n<li>List Item 2<\/li>\n<li>List item 3<\/li>\n<li>List Item 4<\/li>\n<li>List Item 5<\/li>\n<\/ul>\n<\/div><\/div>\n<div class=\"col medium-2 large-2\"  ><div class=\"col-inner\"  >\n<ol>\n<li>Numbered List<\/li>\n<li>List item 1<\/li>\n<li>List Item 2<\/li>\n<li>List item 3<\/li>\n<li>List Item 4<\/li>\n<li>List Item 5<\/li>\n<\/ol>\n<\/div><\/div>\n<div class=\"col medium-2 large-2\"  ><div class=\"col-inner\"  >\n<ul>\n<li class=\"bullet-checkmark\">Checkmark list<\/li>\n<li class=\"bullet-checkmark\">List Item 2<\/li>\n<li class=\"bullet-checkmark\">List item 3<\/li>\n<li class=\"bullet-checkmark\">List Item 4<\/li>\n<li class=\"bullet-checkmark\">List Item 5<\/li>\n<\/ul>\n<\/div><\/div>\n<div class=\"col medium-2 large-2\"  ><div class=\"col-inner\"  >\n<ul>\n<li class=\"bullet-star\">Star list<\/li>\n<li class=\"bullet-star\">List Item 2<\/li>\n<li class=\"bullet-star\">List item 3<\/li>\n<li class=\"bullet-star\">List Item 4<\/li>\n<li class=\"bullet-star\">List Item 5<\/li>\n<\/ul>\n<\/div><\/div>\n<div class=\"col medium-2 large-2\"  ><div class=\"col-inner\"  >\n<ul>\n<li class=\"bullet-arrow\">Arrow List<\/li>\n<li class=\"bullet-arrow\">List Item 2<\/li>\n<li class=\"bullet-arrow\">List item 3<\/li>\n<li class=\"bullet-arrow\">List Item 4<\/li>\n<li class=\"bullet-arrow\">List Item 5<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n\t\t<\/div><!-- .section-content -->\n\n\t\t\n<style scope=\"scope\">\n\n#section_1350339419 {\n  padding-top: 60px;\n  padding-bottom: 60px;\n}\n<\/style>\n\t<\/section>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":11,"parent":96,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-54","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":1,"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/pages\/54\/revisions\/129"}],"up":[{"embeddable":true,"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/pages\/96"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/media\/11"}],"wp:attachment":[{"href":"https:\/\/mcpg.org.my\/v1\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}