diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index a844144691..87085a2824 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -12,7 +12,7 @@ const BasicUserCard = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     UserAvatar
   },
   methods: {
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index f72620a351..9b80c72b81 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -4,7 +4,7 @@
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
     <div class="basic-user-card-expanded-content" v-if="userExpanded">
-      <UserCardContent :user="user" :rounded="true" :bordered="true"/>
+      <UserCard :user="user" :rounded="true" :bordered="true"/>
     </div>
     <div class="basic-user-card-collapsed-content" v-else>
       <div :title="user.name" class="basic-user-card-user-name">
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 7d9807deb3..fe5b701840 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,6 +1,6 @@
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -13,7 +13,7 @@ const Notification = {
   },
   props: [ 'notification' ],
   components: {
-    Status, UserAvatar, UserCardContent
+    Status, UserAvatar, UserCard
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 6583570e2f..5e9cef97d5 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,7 +5,7 @@
       <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
+      <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index b5c4905934..ad3738d167 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 
 // TODO: separate touch gesture stuff into their own utils if more components want them
@@ -12,7 +12,7 @@ const SideDrawer = {
     closed: true,
     touchCoord: [0, 0]
   }),
-  components: { UserCardContent },
+  components: { UserCard },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index f346b44088..b608b008dc 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,7 +8,7 @@
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <UserCardContent :user="currentUser" :hideBio="true" v-if="currentUser"/>
+        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
         <div class="side-drawer-logo-wrapper" v-else>
           <img :src="logo"/>
           <span>{{sitename}}</span>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fbbca6c49d..9e18fe151c 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -3,7 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
@@ -259,7 +259,7 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    UserCardContent,
+    UserCard,
     UserAvatar,
     Gallery,
     LinkPreview
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0c110c90e3..8fda68f5b0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,7 +31,7 @@
           </router-link>
         </div>
         <div class="status-body">
-          <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card/user_card.js
similarity index 94%
rename from src/components/user_card_content/user_card_content.js
rename to src/components/user_card/user_card.js
index 96c6036ce0..0cb616f46b 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card/user_card.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-content-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-content-r': this.rounded === true,   // set border-radius for all sides
-        'user-card-content-b': this.bordered === true   // set border for all sides
+        'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-r': this.rounded === true,   // set border-radius for all sides
+        'user-card-b': this.bordered === true   // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card/user_card.vue
similarity index 97%
rename from src/components/user_card_content/user_card_content.vue
rename to src/components/user_card/user_card.vue
index e003e85029..b90f57a139 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card/user_card.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="user-card-content" :class="classes" :style="style">
+<div class="user-card" :class="classes" :style="style">
   <div class="panel-heading">
     <div class='user-info'>
       <div class='container'>
@@ -123,18 +123,18 @@
         <span>{{user.followers_count}}</span>
       </div>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
   </div>
 </div>
 </template>
 
-<script src="./user_card_content.js"></script>
+<script src="./user_card.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-card-content {
+.user-card {
   background-size: cover;
   overflow: hidden;
 
diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index 15804b8847..d447829070 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -1,6 +1,6 @@
 import LoginForm from '../login_form/login_form.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 
 const UserPanel = {
   computed: {
@@ -9,7 +9,7 @@ const UserPanel = {
   components: {
     LoginForm,
     PostStatusForm,
-    UserCardContent
+    UserCard
   }
 }
 
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 4b3d8971e1..8310f30e4a 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <UserCardContent :user="user" :hideBio="true" rounded="top"/>
+      <UserCard :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index cdf1cee925..54126514ed 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,6 +1,6 @@
 import { compose } from 'vue-compose'
 import get from 'lodash/get'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
@@ -147,7 +147,7 @@ const UserProfile = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     Timeline,
     FollowerList,
     FriendList
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index c57d3409ea..7d4a8b1f6f 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
+    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
     <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
       <Timeline
         :label="$t('user_card.statuses')"