Sections

User cards

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

Classes

Section titled 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--type N/A An optional container for displaying various user types.
.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

Section titled Examples

Base

Section titled 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

Section titled 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>

    <!-- Optional -->
    <div class="s-user-card--type">
        @Svg.StarVerifiedSm Partner
    </div>
</div>
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
Star Wars Partner
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
Star Wars Partner

Full

Section titled 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>

    <!-- Optional -->
    <div class="s-user-card--type">
        @Svg.StarVerifiedSm Partner
    </div>
</div>
Paul Wright
Staff
Admin
Paris, France
  • 2,500
  • 5
  • 9
  • 1
javascript node.js graphQL
Nick Craver
Mod
Architecture Lead
North Carolina
  • 17k
  • 108
  • 265
  • 812
.net sre
Aaron Shekey
Senior Product Designer
Minneapolis, MN
  • 768
  • 9
  • 1
css javascript html
Aaron Shekey
Minneapolis, MN
  • 768
  • 9
  • 1
Star Wars Partner

Small

Section titled 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>
    <div class="s-user-card--info">
        <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>
  • 2,500
  • 5
  • 9
  • 1

Minimal

Section titled Minimal
<div class="s-user-card s-user-card__minimal">
    <time class="s-user-card--time">…</time>
    <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>
        </ul>
    </div>
</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>
    <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>
        </ul>
    </div>
</div>
Paul Wright
  • 2,500
Paul Wright
  • 2,500

Deleted

Section titled 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">
        <div class="s-user-card--link">
            Paul Wright
        </div>
    </div>
</div>
Paul Wright
Paul Wright
Edit on GitHub