Group up existing components into elements

elements/UserCard/UserCard.pixy

@@ -0,0 +1,7 @@
+component UserCard(user *arn.User, note string)
+	a.user-card.mountable(href=user.Link(), data-pro=user.IsPro())
+		.user-card-image-container
+			AvatarNoLink(user)
+		.user-card-info
+			.user-card-info-main= user.Nick
+			.user-card-info-details= note

elements/UserCard/UserCard.scarlet

@@ -0,0 +1,33 @@
+.user-cards
+	horizontal-wrap
+	justify-content center
+
+.user-card
+	card
+
+> 600px
+	.user-card
+		max-width 230px
+
+.user-card-image-container
+	width avatar-size
+	height avatar-size
+
+	img
+		width avatar-size
+		height avatar-size
+		border-radius ui-element-border-radius
+		box-shadow none !important
+
+.user-card-info
+	vertical
+	margin-left card-padding
+	overflow hidden
+
+.user-card-info-main
+	clip-long-text
+
+.user-card-info-details
+	clip-long-text
+	color text-color
+	opacity 0.5