Sections

User cards

Razor

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>
demo avatar
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
demo avatar
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>
demo avatar
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
demo avatar
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
Recognized by Hum
demo avatar
Paul Wright
  • 2,500
  • 5
  • 9
  • 1
Recognized by Hum

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 d-flex g4">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__staff s-badge__xs">…</div>
        </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 class="s-user-card--location">…</div>
        <div class="s-user-card--tags d-flex g4">
            <a href="…" class="flex--item s-tag s-tag__xs">…</a>
            <a href="…" class="flex--item s-tag s-tag__xs">…</a>
            <a href="…" class="flex--item s-tag s-tag__xs">…</a>
        </div>
    </div>

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

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>
demo avatar
  • 2,500
  • 5
  • 9
  • 1

Minimal

Section titled Minimal

Minimal user cards reduce the amount of information down to who asked the question, how much rep they have, and when the action was taken. To read as plainly as possible, e.g. “Paul Wright modified 3 minutes ago,” we change the positioning of the time, and remove any reputation bling, leaving just the aggregated reputation. 

<div class="s-user-card s-user-card__minimal">
    <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>
    <time class="s-user-card--time">…</time>
</div>

<div class="s-user-card s-user-card__minimal">
    <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>
    <time class="s-user-card--time">…</time>
</div>
demo avatar
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">
    <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">
            …
        </div>
    </div>
    <time class="s-user-card--time">…</time>
</div>
demo avatar
Paul Wright
demo avatar
Paul Wright
Edit on GitHub File an issue on GitHub
Deploys by Netlify