adding better support for headings and paragraphs

components.html

@@ -308,6 +308,10 @@ base_url: "../"
   <li class="table-view-divider">Divider</li>
   <li class="table-view-cell">Item 3</li>
 </ul>
+<h1>Heading</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco.</p>
 {% endhighlight %}
 
   </article>
@@ -660,9 +664,9 @@ base_url: "../"
         </li>
       </ul>
       <div class="card">
-        <p id="item1mobile" class="segmented-control-item active">Item 1</p>
-        <p id="item2mobile" class="segmented-control-item">Item 2</p>
-        <p id="item3mobile" class="segmented-control-item">Item 3</p>
+        <span id="item1mobile" class="segmented-control-item active">Item 1</span>
+        <span id="item2mobile" class="segmented-control-item">Item 2</span>
+        <span id="item3mobile" class="segmented-control-item">Item 3</span>
       </div>
     </div>
 
@@ -679,9 +683,9 @@ base_url: "../"
   </li>
 </ul>
 <div class="card">
-  <p id="item1mobile" class="segmented-control-item active">Item 1</p>
-  <p id="item2mobile" class="segmented-control-item">Item 2</p>
-  <p id="item3mobile" class="segmented-control-item">Item 3</p>
+  <span id="item1mobile" class="segmented-control-item active">Item 1</span>
+  <span id="item2mobile" class="segmented-control-item">Item 2</span>
+  <span id="item3mobile" class="segmented-control-item">Item 3</span>
 </div>
 </div>
 {% endhighlight %}

dist/ratchet.css

@@ -257,6 +257,17 @@ strong {
   font-weight: 500;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 15px;
+  font-size: 14px;
+}
+
+p {
+  margin: 10px 15px;
+  font-size: 14px;
+  color: #777;
+}
+
 .content {
   position: fixed;
   top: 0;

docs-assets/css/docs.css

@@ -396,9 +396,8 @@ body {
   margin-right: 10px;
   margin-left: 10px;
 }
-#segmentedControllersInDevice .card p {
-  padding-right: 10px;
-  padding-left: 10px;
+#segmentedControllersInDevice .card span {
+  padding: 10px;
 }
 
 #badgesInDevice {

lib/sass/base.scss

@@ -22,12 +22,23 @@ body {
 a {
   color: $primary-color;
   text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links 
 }
 strong {
   font-weight: $font-weight;
 }
 
+// Typography
+h1,h2,h3,h4,h5,h6 {
+  margin: 10px 15px;
+  font-size: 14px;
+}
+p {
+  margin: 10px 15px;
+  font-size: 14px;
+  color: #777;
+}
+
 // Wrapper to be used around all content not in .bar-title and .bar-tab
 .content {
   position: fixed;

lib/sass/docs.scss

@@ -415,9 +415,8 @@ body {
     margin-right: 10px;
     margin-left: 10px;
   }
-  .card p {
-    padding-right: 10px;
-    padding-left: 10px;
+  .card span {
+    padding: 10px;
   }
 }