User cards

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

Classes

Class	Description	Parent	Modifies
`.s-user-card`	Base user card container that applies the basic style.	N/A	N/A
`.s-user-card--column`	A container for column elements.	`.s-user-card`
`.s-user-card--row`	A container for row elements.	`.s-user-card`
`.s-user-card--group`	A container for group elements.	`.s-user-card`
`.s-user-card--bio`	Container for the user's bio.	N/A	N/A
`.s-user-card--recognition`	Container for recognition by a collective.	N/A	N/A
`.s-user-card--rep`	Container for the user's reputation.	N/A	N/A
`.s-user-card--time`	Container for the user's timestamp.	N/A	N/A
`.s-user-card--username`	Container for the user's username.	N/A	N/A
`.s-user-card--group__split`	Inserts a separator between each element.	N/A	`.s-user-card--group`
`.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.	N/A	`.s-user-card`
`.s-user-card__lg`	Use the large variant when space permits and more detailed information is desired.	N/A	`.s-user-card`
`.s-user-card--username__op`	Identifies the author of the primary post when they appear in secondary contexts, like comment threads.	N/A	`.s-user-card--username`
`.s-user-card__deleted`	When a user is deleted, we still need to show their name, but we strip the metadata.	N/A	`.s-user-card`
`.s-user-card--recognition-additional-bling`	This label appears within a Collective question post to signal that they are a Recognized Member.	N/A	N/A

Examples

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>

Class	Description	Size
`.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.	small
`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.	N/A
`.s-user-card__lg`	Use the large variant when space permits and more detailed information is desired.	large

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

Class	Description	Name
`.s-user-card--recognition-additional-bling`	This label appears within a Collective question post to signal that they are a Recognized Member.	Recognized Member
`N/A`	This icon appears next to a user when they are within the top 3 positions of a Collective's leaderboard.	Awarded

Classes

Examples

Default

With badges

Sizes

Small

Large

States

Original Poster

New Contributor

Deleted user

Additional bling

Recognized Member

Awarded