User cards

User cards are a combination of a user and metadata about the user or post

Classes

Class Applied to Description
.s-user-card N/A Base user card container that applies the basic style.
.s-user-card--time N/A An optional child element that’s used to display time since the user made an action on a post or comment.
.s-user-card--avatar N/A When paired with an s-avatar, this properly positions the user’s profile image within the user card.
.s-user-card--info N/A An optional container for all the meta info that applies an appropriate grid layout.
.s-user-card--link N/A Styles the link to the user’s profile appropriately.
.s-user-card--awards N/A A container for reputation and various awards.
.s-user-card--rep N/A Styles the aggregate number of awards and activity properly.
.s-user-card--tags N/A A container for a user’s most popular tags.
.s-user-card__highlighted .s-user-card Highlights the entire user card by adding a background color, some padding, and rounded corners.
.s-user-card__full .s-user-card Displays a larger avatar, best paired with additional tags meta data.
.s-user-card__small .s-user-card Pairs a small avatar with the reputation and awards.
.s-user-card__minimal .s-user-card Pairs a stripped down version of the reputation with a small avatar, and the time since the activity occurred.
.s-user-card__deleted .s-user-card When a user is deleted, we still need to show their name, but we strip the meta data

Examples

Base

<div class="s-user-card">
<time class="s-user-card--time"></time>
<a href="" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="https://picsum.photos/64" />
</a>
<div class="s-user-card--info">
<a href="" class="s-user-card--link"></a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep"></li>
<li class="s-award-bling s-award-bling__gold"></li>
<li class="s-award-bling s-award-bling__silver"></li>
<li class="s-award-bling s-award-bling__bronze"></li>
</ul>
</div>
</div>
Paul Wright
  • 2,500
  • 5
  • 9
  • 1

Highlighted

Highlights the entire user card by adding a background color, some padding, and rounded corners. Used for post authors and edits.

<div class="s-user-card s-user-card__highlighted">
<time class="s-user-card--time"></time>
<a href="" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="https://picsum.photos/64" />
</a>
<div class="s-user-card--info">
<a href="" class="s-user-card--link"></a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep"></li>
<li class="s-award-bling s-award-bling__gold"></li>
<li class="s-award-bling s-award-bling__silver"></li>
<li class="s-award-bling s-award-bling__bronze"></li>
</ul>
</div>
</div>
Paul Wright
  • 2,500
  • 5
  • 9
  • 1

Full

Displays a larger avatar, best paired with additional tags meta data. Currently used in user directories.

<div class="s-user-card s-user-card__full">
<a href="" class="s-avatar s-avatar__48 s-user-card--avatar">
<img class="s-avatar--image" src="https://picsum.photos/128" />
</a>
<div class="s-user-card--info">
<a href="#" class="s-user-card--link"></a>
<div class="s-user-card--location"></div>
<ul class="s-user-card--awards">
<li class="s-user-card--rep"></li>
<li class="s-award-bling s-award-bling__gold"></li>
<li class="s-award-bling s-award-bling__silver"></li>
<li class="s-award-bling s-award-bling__bronze"></li>
</ul>
<div class="s-user-card--tags">
<a href="" class="s-tag s-tag__sm"></a>
<a href="" class="s-tag s-tag__sm"></a>
<a href="" class="s-tag s-tag__sm"></a>
</div>
</div>
</div>
Paul Wright
New York City, NY
  • 2,500
  • 5
  • 9
  • 1

Small

<div class="s-user-card s-user-card__small">
<a href="" class="s-avatar s-avatar__24 s-user-card--avatar">
<img class="s-avatar--image" src="https://picsum.photos/48" />
</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep"></li>
<li class="s-award-bling s-award-bling__gold"></li>
<li class="s-award-bling s-award-bling__silver"></li>
<li class="s-award-bling s-award-bling__bronze"></li>
</ul>
</div>
  • 2,500
  • 5
  • 9
  • 1

Minimal

<div class="s-user-card s-user-card__minimal">
<time class="s-user-card--time"></time>
<a href="" class="s-user-card--link"></a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep"></li>
</ul>
</div>

<div class="s-user-card s-user-card__minimal mt16">
<time class="s-user-card--time"></time>
<a href="" class="s-avatar s-user-card--avatar">
<img class="s-avatar--image" src="https://picsum.photos/48" />
</a>
<a href="#" class="s-user-card--link"></a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep"></li>
</ul>
</div>
Paul Wright
  • 2,500
Paul Wright
  • 2,500

Deleted

When a user is deleted, we still need to show their name, but we strip the meta data.

<div class="s-user-card s-user-card__deleted">
<time class="s-user-card--time"></time>
<div class="s-avatar s-avatar__32 s-user-card--avatar"></div>
<div class="s-user-card--info"></div>
</div>
Paul Wright