diff --git a/dist/index.html b/dist/index.html
index 4515b61..d40075a 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -3,8 +3,8 @@
   <head>
     <title>Flexbox Patterns Demo Page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="styles.css" rel="stylesheet" type="text/css">
     <style>
       body {
@@ -73,6 +73,25 @@
   </div>
 </div>
 
+    </div>
+    <!-- Post-->
+    <div class="demo"><div class="post">
+  <div class="postUser">
+    <div class="postUser__portrait">
+      <span class="icon fa fa-user-circle-o"></span>
+    </div>
+    <div class="postUser__name">Sherlyn S.</div>
+  </div>
+  <div class="postBody">
+    <div class="postBody__content">
+      I built a tree house out of reclaimed cedar and gave it a coat of my home-made
+      organic coffee-based varnish. Tree housewarming party this weekend!
+    </div>
+    <div class="postBody__date">
+      December 4, 2023
+    </div>
+  </div>
+</div>
     </div>
     <!-- Side bar-->
     <div class="demo"><div class="sideBar">
@@ -127,6 +146,80 @@
   <div class="featureListItem__description">You can get notified by email or SMS.</div>
 </div>
 
+    </div>
+    <!-- Stream-->
+    <div class="demo"><div class="stream">
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">CJ C.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        Going hiking with @karla in Yosemite!
+      </div>
+      <div class="postBody__date">
+        May 27, 2027
+      </div>
+    </div>
+  </div>
+
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">Jatesh V.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my
+        life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com!
+        Love flexboxpatterns.com!
+      </div>
+      <div class="postBody__date">
+        May 28, 2027
+      </div>
+    </div>
+  </div>
+
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">Damien S.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover
+        #replicant
+      </div>
+      <div class="postBody__date">
+        June 1, 2027
+      </div>
+    </div>
+  </div>
+
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">Ziggie G.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        I love eating pizza!!!!!!!
+      </div>
+      <div class="postBody__date">
+        June 5, 2027
+      </div>
+    </div>
+  </div>
+</div>
     </div>
     <!-- Card-->
     <div class="demo"><div class="card card--fixedWidth">
diff --git a/dist/styles.css b/dist/styles.css
index 1b7a716..b5e07b5 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -212,6 +212,169 @@
   border: 1px solid #FFFFFF;
 }
 
