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--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>
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 8
  • silver bling 12
  • bronze bling 4

With badges

Section titled With 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 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>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm">…</span>
    </div>
    <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>
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 Mod
  • reputation bling 1,775
  • gold bling 8
  • silver bling 12
  • bronze bling 4

Sizes

Section titled Sizes
Size Class Description
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

Small

Section titled Small
<div class="s-user-card s-user-card__sm">
    <a class="s-user-card--group" href="…">
        <!-- Note: Small variant does not include avatar size modifier -->
        <span class="s-avatar">
            <img class="s-avatar--image" alt="…" src="…" />
        </span>
        <span class="s-user-card--username">…</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm">…</span>
    </div>
    <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>
demo avatar SofiaAlc
demo avatar SofiaAlc
  • reputation bling 1,775
  • gold bling 8
  • silver bling 12
  • bronze bling 4
demo avatar SofiaAlc
Mod

Large

Section titled Large
<div class="s-user-card s-user-card__lg">
    <div class="s-user-card--row">
        <a class="s-avatar s-avatar__48" href="#">
            <img class="s-avatar--image" alt="…" src="…" />
        </a>
        <div class="s-user-card--column">
            <div class="s-user-card--row">
                <a class="s-user-card--username" href="#">…</a>
                <div class="s-user-card--group">
                    <span class="s-badge s-badge__staff s-badge__sm">…</span>
                    <span class="s-badge s-badge__moderator s-badge__sm">…</span>
                </div>
            </div>
            <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>
            <div class="s-user-card--column">
                <div class="s-user-card--row s-user-card--recognition">
                    @Svg.Icon.StarVerifiedSm.With("native")
                    <span>…</span>
                </div>
                <ul class="s-user-card--group s-user-card--group__split">
                    <li>…</li>
                    <li>…</li>
                </ul>
                <div class="s-user-card--bio">…</div>
            </div>
        </div>
    </div>
</div>
demo avatar
SofiaAlc
Mod
  • reputation bling 1,775
  • gold bling 8
  • silver bling 12
  • bronze bling 4
Recognized by AudioBubble
  • Senior Product Designer
  • Vancouver, Canada
Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time.
demo avatar
SofiaAlc
  • reputation bling 1
  • Vancouver, Canada
Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time.
demo avatar
SofiaAlc
  • reputation bling 1
  • gold bling 8
  • silver bling 12
  • bronze bling 4

States

Section titled States

Coming soon

Additional bling

Section titled Additional bling

Coming soon

Edit on GitHub File an issue on GitHub
Deploys by Netlify