Skip to main content
Sections

User cards

Svelte

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-badge .s-badge__sm .s-badge__admin Child of .s-user-card--link Wraps and positions the admin user badge
.s-badge .s-badge__sm .s-badge__moderator Child of .s-user-card--link Wraps and positions the staff user badge
.s-badge .s-badge__sm .s-badge__staff Child of .s-user-card--link Wraps and positions the staff user badge
.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__small .s-user-card Pairs a small avatar with the reputation and awards.

Examples

Section titled Examples

Base

Section titled Base

The Base style is the standard variant used to connect a user to their content, appearing most frequently in post-summary lists and on question pages. This view is flexible, allowing various metadata fields to be shown or hidden as needed.

Note on timestamps: Hovering over the timestamp displays a popover with precise dates and a link to the post's /timeline. For authors, this shows the post creation date; for editors, it shows the last modification date. 
<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
        </a>
    </div>
    <ul class="s-user-card--awards">
        <li class="s-user-card--rep">
            <span class="s-bling">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__gold">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__silver">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__bronze">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
    </ul>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>
demo avatar
SofiaAlc
demo avatar
SofiaAlc
  • reputation bling 1,775
demo avatar
SofiaAlc
  • reputation bling 1,775
  • gold bling
  • silver bling
  • bronze bling
demo avatar
SofiaAlc
  • reputation bling 1,775
  • gold bling 12
  • silver bling 8
  • bronze bling 4
demo avatar
SofiaAlc
Mod
  • reputation bling 1,775
  • gold bling 12
  • silver bling 8
  • bronze bling 4

with user badges

Section titled with user badges

Adds the User badge indicator to the usercard. Use this to signify the official role, status, or origin of the account (such as Moderator, Staff, or Bot) directly alongside the user's name.

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__bot s-badge__sm">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__moderator s-badge__sm">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__staff s-badge__sm">…</div>
            <div class="flex--item s-badge s-badge__moderator s-badge__sm">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__moderator s-badge__sm">…</div>
        </a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep">
                <span class="s-bling">
                    <span class="v-visible-sr">…</span>
                </span>
                …
            </li>
            <li>
                <span class="s-bling s-bling__gold">
                    <span class="v-visible-sr">…</span>
                </span>
            </li>
            <li>
                <span class="s-bling s-bling__silver">
                    <span class="v-visible-sr">…</span>
                </span>
            </li>
            <li>
                <span class="s-bling s-bling__bronze">
                    <span class="v-visible-sr">…</span>
                </span>
            </li>
        </ul>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__staff s-badge__sm">…</div>
        </a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep">
                <span class="s-bling">
                    <span class="v-visible-sr">…</span>
                </span>
                …
            </li>
            <li>
                <span class="s-bling s-bling__gold">
                    <span class="v-visible-sr">…</span>
                </span>
                …
            </li>
            <li>
                <span class="s-bling s-bling__silver">
                    <span class="v-visible-sr">…</span>
                </span>
                …
            </li>
            <li>
                <span class="s-bling s-bling__bronze">
                    <span class="v-visible-sr">…</span>
                </span>
                …
            </li>
        </ul>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>
demo avatar
Community
Bot
demo avatar
SofiaAlc
Mod
demo avatar
SofiaAlc
Staff
Mod
demo avatar
SofiaAlc
Mod
  • reputation bling 1,775
  • gold bling
  • silver bling
  • bronze bling
demo avatar
SofiaAlc
Staff
  • reputation bling 1,775
  • gold bling 12
  • silver bling 8
  • bronze bling 4

Sizes

Section titled Sizes

Small

Section titled Small

Use the Small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies.

<div class="s-user-card s-user-card__small">
    <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 d-flex g6">
            <div class="flex--item">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card s-user-card__small">
    <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 d-flex g6">
            <div class="flex--item">…</div>
        </a>
    </div>
    <ul class="s-user-card--awards">
        <li class="s-user-card--rep">
            <span class="s-bling">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__gold">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__silver">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__bronze">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
    </ul>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card s-user-card__small">
    <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 d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__moderator s-badge__sm">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>
demo avatar
SofiaAlc
demo avatar
SofiaAlc
  • reputation bling 1,775
  • gold bling 12
  • silver bling 8
  • bronze bling 4
demo avatar
SofiaAlc
Mod

Default

Section titled Default

Use the Default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors.

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
        </a>
    </div>
    <ul class="s-user-card--awards">
        <li class="s-user-card--rep">
            <span class="s-bling">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__gold">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__silver">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__bronze">
                <span class="v-visible-sr">…</span>
            </span>
            …
        </li>
    </ul>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>

<div class="s-user-card">
    <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">
        <a href="…" class="s-user-card--link d-flex g6">
            <div class="flex--item">…</div>
            <div class="flex--item s-badge s-badge__moderator s-badge__sm">…</div>
        </a>
    </div>
    <time class="s-user-card--time" title="Show activity on this post" data-controller="s-tooltip">…</time>
</div>
demo avatar
SofiaAlc
demo avatar
SofiaAlc
  • reputation bling 1,775
  • gold bling 12
  • silver bling 8
  • bronze bling 4
demo avatar
SofiaAlc
Mod
Edit on GitHub File an issue on GitHub
Deploys by Netlify