diff --git a/src/v2/guide/team.md b/src/v2/guide/team.md
index c8ab8572c8..bdc54a901f 100644
--- a/src/v2/guide/team.md
+++ b/src/v2/guide/team.md
@@ -90,7 +90,7 @@ order: 803
             </ul>
           </dd>
         </template>
-        <footer v-if="profile.github || profile.twitter" class="social">
+        <footer v-if="hasSocialLinks" class="social">
           <a class=github v-if="profile.github" :href="githubUrl(profile.github)">
             <i class="fa fa-github"></i>
             <span class="sr-only">Github</span>
@@ -99,6 +99,10 @@ order: 803
             <i class="fa fa-twitter"></i>
             <span class="sr-only">Twitter</span>
           </a>
+          <a class=codepen v-if="profile.codepen" :href="'https://codepen.io/' + profile.codepen">
+            <i class="fa fa-codepen"></i>
+            <span class="sr-only">CodePen</span>
+          </a>
         </footer>
       </dl>
     </div>
@@ -895,6 +899,9 @@ order: 803
           }).join('</li><li>') +
           '</li></ul>'
         )
+      },
+      hasSocialLinks: function () {
+        return this.profile.github || this.profile.twitter || this.profile.codepen
       }
     },
     methods: {
diff --git a/themes/vue/source/css/_team.styl b/themes/vue/source/css/_team.styl
index 66ddc932d8..86fa934ca8 100644
--- a/themes/vue/source/css/_team.styl
+++ b/themes/vue/source/css/_team.styl
@@ -118,7 +118,7 @@
           line-height: 1
           vertical-align: middle
           margin-right: 4px
-          &.github
+          &.github, &.codepen
             color: #000
           &.twitter
             color: #1da1f3