misskey/src/client/app/desktop/views/components/user-card.vue

<template>
<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
	<div class="banner" :style="bannerStyle"></div>
	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
	<mk-follow-button :user="user" class="follow" mini/>
	<div class="body">
		<router-link :to="user | userPage" class="name">
			<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
		</router-link>
		<span class="username">@{{ user | acct }}</span>
		<div class="description">
			<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
		</div>
	</div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	props: ['user'],

	computed: {
		bannerStyle(): any {
			if (this.user.bannerUrl == null) return {};
			return {
				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
				backgroundImage: `url(${ this.user.bannerUrl })`
			};
		}
	},
});
</script>

<style lang="stylus" scoped>
.zvdbznxvfixtmujpsigoccczftvpiwqh
	$bg = var(--face)

	height 280px
	overflow hidden
	font-size 13px
	text-align center
	background $bg
	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
	color var(--faceText)

	> .banner
		height 90px
		background-color #f9f4f4
		background-position center
		background-size cover

	> .avatar
		display block
		margin -40px auto 0 auto
		width 80px
		height 80px
		border-radius 100%
		border solid 4px $bg

	> .follow
		position absolute
		top 16px
		right 16px

	> .body
		padding 0px 24px

		> .name
			font-size 120%
			font-weight bold

		> .username
			display block
			opacity 0.7

		> .description
			margin 8px 0 16px 0

</style>