segmentio · jedrzejchalubek · Oct 1, 2019 · Sep 27, 2019 · Sep 30, 2019 · Sep 30, 2019
@@ -0,0 +1,22 @@
+<div  class="media-icon media-icon--{{ include.variant }}">
+  <a class="media-icon__inner" href="{{ include.href }}">
+    <span class="media-icon__icon">
+      {% include_relative assets/icons/{{ include.icon }}.svg %}
+    </span>
+    <h5 class="media-icon__heading">{{ include.title }}</h5>
+    <div class="media-icon__content">
+      {{ include.content }}
+
+      {% if include.variant == 'large' %}
+        <span class="media-icon__excerpt">
+          {{ include.excerpt }}
+        </span>
+      {% endif %}
+    </div>
+    {% if include.variant == 'large' %}
+      <div class="media-icon__anchor">
+        {% include_relative assets/icons/anchor.svg %}
+      </div>
+    {% endif %}
+  </a>
+</div>
@@ -23,10 +23,12 @@
 $color-values: (
   primary: #1dc989,
   primary-dark: #1eb57d,
+  primary-light: #52bd95,
   secondary: #1f477d,
   secondary-dark: #435a6f,
   gray-light: #f7f9fa,
   gray: #a5b0ba,
+  border-gray: #edf0ed,
   code-gray: #435a6f,
   code-green: #52bd95,
   code-blue: #2e98df,

@@ -0,0 +1,152 @@
+.media-icon {
+  $this: &;
+
+  border: 1px solid color(border-gray);
+  background-color: color(white);
+  transition: 0.3s box-shadow;
+  border-radius: 8px;
+
+  &__inner {
+    position: relative;
+    padding: 15px;
+    width: 100%;
+    color: color(secondary-dark);
+    display: grid;
+    column-gap: 15px;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: repeat(2, auto);
+    grid-template-areas: "icon heading" "content content";
+
+    @include breakpoint(large up) {
+      grid-template-columns: auto 1fr auto;
+      grid-template-rows: repeat(2, auto);
+      grid-template-areas: "icon heading anchor" "icon content anchor";
+      padding: 24px;
+      padding-bottom: 32px;
+    }
+  }
+
+  svg > * {
+    transition: 0.3s fill;
+  }
+
+  &:hover {
+    box-shadow: 0 8px 16px 0 rgba(18, 66, 74, 0.08);
+
+    #{$this}__icon {
+      background-color: rgba(color(primary-light), 0.16);
+    }
+
+    svg > * {
+      fill: color(primary);
+    }
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background-color: color(gray-light);
+    transition: 0.3s background;
+    grid-area: icon;
+
+    @include breakpoint(large up) {
+      width: 64px;
+      height: 64px;
+      align-self: baseline;
+    }
+
+    svg {
+      width: 32px;
+      max-height: 32px;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  &__content {
+    font-size: 14px;
+    color: color(secondary-dark);
+    margin-top: 15px;
+    grid-area: content;
+    line-height: 1.57;
+
+    @include breakpoint(large up) {
+      margin-top: 0;
+      grid-area: content;
+    }
+  }
+
+  &__heading {
+    display: flex;
+    align-items: center;
+    grid-area: heading;
+  }
+
+  &__anchor {
+    display: none;
+    align-self: center;
+    grid-area: anchor;
+
+    @include breakpoint(large up) {
+      display: block;
+    }
+
+    svg {
+      height: 16px;
+    }
+  }
+
+  &__excerpt {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.43;
+    color: color(primary);
+    text-decoration: underline;
+
+    @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;
+
+      @include breakpoint(large up) {
+        text-align: left;
+        padding-top: 0;
+      }
+    }
+  }
+}
@@ -38,11 +38,12 @@
 
 // Components
 // =================================================
+@import "components/media-icon";
 @import "components/stage";
 @import "components/logo";
 @import "components/note";
 @import "components/button-link";
 
-// Pages
+// Pages 
 // =================================================
 @import "pages/docs";
@@ -26,6 +26,8 @@ layout: page
     - Subitem
 * Item
 
+{% include components/media-icon.html variant="small" href="#" icon="media/academy" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %}
+{% include components/media-icon.html variant="large" href="#" icon="media/academy" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" excerpt="Read more" %}
 {% include components/button-link.html text="Find out more" href="https://segment.com" %}
 
 {% capture note %}