Stacks

Classes

Class	Applied to	Description
`.s-user-card`	`N/A`	Base user card container that applies the basic style.
`.s-user-card--group`	`N/A`	A container for group elements.
`.s-user-card--group__split`	`Modifier for .s-user-card--group`	Inserts a separator between each element.
`.s-user-card--column`	`N/A`	A container for column elements.
`.s-user-card--row`	`N/A`	A container for row elements.
`.s-user-card--bio`	`N/A`	Container for the user's bio.
`.s-user-card--recognition`	`N/A`	Container for recognition by a collective.
`.s-user-card--rep`	`N/A`	Container for the user's reputation.
`.s-user-card--time`	`N/A`	Container for the user's timestamp.
`.s-user-card--username`	`N/A`	Container for the user's username.

Examples

Section titled Examples

Default

Section titled Default

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 class="s-user-card--group" href="…">
        <!-- Note: Default variant includes avatar size modifier (s-avatar__24) -->
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="…" src="…" />
        </span>
        <span class="s-user-card--username">…</span>
    </a>
    <ul class="s-user-card--group">
        <li class="s-user-card--rep">
            <span class="s-bling s-bling__sm">
                <span class="v-visible-sr">reputation bling</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__gold s-bling__sm">
                <span class="v-visible-sr">gold bling</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__silver s-bling__sm">
                <span class="v-visible-sr">silver bling</span>
            </span>
            …
        </li>
        <li>
            <span class="s-bling s-bling__bronze s-bling__sm">
                <span class="v-visible-sr">bronze bling</span>
            </span>
            …
        </li>
    </ul>
    <a class="s-user-card--time" href="…" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
        <time>…</time>
    </a>
</div>

Size	Class
small	`.s-user-card__sm`	Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies.
default	N/A	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.
large	`.s-user-card__lg`	Use the large variant when space permits and more detailed information is desired

State	Class	Description
Original Poster	`s-user-card--original-poster`	This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads.
New Contributor	`s-user-card--new-contributor`	This label appears on a user's first-ever question or answer to signal that they are new to the platform.
Deleted user	`s-user-card__deleted`	When a user is deleted, we still need to show their name, but we strip the meta data.

Name	Class	Description
Recognized Member	`s-user-card--recognition`	This label appears on within a Collective question post to signal that they are a Recognized Member.
Awarded	`s-user-card--awarded-first s-user-card--awarded-second s-user-card--awarded-third`	This icon appears next to a user when they are within the top 3 positions of a Collective’s leaderboard.

Sections

User cards

Classes

Examples

Default

With badges

Sizes

Small

Large

States

Original Poster

New Contributor

Deleted user

Additional bling

Recognized Member

Awarded