diff --git a/components.html b/components.html
index 73bcad4..28272f0 100644
--- a/components.html
+++ b/components.html
@@ -287,6 +287,27 @@ base_url: "../"
 
   </article>
 
+  <!-- Typography -->
+  <article class="component" id="typography">
+    <h3 class="component-title">Typography</h3>
+    <p class="component-description">Use headings and paragraphs to title and describe sections of your app.</p>
+
+    <div class="component-example component-example-fullbleed">
+      <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>
+    </div>
+
+{% highlight html %}
+<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>
+
   <!-- Table views -->
   <article class="component" id="table-views">
     <h3 class="component-title">Table views</h3>
@@ -308,10 +329,6 @@ 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>
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 0d57031..3e4e207 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -411,6 +411,11 @@ p {
   border: 1px solid #dddddd;
   border-radius: 6px;
 }
+.card p {
+  margin: inherit;
+  font-size: inherit;
+  color: inherit;
+}
 
 .table-view {
   padding: 0;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 5bf37b5..90ee0ad 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -432,10 +432,6 @@ body {
 #modalsInDevice #iwindow > .btn {
   margin: 10px;
 }
-#modalsInDevice .card p {
-  padding-right: 10px;
-  padding-left: 10px;
-}
 
 .device {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
diff --git a/lib/sass/cards.scss b/lib/sass/cards.scss
index e2639c7..11035bf 100644
--- a/lib/sass/cards.scss
+++ b/lib/sass/cards.scss
@@ -9,4 +9,10 @@
   background-color: $card-bg;
   border: $border-default;
   border-radius: $border-radius;
+
+  p {
+  	margin: inherit;
+  	font-size: inherit;
+  	color: inherit;
+  }
 }
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index d3a8f24..e660bcf 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -462,10 +462,6 @@ body {
   #iwindow > .btn {
     margin: 10px;
   }
-  .card p {
-    padding-right: 10px;
-    padding-left: 10px;
-  }
 }
 
 // Misc