{"id":18361,"date":"2010-09-17T10:22:27","date_gmt":"2010-09-17T10:22:27","guid":{"rendered":"http:\/\/new.newlifeturkey.com\/index.php\/2010\/09\/17\/typography\/"},"modified":"2010-09-17T10:22:27","modified_gmt":"2010-09-17T10:22:27","slug":"typography","status":"publish","type":"post","link":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"<p><!-- JA TYPO --> <\/p>\n<div id=\"ja-typo\">\n<p>This page presents most of typographical aspects of JA T3v2 Framework. <span class=\"highlight\">Make your readers happy<\/span> with great Typography and User Experience!<\/p>\n<p>  \t<!-- PREFORMATTED TEXT --> \t<\/p>\n<div id=\"typo-style-1\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"> \t\t<span>Preformatted text<\/span> \t<\/h1>\n<div class=\"ja-typo-blockrow cols-1 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"> \t\t\t\t\t<span>Headings<\/span> \t\t\t\t<\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<h1 id=\"typo-1\">This is a sample Heading 1. Lorem ipsum.<\/h1>\n<h2 id=\"typo-2\">This is a sample Heading 2. Lorem ipsum.<\/h2>\n<h3 id=\"typo-3\">This is a sample Heading 3. Lorem ipsum.<\/h3>\n<h4 id=\"typo-4\">This is a sample Heading 4. Lorem ipsum.<\/h4>\n<h5 id=\"typo-5\">This is a sample Heading 5. Lorem ipsum.<\/h5>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-1 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Special Content<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-6\">Below is a sample of <strong>&lt;pre&gt;<\/strong> tag or <strong>code<\/strong> class:<\/p>\n<pre id=\"typo-7\">#ja-rightcol {   width: 180px;   float: right;   color: #EEEEEE; } <\/pre>\n<p id=\"typo-8\">This is a <span class=\"highlight\">highlight phrase<\/span>. Use <strong>&lt;span class=&#8220;highlight&#8220;&gt;Your highlight phrase goes here!&lt;\/span&gt;<\/strong>.<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Blockquote<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<blockquote id=\"typo-9\"><p><span class=\"open\">T<\/span>his is a sample Blockquote. Use <strong>&lt;blockquote&gt;Your quote goes here!&lt;\/blockquote&gt;<\/strong> to form a quote!<\/p><\/blockquote>\n<blockquote id=\"typo-10\"><p><span class=\"open\">T<\/span>his is a sample Blockquote. Use <strong>&lt;blockquote&gt;&lt;span  class=&#8220;open&#8220;&gt;Y&lt;\/span&gt;our quote goes her&lt;span  class=&#8220;close&#8220;&gt;e!&lt;\/span&gt;&lt;\/blockquote&gt;<\/strong> to form a quote<span class=\"close\">!<\/span><\/p><\/blockquote><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Dropcaps<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-11\"><span class=\"dropcap\">T<\/span>his is a Magazine Style Drop Cap. The first  letter in this paragraph is big. JA Templates bring into your Jooomla  template the magazine drop cap technique and CSS2 includes the  first-letter pseudo class. Use <strong>&lt;p&gt;&lt;span class=&#8220;dropcap&#8220;&gt;T&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong> to form a dropcap!<\/p>\n<\/p><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/PREFORMATTED TEXT --> \t \t<!-- LISTS STYLE --> \t<\/p>\n<div id=\"typo-style-2\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Lists Style<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<div class=\"ja-typo-block first clearfix\">\n<h2 class=\"ja-typo-title\"><span>Ordered List<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<ol id=\"typo-12\">\n<li>This is a sample <strong>Ordered List<\/strong>.<\/li>\n<li>Lorem ipsum dolor sit amet consectetur<\/li>\n<li>Lorem ipsum dolor sit amet consectetur<\/li>\n<li>Lorem ipsum dolor sit amet consectetur<\/li>\n<\/ol><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Un-Ordered List<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<ul id=\"typo-13\">\n<li>This is a sample <strong>Unordered List<\/strong>.<\/li>\n<li>Lorem ipsum dolor sit amet consectetur<\/li>\n<li>Lorem ipsum dolor sit amet consectetur<\/li>\n<li>Lorem ipsum dolor sit amet consectetur<\/li>\n<\/ul><\/div><\/div>\n<div class=\"ja-typo-block last clearfix\">\n<h2 class=\"ja-typo-title\"><span>Definition List<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<dl id=\"typo-14\">\n<dt>This is a sample <strong>Definition List<\/strong>.<\/dt>\n<dd>Condimentum quis.<\/dd>\n<dd>Congue Quisque augue elit dolor.<\/dd>\n<dd>Congue Quisque augue elit dolor.<\/dd>\n<\/dl><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<h2 class=\"ja-typo-title\"><span>Special Unordered Lists<\/span><\/h2>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<ul id=\"typo-15\" class=\"ja-typo-list list-arrow\">\n<li><span class=\"icon\"><\/span>This is a sample <strong>Arrow list<\/strong>.<\/li>\n<li><span class=\"icon\"><\/span>Use <strong>&lt;ul class=&#8220;ja-typo-list list-arrow&#8220;&gt;&lt;li&gt;&lt;span class=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;List&#8217;s content goes here!&lt;\/li&gt;&lt;\/ul&gt;<\/strong><\/li>\n<li><span class=\"icon\"><\/span>This is a sample Arrowlist.<\/li>\n<\/ul><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<ul id=\"typo-16\" class=\"ja-typo-list list-star\">\n<li><span class=\"icon\"><\/span>This is a sample <strong>Star list<\/strong>.<\/li>\n<li><span class=\"icon\"><\/span>Use <strong>&lt;ul class=&#8220;ja-typo-list list-star&#8220;&gt;&lt;li&gt;&lt;span class=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;List&#8217;s content goes here!&lt;\/li&gt;&lt;\/ul&gt;<\/strong><\/li>\n<li><span class=\"icon\"><\/span>This is a sample Starlist.<\/li>\n<\/ul><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<ul id=\"typo-17\" class=\"ja-typo-list list-check\">\n<li><span class=\"icon\"><\/span>This is a sample <strong>Check list<\/strong>.<\/li>\n<li><span class=\"icon\"><\/span>Use <strong>&lt;ul class=&#8220;ja-typo-list list-check&#8220;&gt;&lt;li&gt;&lt;span class=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;List&#8217;s content goes here!&lt;\/li&gt;&lt;\/ul&gt;<\/strong><\/li>\n<li><span class=\"icon\"><\/span>This is a sample Checklist.<\/li>\n<\/ul><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<h2 class=\"ja-typo-title\"><span>Block Number<\/span><\/h2>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-18\" class=\"blocknumber blocknumber-1\"><span class=\"bignumber\">01<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-1&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;01&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<p id=\"typo-19\" class=\"blocknumber blocknumber-1\"><span class=\"bignumber\">02<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-1&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;02&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<p id=\"typo-20\" class=\"blocknumber blocknumber-1\"><span class=\"bignumber\">03<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-1&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;03&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-21\" class=\"blocknumber blocknumber-2\"><span class=\"bignumber\">A<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-2&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;A&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<p id=\"typo-22\" class=\"blocknumber blocknumber-2\"><span class=\"bignumber\">B<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-2&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;B&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<p id=\"typo-23\" class=\"blocknumber blocknumber-2\"><span class=\"bignumber\">C<\/span>Use <strong>&lt;p  class=&#8220;blocknumber blocknumber-2&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;C&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-24\" class=\"blocknumber blocknumber-3\"><span class=\"bignumber\">a<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-3&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;a&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<p id=\"typo-25\" class=\"blocknumber blocknumber-3\"><span class=\"bignumber\">b<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-3&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;b&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<p id=\"typo-26\" class=\"blocknumber blocknumber-3\"><span class=\"bignumber\">c<\/span>Use <strong>&lt;p class=&#8220;blocknumber blocknumber-3&#8243;&gt;&lt;span class=&#8220;bignumber&#8220;&gt;c&lt;\/span&gt;Your content goes here!&lt;\/p&gt;<\/strong><\/p>\n<\/p><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/LISTS STYLE -->  \t<!-- \/\/ICONS STYLE --> \t<\/p>\n<div id=\"typo-style-3\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Icons Style<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-2 clearfix\">\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-27\" class=\"ja-typo-icon icon-error\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;error&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes here!&lt;\/p&gt;<\/strong> \t\t\t\t\t\tto make this. \t\t\t\t\t<\/p>\n<p id=\"typo-28\" class=\"ja-typo-icon icon-message\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;message&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes here!&lt;\/p&gt;<\/strong> \t\t\t\t\t\tto make this. \t\t\t\t\t<\/p>\n<p id=\"typo-29\" class=\"ja-typo-icon icon-tips\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;tips&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes here!&lt;\/p&gt;<\/strong> \t\t\t\t\t\tto make this. \t\t\t\t\t<\/p>\n<p id=\"typo-30\" class=\"ja-typo-icon icon-key\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;key&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes here!&lt;\/p&gt;<\/strong> \t\t\t\t\t\tto make this. \t\t\t\t\t<\/p>\n<p id=\"typo-31\" class=\"ja-typo-icon icon-tag\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;tag&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes here!&lt;\/p&gt;<\/strong> \t\t\t\t\t\tto make this. \t\t\t\t\t<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-32\" class=\"ja-typo-icon icon-cart\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;cart&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes \t\t\t\t\t\there!&lt;\/p&gt;<\/strong> to make this. \t\t\t\t\t<\/p>\n<p id=\"typo-33\" class=\"ja-typo-icon icon-doc\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;doc&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes \t\t\t\t\t\there!&lt;\/p&gt;<\/strong> to make this. \t\t\t\t\t<\/p>\n<p id=\"typo-34\" class=\"ja-typo-icon icon-note\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;note&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes \t\t\t\t\t\there!&lt;\/p&gt;<\/strong> to make this. \t\t\t\t\t<\/p>\n<p id=\"typo-35\" class=\"ja-typo-icon icon-photo\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;photo&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes \t\t\t\t\t\there!&lt;\/p&gt;<\/strong> to make this. \t\t\t\t\t<\/p>\n<p id=\"typo-36\" class=\"ja-typo-icon icon-mobi\"> \t\t\t\t\t\t<span class=\"icon\"><\/span>Use <strong>&lt;p class=&#8220;mobi&#8220;&gt;&lt;span \t\t\t\t\t\tclass=&#8220;icon&#8220;&gt;&nbsp;&lt;\/span&gt;Your message goes \t\t\t\t\t\there!&lt;\/p&gt;<\/strong> to make this. \t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/ICONS STYLE --> \t \t<!-- BUBBLES STYLE --> \t<\/p>\n<div id=\"typo-style-4\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Bubbles<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Grey Bubbles<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-37\" class=\"ja-typo-bubble bubble-1\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<div id=\"typo-38\" class=\"ja-typo-bubble bubble-2\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Blue Bubbles<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-39\" class=\"ja-typo-bubble bubble-3\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<div id=\"typo-40\" class=\"ja-typo-bubble bubble-4\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Black Bubbles<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-41\" class=\"ja-typo-bubble bubble-5\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<div id=\"typo-42\" class=\"ja-typo-bubble bubble-6\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Grey Bubbles<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-43\" class=\"ja-typo-bubble bubble-rounded bubble-1\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<div id=\"typo-44\" class=\"ja-typo-bubble bubble-rounded bubble-2\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Blue Bubbles<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-45\" class=\"ja-typo-bubble bubble-rounded bubble-3\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<div id=\"typo-46\" class=\"ja-typo-bubble bubble-rounded bubble-4\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Black Bubbles<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-47\" class=\"ja-typo-bubble bubble-rounded bubble-5\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div>\n<div id=\"typo-48\" class=\"ja-typo-bubble bubble-rounded bubble-6\">\n<div class=\"ja-typo-bubblect\"> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien. \t\t\t\t\t\t<\/div>\n<p class=\"ja-typo-bubble-meta\"> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-arrow\"><\/span> \t\t\t\t\t\t\t<span class=\"ja-typo-bubble-author\">Author Name<\/span> \t\t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/BUBBLES STYLE -->  \t<!-- MESSAGE BOXES & LEGEND STYLE --> \t<\/p>\n<div id=\"typo-style-5\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Message Boxes &amp; Legend Styles<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Message Boxes with Icons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-49\" class=\"ja-typo-box box-sticky\"> \t\t\t\t\t\tThis is a sticky. Use <strong>&lt;p class=&#8220;box-sticky&#8220;&gt;Your clip note \t\t\t\t\t\tgoes here!&lt;\/p&gt;<\/strong> to create a clip note! \t\t\t\t\t<\/p>\n<p id=\"typo-50\" class=\"ja-typo-box box-download\"> \t\t\t\t\t\tThis is a download box. Use <strong>&lt;p class=&#8220;box-download&#8220;&gt;Your \t\t\t\t\t\tdownload goes here!&lt;\/p&gt;<\/strong> to create a download box! \t\t\t\t\t<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Message Boxes &#8211; Style 1<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-51\" class=\"ja-typo-box box-grey-1\"> \t\t\t\t\t\tThis is a grey box. Use <strong>&lt;p class=&#8220;box-grey&#8220;&gt;Your content \t\t\t\t\t\tgoes here!&lt;\/p&gt;<\/strong> to create a grey box! \t\t\t\t\t<\/p>\n<p id=\"typo-52\" class=\"ja-typo-box box-hilite-1\"> \t\t\t\t\t\tThis is a hilite box. Use <strong>&lt;p class=&#8220;box-hilite&#8220;&gt;Your \t\t\t\t\t\tcontent goes here!&lt;\/p&gt;<\/strong> to create a hilite box! \t\t\t\t\t<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Message Boxes &#8211; Style 2<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-53\" class=\"ja-typo-box box-grey-2\"> \t\t\t\t\t\tThis is a grey box. Use <strong>&lt;p class=&#8220;box-grey&#8220;&gt;Your content \t\t\t\t\t\tgoes here!&lt;\/p&gt;<\/strong> to create a grey box! \t\t\t\t\t<\/p>\n<p id=\"typo-54\" class=\"ja-typo-box box-hilite-2\"> \t\t\t\t\t\tThis is a hilite box. Use <strong>&lt;p class=&#8220;box-hilite&#8220;&gt;Your \t\t\t\t\t\tcontent goes here!&lt;\/p&gt;<\/strong> to create a hilite box! \t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Message Boxes with Icons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-55\" class=\"ja-typo-box box-rounded box-sticky\"> \t\t\t\t\t\tThis is a sticky. Use <strong>&lt;p class=&#8220;box-sticky&#8220;&gt;Your clip note \t\t\t\t\t\tgoes here!&lt;\/p&gt;<\/strong> to create a clip note! \t\t\t\t\t<\/p>\n<p id=\"typo-56\" class=\"ja-typo-box box-rounded box-download\"> \t\t\t\t\t\tThis is a download box. Use <strong>&lt;p class=&#8220;box-download&#8220;&gt;Your \t\t\t\t\t\tdownload goes here!&lt;\/p&gt;<\/strong> to create a download box! \t\t\t\t\t<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Message Boxes &#8211; Style 1<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-57\" class=\"ja-typo-box box-rounded box-grey-1\"> \t\t\t\t\t\tThis is a grey box. Use <strong>&lt;p class=&#8220;box-grey&#8220;&gt;Your content \t\t\t\t\t\tgoes here!&lt;\/p&gt;<\/strong> to create a grey box! \t\t\t\t\t<\/p>\n<p id=\"typo-58\" class=\"ja-typo-box box-rounded box-hilite-1\"> \t\t\t\t\t\tThis is a hilite box. Use <strong>&lt;p class=&#8220;box-hilite&#8220;&gt;Your \t\t\t\t\t\tcontent goes here!&lt;\/p&gt;<\/strong> to create a hilite box! \t\t\t\t\t<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Message Boxes &#8211; Style 2<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-59\" class=\"ja-typo-box box-rounded box-grey-2\"> \t\t\t\t\t\tThis is a grey box. Use <strong>&lt;p class=&#8220;box-grey&#8220;&gt;Your content \t\t\t\t\t\tgoes here!&lt;\/p&gt;<\/strong> to create a grey box! \t\t\t\t\t<\/p>\n<p id=\"typo-60\" class=\"ja-typo-box box-rounded box-hilite-2\"> \t\t\t\t\t\tThis is a hilite box. Use <strong>&lt;p class=&#8220;box-hilite&#8220;&gt;Your \t\t\t\t\t\tcontent goes here!&lt;\/p&gt;<\/strong> to create a hilite box! \t\t\t\t\t<\/p>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-2 clearfix\">\n<h2 class=\"ja-typo-title\"><span>Legends<\/span><\/h2>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-61\" class=\"ja-typo-legend legend-1\">\n<h3 class=\"legend-title\">Legend &#8211; Style 1<\/h3>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. \t\t\t\t\t<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-62\" class=\"ja-typo-legend legend-2\">\n<h3 class=\"legend-title\">Legend &#8211; Style 2<\/h3>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. \t\t\t\t\t<\/p><\/div><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-2 clearfix\">\n<h2 class=\"ja-typo-title\"><span>Rounded Legends<\/span><\/h2>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-63\" class=\"ja-typo-legend legend-rounded legend-1\">\n<h3 class=\"legend-title\">Rounded Legend &#8211; Style 1<\/h3>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. \t\t\t\t\t<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-64\" class=\"ja-typo-legend legend-rounded legend-2\">\n<h3 class=\"legend-title\">Rounded Legend &#8211; Style 2<\/h3>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. \t\t\t\t\t<\/p><\/div><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/MESSAGE BOXES & LEGEND STYLE --> \t \t<!-- BUTTONS & TAGS --> \t<\/p>\n<div id=\"typo-style-6\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Buttons &amp; Tags<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-1 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Big Buttons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\"> \t\t\t\t\t<a id=\"typo-65\" class=\"ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-66\" class=\"ja-typo-btn btn-green ja-typo-btn-big btn-big-green\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-67\" class=\"ja-typo-btn btn-red ja-typo-btn-big btn-big-red\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-68\" class=\"ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-69\" class=\"ja-typo-btn btn-black ja-typo-btn-big btn-big-black\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-70\" class=\"ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t<\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Icon Buttons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\t \t\t\t\t\t<a id=\"typo-71\" class=\"ja-typo-btn ja-typo-btn-icn btn-icn-save\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-72\" class=\"ja-typo-btn ja-typo-btn-icn btn-icn-tip\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-73\" class=\"ja-typo-btn ja-typo-btn-icn btn-icn-warning\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-74\" class=\"ja-typo-btn ja-typo-btn-icn btn-icn-info\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-75\" class=\"ja-typo-btn ja-typo-btn-icn btn-icn-ok\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t<\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Small Buttons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\"> \t\t\t\t\t<a id=\"typo-76\" class=\"ja-typo-btn btn-blue ja-typo-btn-sm btn-sm-blue\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-77\" class=\"ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-78\" class=\"ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-79\" class=\"ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-80\" class=\"ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-81\" class=\"ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t<\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-1 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Big Buttons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\"> \t\t\t\t\t<a id=\"typo-82\" class=\"ja-typo-btn btn-rounded-big btn-blue ja-typo-btn-big btn-big-blue\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-83\" class=\"ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-84\" class=\"ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-85\" class=\"ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-86\" class=\"ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-87\" class=\"ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t<\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Icon Buttons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\t \t\t\t\t\t<a id=\"typo-88\" class=\"ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-save\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-89\" class=\"ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-90\" class=\"ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-91\" class=\"ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t\t<a id=\"typo-92\" class=\"ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok\" href=\"#\"><span><span>Button Text<\/span><\/span><\/a> \t\t\t\t<\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Small Buttons<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\"> \t\t\t\t\t<a id=\"typo-93\" class=\"ja-typo-btn btn-rounded-sm btn-blue ja-typo-btn-sm btn-sm-blue\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-94\" class=\"ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-95\" class=\"ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-96\" class=\"ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-97\" class=\"ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t\t<a id=\"typo-98\" class=\"ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey\" href=\"#\"><span>Button Text<\/span><\/a> \t\t\t\t<\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-2 clearfix\">\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Squared Tags<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-99\">This is a sample <span class=\"ja-typo-tag tag-grey\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-100\">This is a sample <span class=\"ja-typo-tag tag-blue\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-101\">This is a sample <span class=\"ja-typo-tag tag-green\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-102\">This is a sample <span class=\"ja-typo-tag tag-red\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-103\">This is a sample <span class=\"ja-typo-tag tag-orange\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-104\">This is a sample <span class=\"ja-typo-tag tag-black\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<h2 class=\"ja-typo-title\"><span>Rounded Tags<\/span><\/h2>\n<div class=\"ja-typo-blockct clearfix\">\n<p id=\"typo-105\">This is a sample <span class=\"ja-typo-tag tag-rounded tag-grey\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-106\">This is a sample <span class=\"ja-typo-tag tag-rounded tag-blue\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-107\">This is a sample <span class=\"ja-typo-tag tag-rounded tag-green\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-108\">This is a sample <span class=\"ja-typo-tag tag-rounded tag-red\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-109\">This is a sample <span class=\"ja-typo-tag tag-rounded tag-orange\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<p id=\"typo-110\">This is a sample <span class=\"ja-typo-tag tag-rounded tag-black\">Inline Tag<\/span>. Use this to provide useful information.<\/p>\n<\/p><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/BUTTONS & TAGS -->  \t<!-- SPECIAL MODULE STYLE --> \t<\/p>\n<div id=\"typo-style-7\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Special Module Style<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-4 clearfix\">\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-111\" class=\"moduletable moduletable_badge badge-top\"> \t\t\t\t\t  <span class=\"badge\">&nbsp;<\/span> \t\t\t\t\t  <\/p>\n<div class=\"ja-box-ct\"> \t\t\t\t\t\tUse module suffix: <strong>_badge badge-top<\/strong> to put this badge on any module you like! \t\t\t\t\t  <\/div><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-112\" class=\"moduletable moduletable_badge badge-new\"> \t\t\t\t\t  <span class=\"badge\">&nbsp;<\/span> \t\t\t\t\t  <\/p>\n<div class=\"ja-box-ct\"> \t\t\t\t\t\tUse module suffix: <strong>_badge badge-new<\/strong> to put this badge on any module you like! \t\t\t\t\t  <\/div><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-113\" class=\"moduletable moduletable_badge badge-pick\"> \t\t\t\t\t  <span class=\"badge\">&nbsp;<\/span> \t\t\t\t\t  <\/p>\n<div class=\"ja-box-ct\"> \t\t\t\t\t\tUse module suffix: <strong>_badge badge-pick<\/strong> to put this badge on any module you like! \t\t\t\t\t  <\/div><\/div><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<div id=\"typo-114\" style=\"margin-right: 0pt;\" class=\"moduletable moduletable_badge badge-hot\"> \t\t\t\t\t  <span class=\"badge\">&nbsp;<\/span> \t\t\t\t\t  <\/p>\n<div class=\"ja-box-ct\"> \t\t\t\t\t\tUse module suffix: <strong>_badge badge-hot<\/strong> to put this badge on any module you like! \t\t\t\t\t  <\/div><\/div><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/SPECIAL MODULE STYLE --> \t \t<!-- FORM -->\t\t \t<\/p>\n<div id=\"typo-style-8\" class=\"ja-typo-blockswrap clearfix\">\n<h1 class=\"ja-typo-title\"><span>Forms<\/span><\/h1>\n<div class=\"ja-typo-blockrow cols-3 clearfix\">\n<h2 class=\"ja-typo-title\"><span>Form Fieldset<\/span><\/h2>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<fieldset id=\"typo-115\"><input type=\"hidden\" name=\"phpMyAdmin\" value=\"308c4fd95694t2d12r29ac\" \/> \t\t\t\t\t\t<\/p>\n<legend>Templates Fieldset<\/legend>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. \t\t\t\t\t<\/fieldset>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<fieldset id=\"typo-116\" class=\"ja-typo-fieldset fieldset-1\"><input type=\"hidden\" name=\"phpMyAdmin\" value=\"308c4fd95694t2d12r29ac\" \/> \t\t\t\t\t\t<\/p>\n<legend>Special Fieldset &#8211; Style 1<\/legend>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. \t\t\t\t\t<\/fieldset>\n<\/p><\/div><\/div>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<fieldset id=\"typo-117\" class=\"ja-typo-fieldset fieldset-2\"><input type=\"hidden\" name=\"phpMyAdmin\" value=\"308c4fd95694t2d12r29ac\" \/> \t\t\t\t\t\t<\/p>\n<legend>Special Fieldset &#8211; Style 2<\/legend>\n<p> \t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. \t\t\t\t\t<\/fieldset>\n<\/p><\/div><\/div><\/div>\n<div class=\"ja-typo-blockrow cols-1 clearfix\">\n<h2 class=\"ja-typo-title\"><span>Form Elements<\/span><\/h2>\n<div class=\"ja-typo-block\">\n<div class=\"ja-typo-blockct clearfix\">\n<form id=\"typo-118\"><input type=\"hidden\" name=\"phpMyAdmin\" value=\"308c4fd95694t2d12r29ac\" \/> \t\t\t\t\t<\/p>\n<p> \t\t\t\t\t\t<label for=\"input\">Sample Input 1<\/label> <br \/> \t\t\t\t\t\t<input type=\"input\" name=\"input\" class=\"inputbox\"> \t\t\t\t\t<\/p>\n<p> \t\t\t\t\t\t<label for=\"input\">Sample Input 2<\/label> <br \/> \t\t\t\t\t\t<input type=\"input\" name=\"input\" class=\"inputbox\"> \t\t\t\t\t<\/p>\n<p> \t\t\t\t\t\t<input type=\"radio\"><label for=\"radio\">Sample Radio Input<\/label> \t\t\t\t\t\t<input type=\"checkbox\"><label for=\"checkbox\">Sample CheckBox Input<\/label> \t\t\t\t\t<\/p>\n<p> \t\t\t\t\t\t<label for=\"select\">Sample Select Field:<\/label><br \/> \t\t\t\t\t\t<select id=\"select\"><option>Option One<\/option><option>Option Two<\/option><\/select> \t\t\t\t\t<\/p>\n<p> \t\t\t\t\t\t<label for=\"textarea\">Sample Textarea Field:<\/label><br \/> \t\t\t\t\t\t<textarea rows=\"5\" cols=\"80\" class=\"inputbox\">Textarea text<\/textarea> \t\t\t\t\t<\/p>\n<p> \t\t\t\t\t\t<button>Submit Button<\/button> <button>Reset Button<\/button> \t\t\t\t\t<\/p>\n<\/p><\/form>\n<\/p><\/div><\/div><\/div><\/div>\n<p> \t<!-- \/\/FORM --> <\/div>\n<p> \t<!-- \/\/JA TYPO -->{jacomment off}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience! Preformatted text Headings This is a sample Heading 1. Lorem ipsum. This is a sample Heading 2. Lorem ipsum. This is a sample Heading 3. Lorem ipsum. This is a sample Heading 4. Lorem ipsum. This is a sample Heading 5. Lorem ipsum. &#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-18361","post","type-post","status-publish","format-standard","hentry","category-unkategorisiert"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Typography - Immobilien in Zypern<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typography - Immobilien in Zypern\" \/>\n<meta property=\"og:description\" content=\"This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience! Preformatted text Headings This is a sample Heading 1. Lorem ipsum. This is a sample Heading 2. Lorem ipsum. This is a sample Heading 3. Lorem ipsum. This is a sample Heading 4. Lorem ipsum. This is a sample Heading 5. Lorem ipsum. ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\" \/>\n<meta property=\"og:site_name\" content=\"Immobilien in Zypern\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/newlifeturkeyinalanya\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-09-17T10:22:27+00:00\" \/>\n<meta name=\"author\" content=\"Administrator\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@NewLifeAlanya\" \/>\n<meta name=\"twitter:site\" content=\"@NewLifeAlanya\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Administrator\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\"},\"author\":{\"name\":\"Administrator\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/person\/32bb5921278f3cdce8d3125f3391fee1\"},\"headline\":\"Typography\",\"datePublished\":\"2010-09-17T10:22:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\"},\"wordCount\":2031,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#organization\"},\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\",\"url\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\",\"name\":\"Typography - Immobilien in Zypern\",\"isPartOf\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#website\"},\"datePublished\":\"2010-09-17T10:22:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.newlifecyprus.com\/de\/startseite\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Typography\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#website\",\"url\":\"https:\/\/www.newlifecyprus.com\/de\/\",\"name\":\"Properties in Cyprus\",\"description\":\"New Life Cyprus\",\"publisher\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.newlifecyprus.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#organization\",\"name\":\"Properties in Cyprus\",\"url\":\"https:\/\/www.newlifecyprus.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.newlifecyprus.com\/wp-content\/uploads\/2022\/05\/logo-205.png\",\"contentUrl\":\"https:\/\/www.newlifecyprus.com\/wp-content\/uploads\/2022\/05\/logo-205.png\",\"width\":205,\"height\":46,\"caption\":\"Properties in Cyprus\"},\"image\":{\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/newlifeturkeyinalanya\/\",\"https:\/\/x.com\/NewLifeAlanya\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/person\/32bb5921278f3cdce8d3125f3391fee1\",\"name\":\"Administrator\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b9ed1e998d559eb8ae6fcdc8e3a08ab0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b9ed1e998d559eb8ae6fcdc8e3a08ab0?s=96&d=mm&r=g\",\"caption\":\"Administrator\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Typography - Immobilien in Zypern","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/","og_locale":"de_DE","og_type":"article","og_title":"Typography - Immobilien in Zypern","og_description":"This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience! Preformatted text Headings This is a sample Heading 1. Lorem ipsum. This is a sample Heading 2. Lorem ipsum. This is a sample Heading 3. Lorem ipsum. This is a sample Heading 4. Lorem ipsum. This is a sample Heading 5. Lorem ipsum. ...","og_url":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/","og_site_name":"Immobilien in Zypern","article_publisher":"https:\/\/www.facebook.com\/newlifeturkeyinalanya\/","article_published_time":"2010-09-17T10:22:27+00:00","author":"Administrator","twitter_card":"summary_large_image","twitter_creator":"@NewLifeAlanya","twitter_site":"@NewLifeAlanya","twitter_misc":{"Verfasst von":"Administrator","Gesch\u00e4tzte Lesezeit":"10 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/#article","isPartOf":{"@id":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/"},"author":{"name":"Administrator","@id":"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/person\/32bb5921278f3cdce8d3125f3391fee1"},"headline":"Typography","datePublished":"2010-09-17T10:22:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/"},"wordCount":2031,"commentCount":0,"publisher":{"@id":"https:\/\/www.newlifecyprus.com\/de\/#organization"},"articleSection":["Unkategorisiert"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/","url":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/","name":"Typography - Immobilien in Zypern","isPartOf":{"@id":"https:\/\/www.newlifecyprus.com\/de\/#website"},"datePublished":"2010-09-17T10:22:27+00:00","breadcrumb":{"@id":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.newlifecyprus.com\/de\/unkategorisiert\/typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.newlifecyprus.com\/de\/startseite\/"},{"@type":"ListItem","position":2,"name":"Typography"}]},{"@type":"WebSite","@id":"https:\/\/www.newlifecyprus.com\/de\/#website","url":"https:\/\/www.newlifecyprus.com\/de\/","name":"Properties in Cyprus","description":"New Life Cyprus","publisher":{"@id":"https:\/\/www.newlifecyprus.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.newlifecyprus.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/www.newlifecyprus.com\/de\/#organization","name":"Properties in Cyprus","url":"https:\/\/www.newlifecyprus.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.newlifecyprus.com\/wp-content\/uploads\/2022\/05\/logo-205.png","contentUrl":"https:\/\/www.newlifecyprus.com\/wp-content\/uploads\/2022\/05\/logo-205.png","width":205,"height":46,"caption":"Properties in Cyprus"},"image":{"@id":"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/newlifeturkeyinalanya\/","https:\/\/x.com\/NewLifeAlanya"]},{"@type":"Person","@id":"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/person\/32bb5921278f3cdce8d3125f3391fee1","name":"Administrator","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.newlifecyprus.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b9ed1e998d559eb8ae6fcdc8e3a08ab0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9ed1e998d559eb8ae6fcdc8e3a08ab0?s=96&d=mm&r=g","caption":"Administrator"}}]}},"_links":{"self":[{"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/posts\/18361"}],"collection":[{"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/comments?post=18361"}],"version-history":[{"count":0,"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/posts\/18361\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/media?parent=18361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/categories?post=18361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newlifecyprus.com\/de\/wp-json\/wp\/v2\/tags?post=18361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}