+/*=====================================================
+  contents of: styles/post.css
+  =====================================================*/
+.post {
+  /**
+   * Lay out the children of this container with
+   * flexbox, which is horizontal by default.
+   */
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.postUser {
+  /**
+   * The flex property is a short-hand for setting
+   * the flex-grow, flex-shrink, and flex-basis
+   * properties. These properties control how the
+   * element resizes to fill its container.
+   *
+   * The value we're using here is actually the
+   * default, but I'm including so I can explain it
+   * a bit. The default value equates to:
+   *
+   * - flex-grow: 0
+   * - flex-shrink: 1
+   * - flex-basis: auto
+   *
+   * We set flex-grow to 0, so this element won't
+   * expand to fill its container.
+   *
+   * We'll then set flex-shrink to 1 so that the
+   * element will shrink as its container gets
+   * smaller. However, it will only shrink so far
+   * because...
+   *
+   * ...we set flex-basis to auto. This causes
+   * the content's size to also be a factor in the
+   * calculation of the element's size. Because
+   * the width of a child element is set (below),
+   * this element won't shrink below that size.
+   *
+   * The net result is that this element stays a
+   * fixed size, neither expanding nor shrinking.
+   */
+  -ms-flex: 0 1 auto;
+      flex: 0 1 auto;
+}
+
+  .postUser__portrait {
+    /**
+     * We're using these three flexbox properties
+     * here to center the portrait icon inside of
+     * this element.
+     *
+     * We'll explore these properties in more detail
+     * in the "Stay Centered" section, so I'll only
+     * briefly summarize here:
+     *
+     * - display: flex instructs the browser to
+     *   use flexbox to lay out this element's
+     *   children.
+     * - justify-content: center will center the
+     *   icon along the main axis.
+     * - align-items: center will center the icon
+     *   along the secondary (perpendicular) axis.
+     */
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: center;
+        justify-content: center;
+    -ms-flex-align: center;
+        align-items: center;
+
+    width: 100px;
+    height: 90px;
+    font-size: 70px;
+    line-height: 0;
+  }
+
+  .postUser__name {
+    color: #57727C;
+    font-size: 12px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+.postBody {
+  /**
+   * We'll use the short-hand flex property again
+   * here, to make the body of the post expand to
+   * fill the container, and shrink as the container
+   * becomes narrower.
+   *
+   * By setting flex-grow to 1, we cause this
+   * element to expand to fill the container.
+   *
+   * Setting flex-shrink to 1 causes this element
+   * to shrink with the container.
+   *
+   * Last, we set flex-basis to 0 so that its
+   * size is solely determined by the size of
+   * the container. (The default value is auto,
+   * which would cause the content's size to also
+   * be a factor in this calculation.)
+   *
+   * The net result of these properties is that the
+   * element is a fluid size, and will expand and
+   * shrink with its container.
+   *
+   * NOTE: IE11 ignores flex short-hand declarations
+   * with unitless flex-basis values. So we have to
+   * use 0% instead of 0 as a workaround. You can
+   * find more info at:
+   * github.com/philipwalton/flexbugs.
+   */
+  -ms-flex: 1 1 0%;
+      flex: 1 1 0%;
+
+  position: relative;
+  padding: 15px;
+  border: 1px solid #CAD0D2;
+  border-radius: 4px;
+}
+
+.postBody:after,
+.postBody:before {
+  right: 100%;
+  top: 35px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.postBody:after {
+  border-color: transparent;
+  border-right-color: #ffffff;
+  border-width: 8px;
+  margin-top: -8px;
+}
+
+.postBody:before {
+  border-color: transparent;
+  border-right-color: #CAD0D2;
+  border-width: 9px;
+  margin-top: -9px;
+}
+
+  .postBody__content {
+    color: #57727C;
+    font-size: 12px;
+  }
+
+  .postBody__date {
+    margin-top: 5px;
+    color: #86969C;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
 /*=====================================================
   contents of: styles/side-bar.css
   =====================================================*/
@@ -419,10 +582,34 @@
   }
 
   .featureListItem__description {
-    color: #86969C;
+    color: #57727C;
     font-size: 12px;
   }
 
+/*=====================================================
+  contents of: styles/stream.css
+  =====================================================*/
+.stream {
+  /**
+   * Lay out the children of this container with
+   * flexbox.
+   */
+  display: -ms-flexbox;
+  display: flex;
+
+  /*
+   * Set the main axis to be vertical, but present
+   * the children in reverse order of that in which
+   * they occur in the DOM.
+   */
+  -ms-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+}
+
+.post + .post {
+  margin-bottom: 5px;
+}
+
 /*=====================================================
   contents of: styles/card.css
   =====================================================*/
@@ -530,7 +717,7 @@
   .cardGroup__card {
     /**
      * The flex property is a short-hand for setting
-     * the flex-shrink, flex-grow, and flex-basis
+     * the flex-grow, flex-shrink, and flex-basis
      * properties. These properties control how the
      * element resizes to fill its container.
      *
diff --git a/package.json b/package.json
index a5ba5dd..4f1c37f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flexbox-patterns",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Patterns for using flexbox CSS to build awesome UI components",
   "repository": "cjcenizal/flexbox-patterns",
   "author": {
diff --git a/src/examples/post.html b/src/examples/post.html
new file mode 100644
index 0000000..0778ec6
--- /dev/null
+++ b/src/examples/post.html
@@ -0,0 +1,17 @@
+<div class="post">
+  <div class="postUser">
+    <div class="postUser__portrait">
+      <span class="icon fa fa-user-circle-o"></span>
+    </div>
+    <div class="postUser__name">Sherlyn S.</div>
+  </div>
+  <div class="postBody">
+    <div class="postBody__content">
+      I built a tree house out of reclaimed cedar and gave it a coat of my home-made
+      organic coffee-based varnish. Tree housewarming party this weekend!
+    </div>
+    <div class="postBody__date">
+      December 4
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/examples/stream.html b/src/examples/stream.html
new file mode 100644
index 0000000..90b9fb5
--- /dev/null
+++ b/src/examples/stream.html
@@ -0,0 +1,72 @@
+<div class="stream">
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">CJ C.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        Going hiking with @karla in Yosemite!
+      </div>
+      <div class="postBody__date">
+        May 27
+      </div>
+    </div>
+  </div>
+
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">Jatesh V.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my
+        life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com!
+        Love flexboxpatterns.com!
+      </div>
+      <div class="postBody__date">
+        May 28
+      </div>
+    </div>
+  </div>
+
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">Damien S.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover
+        #replicant
+      </div>
+      <div class="postBody__date">
+        June 1
+      </div>
+    </div>
+  </div>
+
+  <div class="post">
+    <div class="postUser">
+      <div class="postUser__portrait">
+        <span class="icon fa fa-user-circle-o"></span>
+      </div>
+      <div class="postUser__name">Ziggie G.</div>
+    </div>
+    <div class="postBody">
+      <div class="postBody__content">
+        I love eating pizza!!!!!!!
+      </div>
+      <div class="postBody__date">
+        June 5
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index b4d26bc..d78ee69 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,10 +6,12 @@
 @import url("./styles/tabs.css");
 @import url("./styles/site-header.css");
 @import url("./styles/form-footer.css");
+@import url("./styles/post.css");
 @import url("./styles/side-bar.css");
 @import url("./styles/centered-prompt.css");
 @import url("./styles/centered-icon.css");
 @import url("./styles/feature-list.css");
+@import url("./styles/stream.css");
 @import url("./styles/card.css");
 @import url("./styles/card-group.css");
 @import url("./styles/photo.css");
diff --git a/src/index.jade b/src/index.jade
index 3fb1061..a8c60bd 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -11,7 +11,7 @@ html(lang='en')
 
     //- Fonts
     link(
-      href="http://fonts.googleapis.com/css?family=Lato:400"
+      href="http://fonts.googleapis.com/css?family=Lato:400,700"
       rel="stylesheet"
       type="text/css"
     )
@@ -19,7 +19,7 @@ html(lang='en')
     //- Font aweosome icons
     link(
       rel="stylesheet"
-      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
+      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     )
 
     //- CSS
@@ -60,6 +60,10 @@ html(lang='en')
     .demo
       include ./examples/form-footer.html
 
+    // Post
+    .demo
+      include ./examples/post.html
+
     // Side bar
     .demo
       include ./examples/side-bar.html
@@ -76,6 +80,10 @@ html(lang='en')
     .demo
       include ./examples/feature-list.html
 
+    // Stream
+    .demo
+      include ./examples/stream.html
+
     // Card
     .demo
       include ./examples/card.html
diff --git a/src/styles/card-group.css b/src/styles/card-group.css
index fc57261..53c2a90 100644
--- a/src/styles/card-group.css
+++ b/src/styles/card-group.css
@@ -13,7 +13,7 @@
   .cardGroup__card {
     /**
      * The flex property is a short-hand for setting
-     * the flex-shrink, flex-grow, and flex-basis
+     * the flex-grow, flex-shrink, and flex-basis
      * properties. These properties control how the
      * element resizes to fill its container.
      *
diff --git a/src/styles/feature-list.css b/src/styles/feature-list.css
index fc8cec7..91d2864 100644
--- a/src/styles/feature-list.css
+++ b/src/styles/feature-list.css
@@ -40,6 +40,6 @@
   }
 
   .featureListItem__description {
-    color: #86969C;
+    color: #57727C;
     font-size: 12px;
   }
diff --git a/src/styles/post.css b/src/styles/post.css
new file mode 100644
index 0000000..c8f1e4a
--- /dev/null
+++ b/src/styles/post.css
@@ -0,0 +1,156 @@
+.post {
+  /**
+   * Lay out the children of this container with
+   * flexbox, which is horizontal by default.
+   */
+  display: flex;
+}
+
+.postUser {
+  /**
+   * The flex property is a short-hand for setting
+   * the flex-grow, flex-shrink, and flex-basis
+   * properties. These properties control how the
+   * element resizes to fill its container.
+   *
+   * The value we're using here is actually the
+   * default, but I'm including so I can explain it
+   * a bit. The default value equates to:
+   *
+   * - flex-grow: 0
+   * - flex-shrink: 1
+   * - flex-basis: auto
+   *
+   * We set flex-grow to 0, so this element won't
+   * expand to fill its container.
+   *
+   * We'll then set flex-shrink to 1 so that the
+   * element will shrink as its container gets
+   * smaller. However, it will only shrink so far
+   * because...
+   *
+   * ...we set flex-basis to auto. This causes
+   * the content's size to also be a factor in the
+   * calculation of the element's size. Because
+   * the width of a child element is set (below),
+   * this element won't shrink below that size.
+   *
+   * The net result is that this element stays a
+   * fixed size, neither expanding nor shrinking.
+   */
+  flex: 0 1 auto;
+
+  padding-bottom: 10px;
+}
+
+  .postUser__portrait {
+    /**
+     * We're using these three flexbox properties
+     * here to center the portrait icon inside of
+     * this element.
+     *
+     * We'll explore these properties in more detail
+     * in the "Stay Centered" section, so I'll only
+     * briefly summarize here:
+     *
+     * - display: flex instructs the browser to
+     *   use flexbox to lay out this element's
+     *   children.
+     * - justify-content: center will center the
+     *   icon along the main axis.
+     * - align-items: center will center the icon
+     *   along the secondary (perpendicular) axis.
+     */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100px;
+    height: 90px;
+    font-size: 70px;
+    line-height: 0;
+  }
+
+  .postUser__name {
+    color: #57727C;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+  }
+
+.postBody {
+  /**
+   * We'll use the short-hand flex property again
+   * here, to make the body of the post expand to
+   * fill the container, and shrink as the container
+   * becomes narrower.
+   *
+   * By setting flex-grow to 1, we cause this
+   * element to expand to fill the container.
+   *
+   * Setting flex-shrink to 1 causes this element
+   * to shrink with the container.
+   *
+   * Last, we set flex-basis to 0 so that its
+   * size is solely determined by the size of
+   * the container. (The default value is auto,
+   * which would cause the content's size to also
+   * be a factor in this calculation.)
+   *
+   * The net result of these properties is that the
+   * element is a fluid size, and will expand and
+   * shrink with its container.
+   *
+   * NOTE: IE11 ignores flex short-hand declarations
+   * with unitless flex-basis values. So we have to
+   * use 0% instead of 0 as a workaround. You can
+   * find more info at:
+   * github.com/philipwalton/flexbugs.
+   */
+  flex: 1 1 0%;
+
+  position: relative;
+  padding: 15px;
+  border: 1px solid #CAD0D2;
+  border-radius: 4px;
+}
+
+.postBody:after,
+.postBody:before {
+  right: 100%;
+  top: 35px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.postBody:after {
+  border-color: transparent;
+  border-right-color: #ffffff;
+  border-width: 8px;
+  margin-top: -8px;
+}
+
+.postBody:before {
+  border-color: transparent;
+  border-right-color: #CAD0D2;
+  border-width: 9px;
+  margin-top: -9px;
+}
+
+  .postBody__content {
+    color: #57727C;
+    font-size: 12px;
+  }
+
+  .postBody__date {
+    margin-top: 5px;
+    color: #86969C;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
diff --git a/src/styles/stream.css b/src/styles/stream.css
new file mode 100644
index 0000000..92f5f7d
--- /dev/null
+++ b/src/styles/stream.css
@@ -0,0 +1,18 @@
+.stream {
+  /**
+   * Lay out the children of this container with
+   * flexbox.
+   */
+  display: flex;
+
+  /*
+   * Set the main axis to be vertical, but present
+   * the children in reverse order of that in which
+   * they occur in the DOM.
+   */
+  flex-direction: column-reverse;
+}
+
+.post + .post {
+  margin-bottom: 5px;
+}
