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-badge .s-badge__xs .s-badge__admin Child of .s-user-card--link Wraps and positions the admin user badge
.s-badge .s-badge__xs .s-badge__moderator Child of .s-user-card--link Wraps and positions the staff user badge
.s-badge .s-badge__xs .s-badge__staff Child of .s-user-card--link Wraps and positions the staff user badge
.s-user-card--location N/A Styles the user’s location.
.s-user-card--role N/A Styles the user’s role.
.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="…" />
</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
Paul Wright
Mod
  • 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="…" />
</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="…" />
</a>
<div class="s-user-card--info">
<a href="#" class="s-user-card--link grid gs4">
<div class="grid--cell"></div>
<div class="grid--cell s-badge s-badge__staff s-badge__xs"></div>
</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 grid gs4">
<a href="…" class="grid--cell s-tag s-tag__xs"></a>
<a href="…" class="grid--cell s-tag s-tag__xs"></a>
<a href="…" class="grid--cell s-tag s-tag__xs"></a>
</div>
</div>
</div>
Nick Craver
Mod
Architecture Lead
North Carolina
  • 17k
  • 108
  • 265
  • 812
Aaron Shekey
Senior Product Designer
Minneapolis, MN
  • 768
  • 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="…" />
</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">
<time class="s-user-card--time"></time>
<a href="…" class="s-avatar s-user-card--avatar">
<img class="s-avatar--image" src="…" />
</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">
<img class="s-avatar--image" src="…" />
</div>
<div class="s-user-card--info"></div>
</div>

<div class="s-user-card s-user-card__deleted s-user-card__minimal">
<time class="s-user-card--time">3 years ago</time>
<div class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="…" />
</div>
<div class="s-user-card--info">Paul Wright</div>
</div>
Paul Wright
Paul Wright