{"id":19,"date":"2020-06-22T20:10:23","date_gmt":"2020-06-22T20:10:23","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=19"},"modified":"2020-09-30T22:38:36","modified_gmt":"2020-09-30T22:38:36","slug":"typography","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n<h6 class=\"pt-5\">Introduction<\/h6>\n\n\n\n<p>LawDepot uses Open Sans as its font. The font is known for its emphasis on accessibility and readability. The typesetting follows simple guides that allow for easy and predictable design.<\/p>\n\n\n\n<h6 class=\"pt-5\">Alignment<\/h6>\n\n\n\n<p>For text like SEO copy, where the user will be reading a lot of text, LawDepot generally aligns the text left. However, certain layouts demand center alignment of body and headings text. <\/p>\n\n\n\n<table class=\"table d-none\">\n\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<th scope=\"col\">Name<\/th>\n\t\t\t\t\t\t\t\t<th scope=\"col\">Hex<\/th>\n\t\t\t\t\t\t\t\t<th scope=\"col\">RGB<\/th>\n\t\t\t\t\t\t\t\t<th scope=\"col\">Purpose<\/th>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t<\/thead>\n\t\t\t\t\t\t<tbody>\n\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>Charcoal<\/td>\n\t\t\t\t\t\t\t\t<td>#333333<\/td>\n\t\t\t\t\t\t\t\t<td>51, 51, 51<\/td>\n\t\t\t\t\t\t\t\t<td>Body Text<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td style=\"color: #64AD7D;\">Slate Green<\/td>\n\t\t\t\t\t\t\t\t<td>#64AD7D<\/td>\n\t\t\t\t\t\t\t\t<td>100 | 173 | 125<\/td>\n\t\t\t\t\t\t\t\t<td>Links<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t<\/tbody>\n\t\t\t\t\t<\/table>\n\n\n\n<h6 class=\"pt-5\">Body Text<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-0-tab\" href=\"#example-0\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-0\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-0-tab\" href=\"#description-0\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-0\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-0-tab\" href=\"#code-0\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-0\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-0\" role=\"tabpanel\" aria-labelledby=\"example-0-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<p style=\"font-size: 18px; color: #333333;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut convallis dui, ut dictum turpis. Nullam ac erat sem. Aliquam tristique lorem a lorem vestibulum, vel placerat diam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus maximus diam sit amet magna congue, vel luctus est euismod. Suspendisse potenti. Praesent id dolor sem. Nam vitae orci id justo luctus fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut ex in ipsum porta viverra non eu dui. Nulla cursus commodo libero non rhoncus. Praesent pharetra ex purus, hendrerit vulputate ex fringilla ut. Phasellus fringilla fringilla lorem nec varius. Nullam ut blandit libero, et posuere mauris.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-0\" role=\"tabpanel\" aria-labelledby=\"description-0-tab\">\n            <div class=\"col-12\">\n\n\n\n<p><br>The Body Text is used for large bodies of copy like SEO text. Body Text is set at 18px. <\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-0\" role=\"tabpanel\" aria-labelledby=\"code-0-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"font-size: 18px; color: #333333;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut convallis dui, ut dictum turpis. Nullam ac erat sem. Aliquam tristique lorem a lorem vestibulum, vel placerat diam consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus maximus diam sit amet magna congue, vel luctus est euismod. Suspendisse potenti. Praesent id dolor sem. Nam vitae orci id justo luctus fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut ex in ipsum porta viverra non eu dui. Nulla cursus commodo libero non rhoncus. Praesent pharetra ex purus, hendrerit vulputate ex fringilla ut. Phasellus fringilla fringilla lorem nec varius. Nullam ut blandit libero, et posuere mauris.\n&lt;\/p><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Main Heading<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-1-tab\" href=\"#example-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-1\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-1-tab\" href=\"#description-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-1\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-1-tab\" href=\"#code-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-1\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-1\" role=\"tabpanel\" aria-labelledby=\"example-1-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<h1 style=\"font-weight: 700; font-size: 42px;\">Free Legal Documents Forms, and Contracts<\/h1>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-1\" role=\"tabpanel\" aria-labelledby=\"description-1-tab\">\n            <div class=\"col-12\">\n\n\n\n<p><br>Home page content blocks provide quick links to popular products.<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-1\" role=\"tabpanel\" aria-labelledby=\"code-1-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>\n                   \n\t&amp;lt;button class=\"largeActiveButton\"&amp;gt;Cancel Subscription&amp;lt;\/button&amp;gt;\t\t\n\t&amp;lt;button class=\"largeInactiveButton\"&amp;gt;Cancel Subscription&amp;lt;\/button&amp;gt; \t\n\t&amp;lt;button class=\"largeActiveButton\"&amp;gt;Submit&amp;lt;\/button&amp;gt; \t\n\t&amp;lt;button class=\"largeInactiveButton\"&amp;gt;Cancel&amp;lt;\/button&amp;gt; \t\t\n\t<\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6>Sub Heading<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-2-tab\" href=\"#example-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-2\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-2-tab\" href=\"#description-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-2\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-2-tab\" href=\"#code-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-2\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-2\" role=\"tabpanel\" aria-labelledby=\"example-2-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<h2 style=\"font-weight: 600; font-size: 34px;\">Print or download your customized legal<br>document in 5-10 minutes for free<\/h2>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-2\" role=\"tabpanel\" aria-labelledby=\"description-2-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Sub head is a<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-2\" role=\"tabpanel\" aria-labelledby=\"code-2-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>sdfsdfdsfdf<\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Individual Page Titles<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-3-tab\" href=\"#example-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-3\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-3-tab\" href=\"#description-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-3\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-3-tab\" href=\"#code-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-3\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-3\" role=\"tabpanel\" aria-labelledby=\"example-3-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<h2 style=\"font-weight: 400; font-size: 30px;\">Print or download your customized legal<br>document in 5-10 minutes for free<\/h2>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-3\" role=\"tabpanel\" aria-labelledby=\"description-3-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Sub head is a<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-3\" role=\"tabpanel\" aria-labelledby=\"code-3-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2 id=\"ctl00_Content_ctrlQuestions_ctl51_ctl02_title\">\n\t\t\t\t\tCreate your Partnership Agreement\n\t\t\t\t&lt;\/h2><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Category Titles<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-5-tab\" href=\"#example-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-5\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-5-tab\" href=\"#description-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-5\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-5-tab\" href=\"#code-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-5\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-5\" role=\"tabpanel\" aria-labelledby=\"example-5-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<h3 style=\"font-weight: 600; font-size: 24px;\">Estate, Real Estate, Financial, Business, Family, All<\/h3>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-5\" role=\"tabpanel\" aria-labelledby=\"description-5-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Home page content blocks provide quick links to popular products.<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-5\" role=\"tabpanel\" aria-labelledby=\"code-5-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>\n\t&lt;button class=\"largeActiveButton\">Cancel Subscription&lt;\/button>\t\t\n\t&lt;button class=\"largeInactiveButton\">Cancel Subscription&lt;\/button> \t\n\t&lt;button class=\"largeActiveButton\">Submit&lt;\/button> \t\n\t&lt;button class=\"largeInactiveButton\">Cancel&lt;\/button> \t\t\n\t<\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Tab Titles<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-7-tab\" href=\"#example-7\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-7\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-7-tab\" href=\"#description-7\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-7\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-7-tab\" href=\"#code-7\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-7\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-7\" role=\"tabpanel\" aria-labelledby=\"example-7-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<h3 style=\"font-size: 22px; font-weight: 400; color: #333333;\">Which document would you like to choose?<br>(Please select all that apply)<\/h3>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-7\" role=\"tabpanel\" aria-labelledby=\"description-7-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Here is a description.<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-7\" role=\"tabpanel\" aria-labelledby=\"code-7-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h6>Some text &lt;\/h6><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Answers, Selections, Checkboxes, Product Links, Content<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-8-tab\" href=\"#example-8\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-8\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-8-tab\" href=\"#description-8\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-8\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-8-tab\" href=\"#code-8\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-8\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-8\" role=\"tabpanel\" aria-labelledby=\"example-8-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<p><p style=\"font-size: 20px; color: #333333;\">More than 2 million people have used LawDepot to create over 4 million legal documents and save over a billion dollars in legal fees.<\/p><\/p>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-8\" role=\"tabpanel\" aria-labelledby=\"description-8-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Answers, selections, checkboxes etcetera have a 20px font size to ensure readability of important text.<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-8\" role=\"tabpanel\" aria-labelledby=\"code-8-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"font-size: 20px;\">More than 2 million people have used LawDepot to create over 4 million\nlegal documents and save over a billion dollars in legal fees.&lt;\/p><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Validators \/ Indicators, Examples, Animated Titles<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-9-tab\" href=\"#example-9\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-9\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-9-tab\" href=\"#description-9\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-9\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-9-tab\" href=\"#code-9\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-9\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-9\" role=\"tabpanel\" aria-labelledby=\"example-9-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<p style=\"font-style: italic; font-size: 16px;\">Describe the Equipment to be sold. Be as specific as possible including make, model, color, serial number, etc.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-9\" role=\"tabpanel\" aria-labelledby=\"description-9-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Text is shown in italics when &#8230;<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-9\" role=\"tabpanel\" aria-labelledby=\"code-9-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"font-style: italic;\">Here is text. &lt;\/p><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">List Unordered &#8211; One<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-6-tab\" href=\"#example-6\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-6\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-6-tab\" href=\"#description-6\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-6\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-6-tab\" href=\"#code-6\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-6\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-6\" role=\"tabpanel\" aria-labelledby=\"example-6-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<ul class=\"unordered-list\"><li>Here is a list item one.<\/li><li>Here is a list item two that is in second place.<\/li><li>Here is the middle list item number three.<\/li><li>Here is the fourth list item.<\/li><li>Here is the last list item.<\/li><\/ul>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-6\" role=\"tabpanel\" aria-labelledby=\"description-6-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>This list style is found on SEO content. <\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-6\" role=\"tabpanel\" aria-labelledby=\"code-6-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>Here is a list item one.&lt;\/li>\n&lt;li>Here is a list item two that is in second place.&lt;\/li>\n&lt;li>Here is the middle list item number three.&lt;\/li>\n&lt;li>Here is the fourth list item.&lt;\/li>\n&lt;li>Here is the last list item.&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">List Unordered &#8211; Two<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-11-tab\" href=\"#example-11\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-11\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-11-tab\" href=\"#description-11\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-11\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-11-tab\" href=\"#code-11\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-11\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-11\" role=\"tabpanel\" aria-labelledby=\"example-11-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<ul class=\"linkList\"><li>Here is a list item one.<\/li><li>Here is a list item two that is in second place.<\/li><li>Here is the middle list item number three.<\/li><li>Here is the fourth list item.<\/li><li>Here is the last list item.<\/li><\/ul>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-11\" role=\"tabpanel\" aria-labelledby=\"description-11-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>This list style is similar to the first except it has more padding. It&#8217;s found on SEO content. Specifically, under &#8220;Alternate Names&#8221;.<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-11\" role=\"tabpanel\" aria-labelledby=\"code-11-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>Here is a list item one.&lt;\/li>\n&lt;li>Here is a list item two that is in second place.&lt;\/li>\n&lt;li>Here is the middle list item number three.&lt;\/li>\n&lt;li>Here is the fourth list item.&lt;\/li>\n&lt;li>Here is the last list item.&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">List Ordered<\/h6>\n\n\n\n<!-- Tabs -->\n<ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-10-tab\" href=\"#example-10\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-10\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-10-tab\" href=\"#description-10\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-10\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-10-tab\" href=\"#code-10\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-10\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-10\" role=\"tabpanel\" aria-labelledby=\"example-10-tab\">\n            <div class=\"mt-1 mb-5\">\n\n\n\n<ol class=\"linkList\"><li><a href=\"#\">Here is a list item one.<\/a><\/li><li><a href=\"#\">Here is a list item two that is in second place.<\/a><\/li><li><a href=\"#\">Here is the middle list item number three.<\/a><\/li><li><a href=\"#\">Here is the fourth list item.<\/a><\/li><li><a href=\"#\">Here is the last list item.<\/a><\/li><\/ol>\n\n\n\n<\/div>\n        <\/div>\n\n            <!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-10\" role=\"tabpanel\" aria-labelledby=\"description-10-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Here is a description of the lists.<\/p>\n\n\n\n<\/div>\n    <\/div>\n\n    <!-- Tab Code -->\n    <div class=\"tab-pane\" id=\"code-10\" role=\"tabpanel\" aria-labelledby=\"code-10-tab\">\n        <section>\n            <div class=\"col greyvalidator \">\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>Here is a list item one.&lt;\/li>\n&lt;li>Here is a list item two that is in second place.&lt;\/li>\n&lt;li>Here is the middle list item number three.&lt;\/li>\n&lt;li>Here is the fourth list item.&lt;\/li>\n&lt;li>Here is the last list item.&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Line Heights<\/h6>\n\n\n\n<p><strong>Developers:<\/strong> LawDepot uses the browser default for line heights.<br><strong>Designers:<\/strong> See default line-heights in pixels below.<\/p>\n\n\n\n<table class=\"table\">\n\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<th scope=\"col\">Font Size<\/th>\n\t\t\t\t\t\t\t\t<th scope=\"col\">Line Height<\/th>\n\t\t\t\t\t\t\t\t<th scope=\"col\">Example<\/th>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t<\/thead>\n\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>12px<\/td>\n\t\t\t\t\t\t\t\t<td>16px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 12px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>14px<\/td>\n\t\t\t\t\t\t\t\t<td>20px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 14px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>16px<\/td>\n\t\t\t\t\t\t\t\t<td>22px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 16px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>18px<\/td>\n\t\t\t\t\t\t\t\t<td>24px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 18px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>20px<\/td>\n\t\t\t\t\t\t\t\t<td>27px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 20px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>22px<\/td>\n\t\t\t\t\t\t\t\t<td>30px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 22px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>24px<\/td>\n\t\t\t\t\t\t\t\t<td>33px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 24px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>26px<\/td>\n\t\t\t\t\t\t\t\t<td>36px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 26px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>28px<\/td>\n\t\t\t\t\t\t\t\t<td>38px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 28px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>30px<\/td>\n\t\t\t\t\t\t\t\t<td>41px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 30px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>32px<\/td>\n\t\t\t\t\t\t\t\t<td>45px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 32px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>34px<\/td>\n\t\t\t\t\t\t\t\t<td>47px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 34px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>36px<\/td>\n\t\t\t\t\t\t\t\t<td>50px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 36px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>38px<\/td>\n\t\t\t\t\t\t\t\t<td>53px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 38px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>40px<\/td>\n\t\t\t\t\t\t\t\t<td>56px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 40px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>42px<\/td>\n\t\t\t\t\t\t\t\t<td>56px<\/td>\n\t\t\t\t\t\t\t\t<td style=\"font-size: 42px; \">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua.<\/td>\n\t\t\t\t\t\t\t<\/tr>\n\t\t\t\t\t\t<\/tbody>\n\t\t\t\t\t<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Introduction LawDepot uses Open Sans as its font. The font is known for its emphasis on accessibility and readability. The typesetting follows simple guides that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/19"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":81,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":729,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/19\/revisions\/729"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}