Search code examples
vue.jsvuetify.jsuicomponents

Vuetify custom component for user profile

I want to build a custom profile component that looks like the LinkedIn user profile. As you can see there is a Card element, and then the avatar photo overlays it. How can I build such a component? I'm new to Vuejs/Vuetify. I looked for some examples online but couldn't find anything that explains what I need.

User photo overlays the background card

I appreciate your code snippet or suggestion.

Solution

  • From their documentation I just took this example and modified it, however you may need to add different classes for styling since I couldn't make it responsive.

     <template>
      <v-card class="mx-auto" max-width="434" tile>
          <v-img height="100%" src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"></v-img>
          <v-col>
            <v-avatar size="100" style="position:absolute; top: 130px">
              <v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
            </v-avatar>
          </v-col>
            <v-list-item color="rgba(0, 0, 0, .4)">
              <v-list-item-content>
                <v-list-item-title class="title">Marcus Obrien</v-list-item-title>
                <v-list-item-subtitle>Network Engineer</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
      </v-card>
    </template>