segmentio · jedrzejchalubek · Oct 11, 2019 · Oct 11, 2019 · Oct 11, 2019 · Oct 11, 2019
diff --git a/src/_includes/components/media-icon.html b/src/_includes/components/media-icon.html
@@ -1,22 +1,27 @@
-<div  class="media-icon media-icon--{{ include.variant }}">
+<div class="media-icon">
   <a class="media-icon__inner" href="{{ site.baseurl }}{{ include.href }}">
     <span class="media-icon__icon">
-      {% include icons/media/{{ include.icon }} %}
+      {% include icons/{{ include.icon }} %}
     </span>
+
     <h5 class="media-icon__heading">{{ include.title }}</h5>
+
     <div class="media-icon__content">
-      {{ include.content }}
+      <span>{{ include.content }}</span>
+
+      {% if include.variant == 'related' %}
+        <span class="media-icon__related button-link">Read more</span>
+      {% else %}
+        <div class="media-icon__excerpt button-link flex flex--end flex--middle gutter">
+          <span>Go to the page</span>
 
-      {% if include.variant == 'large' %}
-        <span class="media-icon__excerpt">
-          {{ include.excerpt }}
-        </span>
+          {% include icons/anchor.svg %}
+        </div>
       {% endif %}
     </div>
-    {% if include.variant == 'large' %}
-      <div class="media-icon__anchor">
-        {% include icons/anchor.svg %}
-      </div>
-    {% endif %}
+
+    <div class="media-icon__anchor">
+      {% include icons/anchor.svg %}
+    </div>
   </a>
 </div>
diff --git a/src/_includes/components/related.html b/src/_includes/components/related.html
@@ -0,0 +1,5 @@
+{% for related_url in page.related %}
+  {% assign subpage = site.pages | where: 'url', related_url | first %}
+
+  {% include components/media-icon.html variant="related" href=subpage.url icon=subpage.icon title=subpage.title content=subpage.excerpt %}
+{% endfor %}
diff --git a/src/_includes/icons/anchor.svg b/src/_includes/icons/anchor.svg
diff --git a/src/_includes/icons/symbols/connections.svg b/src/_includes/icons/symbols/connections.svg
diff --git a/src/_includes/menu/menu-item.html b/src/_includes/menu/menu-item.html
@@ -43,7 +43,7 @@
 
               <div class="menu-item__chevron flex__column flex__column--shrink">
                 {% include icons/symbols/chevron-down.svg %}
-              </span>
+              </div>
             </button>
 
             <ul class="menu-item__body menu-item__body--nested" data-ref="accordion[body]">

diff --git a/src/_layouts/page.html b/src/_layouts/page.html
@@ -19,5 +19,11 @@ <h1 id="{{ page.title | downcase }}" class="page__heading">
     <div class="markdown" data-headings-anchors>
       {{ content }}
     </div>
+
+    <hr>
+
+    {% include components/feedback.html %}
+
+    {% include components/callout.html %}
   </div>
 </article>
diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss
@@ -1,17 +1,15 @@
 .media-icon {
   $this: &;
 
-  height: 100%;
   border: 1px solid color(border-gray);
   background-color: color(white);
   transition: 0.3s box-shadow;
   border-radius: 8px;
 
   &__inner {
     position: relative;
-    padding: 10px;
+    padding: 15px;
     width: 100%;
-    height: 100%;
     color: color(secondary-dark);
     display: grid;
     column-gap: 15px;
@@ -28,7 +26,8 @@
     }
   }
 
-  svg > * {
+  svg {
+    color: color(secondary);
     transition: 0.3s fill;
   }
 
@@ -39,7 +38,7 @@
       background-color: rgba(color(primary-light), 0.16);
     }
 
-    svg > * {
+    svg {
       fill: color(primary);
     }
   }
@@ -72,16 +71,19 @@
   }
 
   &__content {
-    font-size: 12px;
+    font-size: 14px;
     color: color(secondary-dark);
     margin-top: 15px;
     grid-area: content;
     line-height: 1.57;
 
+    & > * + * {
+      margin-top: 10px;
+    }
+
     @include breakpoint(large up) {
       margin-top: 0;
       grid-area: content;
-      font-size: 14px;
     }
   }
 
@@ -107,49 +109,25 @@
 
   &__excerpt {
     font-size: 14px;
-    font-weight: 500;
     line-height: 1.43;
     color: color(primary);
-    text-decoration: underline;
+    text-align: right;
+
+    svg {
+      height: 16px;
+      color: color(primary);
+    }
 
     @include breakpoint(large up) {
       display: none;
     }
   }
 
-  &--small {
-    #{$this}__inner {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      @include breakpoint(large up) {
-        display: grid;
-        grid-template-columns: auto 1fr auto;
-        grid-template-rows: repeat(3, auto);
-        grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile";
-      }
-    }
-
-    #{$this}__content {
-      text-align: center;
-      line-height: 1.57;
-      margin-top: 10px;
-
-      @include breakpoint(large up) {
-        text-align: left;
-        margin-top: 0;
-      }
-    }
-
-    #{$this}__heading {
-      line-height: 1.33;
-      padding-top: 15px;
+  &__related {
+    color: color(primary);
 
-      @include breakpoint(large up) {
-        text-align: left;
-        padding-top: 0;
-      }
+    @include breakpoint(large up) {
+      display: none;
     }
   }
 }
diff --git a/src/_sass/elements/_code.scss b/src/_sass/elements/_code.scss
@@ -1,3 +1,7 @@
+code {
+  font-size: 14px;
+}
+
 :not(pre) > code {
   background-color: color(code-background);
   border-radius: 4px;

diff --git a/src/connections/sources/catalog/index.md b/src/connections/sources/catalog/index.md
@@ -2,6 +2,8 @@
 title: Sources catalog
 hide_toc: true
 landing: true
+icon: symbols/connections.svg
+excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
 ---
 
 <div class="l-chiclet-collection">

diff --git a/src/connections/sources/faq/index.md b/src/connections/sources/faq/index.md
@@ -1,3 +1,5 @@
 ---
 title: Sources FAQ
+icon: media/icon-academy.svg
+excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
 ---
diff --git a/src/connections/sources/guides/index.md b/src/connections/sources/guides/index.md
@@ -1,6 +1,8 @@
 ---
 title: Platforms
 hidden: true
+icon: media/icon-guides.svg
+excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
 ---
 
 
@@ -23,7 +25,7 @@ We currently offer free plugins for the following platforms:
 
 ## Guides
 
-> **NOTE**: Official Segment support for the following guides are deprecated. These guides may be out of date and thus we recommend using third party guides to integrate with these tools. 
+> **NOTE**: Official Segment support for the following guides are deprecated. These guides may be out of date and thus we recommend using third party guides to integrate with these tools.
 
 In addition to native plugins we have written detailed guides for other popular platforms to get you up and running without needing any technical documentation: