Stacks

https://github.com/stackexchange/stacks
Admin
Stacks is Stack Overflow’s design system, providing resources to create consistent, predictable...
Tokens:215,359
Snippets:1,548
Trust Score:9.3
License:MIT
Update:4 weeks ago
Show doc for...
Tokens:
Raw
### Install and run local sandbox

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-email/README.md

Install dependencies and start the development server for the @stackoverflow/stacks-email package.

```bash
npm install
npm run dev -w @stackoverflow/stacks-email
```

--------------------------------

### Run development server

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/README.md

Starts the development server for the Stacks documentation site. Requires dependencies installed via npm, pnpm, or yarn.

```sh
npm run dev -w packages/stacks-docs
```

--------------------------------

### Order classes and examples

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/base/flex.md

The first block shows how the order utilities are applied in HTML. The second block is the live example markup, which demonstrates .order-first moving item 3 to the start and .order-last moving item 1 to the end.

```html
<div class="d-flex">
    <div class="flex--item">…</div>
    <div class="flex--item">…</div>
    <div class="flex--item order-first">…</div>
</div>
<div class="d-flex">
    <div class="flex--item order-last">…</div>
    <div class="flex--item">…</div>
    <div class="flex--item">…</div>
</div>
```

```html
<Example>
    <div class="d-flex gy32 fd-column">
        <div>
            <div class="mb8 ff-mono">.order-first</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
                <div class="stacks-flex-example--item">.flex--item 1</div>
                <div class="stacks-flex-example--item">.flex--item 2</div>
                <div class="stacks-flex-example--item bg-black-225 bc-black-250 order-first">.flex--item 3</div>
            </div>
        </div>
        <div>
            <div class="mb8 ff-mono">.order-last</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4">
                <div class="stacks-flex-example--item bg-black-225 bc-black-250 order-last">.flex--item 1</div>
                <div class="stacks-flex-example--item">.flex--item 2</div>
                <div class="stacks-flex-example--item">.flex--item 3</div>
            </div>
        </div>
    </div>
</Example>
```

--------------------------------

### Markup for Rendering Helper Examples

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/base/flex.md

Live example markup showing each helper class with corresponding example items. Includes labels for `.flex__center`, `.flex__fl-shrink0`, and `.flex__fl-equal`.

```html
<Example>
    <div class="d-flex gy32 fd-column">
        <div>
            <div class="mb8 ff-mono">.flex__center</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex flex__center hs1">
                <div class="stacks-flex-example--item">.flex--item</div>
            </div>
        </div>
        <div>
            <div class="mb8 ff-mono">.flex__fl-shrink0</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 flex__fl-shrink0">
                <div class="stacks-flex-example--item">.flex--item</div>
                <div class="stacks-flex-example--item">.flex--item</div>
                <div class="stacks-flex-example--item">.flex--item</div>
            </div>
        </div>
        <div>
            <div class="mb8 ff-mono">.flex__fl-equal</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 flex__fl-equal">
                <div class="stacks-flex-example--item">.flex--item</div>
                <div class="stacks-flex-example--item">.flex--item</div>
                <div class="stacks-flex-example--item">.flex--item</div>
            </div>
        </div>
    </div>
</Example>
```

--------------------------------

### Start Stacks Docs dev server with npm start

Source: https://github.com/stackexchange/stacks/blob/main/README.md

Builds the Stacks Docs workspace locally and starts the development server at http://localhost:5173/.

```sh
npm start
```

--------------------------------

### Objective-C example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/code-blocks.md

Example Objective-C code with imports, a protocol, properties, and methods.

```objectivec
#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString*)worldName;
@required
- (BOOL)allowsToLive;
@end

@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end

- (UITextField *) userName {
    UITextField *retval = nil;
    @synchronized(self) {
        retval = [[userName retain] autorelease];
    }
    return retval;
}

- (void) setUserName:(UITextField *)userName_ {
    @synchronized(self) {
      [userName_ retain];
      [userName release];
      userName = userName_;
    }
}
```

--------------------------------

### Example wrapper with labelled variant

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/CLAUDE.md

Wrap all component examples in <Example>. Sub-example labels always use class="ff-mono mb8".

```svelte
<Example>
    <div class="d-flex g16 ai-start fw-wrap">
        <div class="d-flex fd-column g8">
            <span class="ff-mono mb8">Label</span>
            <ComponentName />
        </div>
    </div>
</Example>
```

--------------------------------

### Ruby example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/code-blocks.md

Example Ruby Greeter class and usage.

```ruby
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
```

--------------------------------

### Interactive examples with actual sample content

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/base/flex.md

These are examples shown in a live example component, displaying each align-self class with visible flex items and sample content. They use the same structure as the simple examples but include additional styling classes and sample content. The classes shown are as-auto, as-baseline, as-center, as-end, as-start, as-stretch.

```html
<div class="mb8 ff-mono">.as-auto</div>
<div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-auto">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
</div>
```

```html
<div class="mb8 ff-mono">.as-baseline</div>
<div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-baseline">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
</div>
```

```html
<div class="mb8 ff-mono">.as-center</div>
<div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-center">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
</div>
```

```html
<div class="mb8 ff-mono">.as-end</div>
<div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-end">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
</div>
```

```html
<div class="mb8 ff-mono">.as-start</div>
<div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center">
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-start">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
</div>
```

```html
<div class="mb8 ff-mono">.as-stretch</div>
<div class="hs1 bg-black-100 ba bc-black-200 p8 d-flex g4 jc-center ai-center">
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-stretch">.flex--item</div>
    <div class="d-flex flex__center stacks-flex-example--item">.flex--item</div>
</div>
```

--------------------------------

### Example Component Implementation

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/base/cursors.md

A visual example component demonstrating the cursor classes applied to styled boxes.

```html
<Example>
    <div class="d-flex g8 fw-wrap fs-caption ff-mono">
        <div class="bg-black-200 p12 ba bc-black-225 c-auto">
            .c-auto
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-default">
            .c-default
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-pointer">
            .c-pointer
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-text">
            .c-text
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-wait">
            .c-wait
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-move">
            .c-move
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-not-allowed">
            .c-not-allowed
        </div>
        <div class="bg-black-200 p12 ba bc-black-225 c-help">
            .c-help
        </div>
    </div>
</Example>
```

--------------------------------

### Alignment classes interactive example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/base/flex.md

Live demonstration of the align-items utility classes using Stacks-specific example classes. Shows each class applied to flex containers with example items, with .ai-stretch marked as the default.

```html
<Example>
    <div class="d-flex gy32 fd-column">
        <div>
            <div class="mb8 ff-mono">.ai-baseline</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-baseline">
                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
                <div class="stacks-flex-example--item h64">.flex--item</div>
                <div class="d-flex ai-end stacks-flex-example--item h48">.flex--item</div>
            </div>
        </div>
        <div>
            <div class="mb8 ff-mono">.ai-center</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-center">
                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
            </div>
        </div>
        <div>
            <div class="mb8 ff-mono">.ai-end</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-end">
                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
            </div>
        </div>
        <div>
            <div class="mb8 ff-mono">.ai-start</div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-start">
                <div class="d-flex flex__center stacks-flex-example--item h32">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h48">.flex--item</div>
            </div>
        </div>
        <div>
            <div class="d-flex ai-center mb8">
                <div class="ff-mono">.ai-stretch</div>
                <Badge text="Default" class="ml6" />
            </div>
            <div class="bg-black-100 ba bc-black-200 p8 d-flex g4 ai-stretch">
                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
                <div class="d-flex flex__center stacks-flex-example--item h64">.flex--item</div>
            </div>
        </div>
    </div>
</Example>
```

--------------------------------

### CSS example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/code-blocks.md

Example CSS for .s-input and .s-textarea including a @supports rule for touch devices.

```css
.s-input,
.s-textarea {
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0.6em 0.7em;
    border: 1px solid var(--bc-darker);
    border-radius: 3px;
    background-color: var(--white);
    color: var(--fc-dark);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.15384615;
    scrollbar-color: var(--scrollbar) transparent;
}
@supports (-webkit-overflow-scrolling: touch) {
    .s-input,
    .s-textarea {
        font-size: 16px;
        padding: 0.36em 0.55em;
    }
    .s-input::-webkit-input-placeholder,
    .s-textarea::-webkit-input-placeholder {
        line-height: normal !important;
    }
}
```

--------------------------------

### JavaScript example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/code-blocks.md

Example React component using withAuth0 and a custom IP constant.

```javascript
import React, { Component } from "react";
import { IP } from "../constants/IP";
import { withAuth0 } from "@auth0/auth0-react";

class AddATournament extends Component {
    componentDidMount() {
        this.myNewListOfAllTournamentsWithAuth();
    }
}

export default withAuth0(AddATournament);
```

--------------------------------

### Java example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/code-blocks.md

Example Java class L2Char with a moveTo method.

```java
package l2f.gameserver.model;

public abstract strictfp class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // what?
      return;
    }
  }
}
```

--------------------------------

### New Contributor User Card Live Example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

A complete, working example of the new contributor user card with real content, including avatar, username, badge, reputation, and time. Shows both small (s-user-card__sm) and default sizes.

```html
<div class="d-flex fd-column g8">
    <div class="s-user-card s-user-card__sm">
        <a class="s-user-card--group" href="#">
            <span class="s-avatar">
                <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
            </span>
            <span class="s-user-card--username s-user-card--new-contributor">SofiaAlc</span>
        </a>
        <div class="s-user-card--group">
            <span class="s-badge s-badge__sm s-badge__new" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='#' class='s-link s-link__underlined'>Check out our Code of Conduct</a>" data-controller="s-tooltip">New</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>
                1,775
            </li>
            <li>
                <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                8
            </li>
            <li>
                <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                12
            </li>
            <li>
                <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                4
            </li>
        </ul>
        <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
            <time>asked 2 hr ago</time>
        </a>
    </div>
    <div class="s-user-card">
        <a class="s-user-card--group" href="#">
            <span class="s-avatar s-avatar__24">
                <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
            </span>
            <span class="s-user-card--username s-user-card--new-contributor">SofiaAlc</span>
        </a>
        <div class="s-user-card--group">
            <span class="s-badge s-badge__sm s-badge__new" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='#' class='s-link s-link__underlined'>Check out our Code of Conduct</a>" data-controller="s-tooltip">New</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>
                1,775
            </li>
            <li>
                <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                8
            </li>
            <li>
                <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                12
            </li>
            <li>
                <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                4
            </li>
        </ul>
        <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
            <time>asked 2 hr ago</time>
        </a>
    </div>
    <div class="s-user-card">
        <a class="s-user-card--group" href="#">
            <span class="s-avatar s-avatar__24">
                <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
            </span>
            <span class="s-user-card--username s-user-card--new-contributor">SofiaAlc</span>
        </a>
        <div class="s-user-card--group">
            <span class="s-badge s-badge__sm s-badge__new" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is a new contributor to this site. Take care in asking for clarification, commenting, and answering. <a href='#' class='s-link s-link__underlined'>Check out our Code of Conduct</a>" data-controller="s-tooltip">New</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>
                1,775
            </li>
            <li>
                <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                8
            </li>
            <li>
                <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                12
            </li>
            <li>
                <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                4
            </li>
        </ul>
        <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
            <time>asked 2 hr ago</time>
        </a>
    </div>
</div>
```

--------------------------------

### Live example: user card with Staff and Mod badges

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

A rendered example of a user card with both Staff and Moderator badges, showing multiple badges in the same group.

```html
<div class="s-user-card">
    <a class="s-user-card--group" href="#">
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
        </span>
        <span class="s-user-card--username">SofiaAlc</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
        <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
    </div>
    <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
        <time>asked 2 hr ago</time>
    </a>
</div>
```

--------------------------------

### Live example: user card with Bot badge

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

A rendered example of a user card with a single Bot badge, demonstrating the s-badge__bot modifier.

```html
<div class="s-user-card">
    <a class="s-user-card--group" href="#">
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
        </span>
        <span class="s-user-card--username">Community</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm s-badge__bot">Bot</span>
    </div>
    <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
        <time>asked 2 hr ago</time>
    </a>
</div>
```

--------------------------------

### Live example: user card with Staff and Mod badges, reputation, and bling

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

A rendered example of a user card with both Staff and Moderator badges, a reputation count, and gold, silver, and bronze bling indicators.

```html
<div class="s-user-card">
    <a class="s-user-card--group" href="#">
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
        </span>
        <span class="s-user-card--username">SofiaAlc</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
        <span class="s-badge s-badge__sm s-badge__moderator">Mod</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>
            1,775
        </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>asked 2 hr ago</time>
    </a>
</div>
```

--------------------------------

### Live example: user card with Mod badge, reputation, and bling

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

A rendered example of a user card with a Moderator badge, a reputation count, and gold, silver, and bronze bling indicators.

```html
<div class="s-user-card">
    <a class="s-user-card--group" href="#">
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
        </span>
        <span class="s-user-card--username">SofiaAlc</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm s-badge__moderator">Mod</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>
            1,775
        </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>asked 2 hr ago</time>
    </a>
</div>
```

--------------------------------

### Live example: user card with Mod badge

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

A rendered example of a user card with a single Moderator badge, demonstrating the s-badge__moderator modifier.

```html
<div class="s-user-card">
    <a class="s-user-card--group" href="#">
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
        </span>
        <span class="s-user-card--username">SofiaAlc</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
    </div>
    <a class="s-user-card--time" href="#" title="2026-01-09 12:15:39Z" data-controller="s-tooltip">
        <time>asked 2 hr ago</time>
    </a>
</div>
```

--------------------------------

### Recognized Member User Card Live Example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

Live example of the small recognized member user card with actual avatar, username, recognition star, reputation and badge bling, and activity time. The second card includes a staff badge.

```html
<Example>
    <div class="d-flex fd-column g8">
        <div class="s-user-card s-user-card__sm">
            <a class="s-user-card--group" href="#">
                <span class="s-avatar">
                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
                </span>
                <span class="s-user-card--username">SofiaAlc</span>
            </a>
            <a href="#" class="s-user-card--group s-user-card--recognition" title="Recognized by AudioBubble" aria-label="Recognized by AudioBubble" data-controller="s-tooltip">
                {@html svgStarVerifiedSm}
            </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>
                    1,775
                </li>
                <li>
                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                    8
                </li>
                <li>
                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                    12
                </li>
                <li>
                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                    4
                </li>
            </ul>
            <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
                <time>asked 2 hr ago</time>
            </a>
        </div>
        <div class="s-user-card s-user-card__sm">
            <a class="s-user-card--group" href="#">
                <span class="s-avatar">
                    <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
                </span>
                <span class="s-user-card--username">SofiaAlc</span>
            </a>
            <div class="s-user-card--group">
                <span class="s-badge s-badge__sm s-badge__staff">Staff</span>
            </div>
            <a href="#" class="s-user-card--group s-user-card--recognition" title="Recognized by AudioBubble" aria-label="Recognized by AudioBubble" data-controller="s-tooltip">
                {@html svgStarVerifiedSm}
            </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>
                    1,775
                </li>
                <li>
                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                    8
                </li>
                <li>
                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                    12
                </li>
                <li>
                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                    4
                </li>
            </ul>
```

--------------------------------

### Awarded user card live example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

Live example of the awarded user card with three variations: small, default with reputation bling, and default with moderator badge and bling counts. Uses placeholder images and inline SVG for achievements.

```html
<div class="d-flex fd-column g8">
    <div class="s-user-card s-user-card__sm">
        <a class="s-user-card--group" href="#">
            <span class="s-avatar">
                <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-16.svg" />
            </span>
            <span class="s-user-card--username">SofiaAlc</span>
        </a>
        <a class="s-user-card--group fc-orange-400" href="#" title="This user is ranked #1 on the weekly R Language leaderboard." aria-label="This user is ranked #1 on the weekly R Language leaderboard." data-controller="s-tooltip">
            {@html svgAchievementsSm}
        </a>
        <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
            <time>asked 2 hr ago</time>
        </a>
    </div>
    <div class="s-user-card">
        <a class="s-user-card--group" href="#">
            <span class="s-avatar s-avatar__24">
                <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
            </span>
            <span class="s-user-card--username">SofiaAlc</span>
        </a>
        <a class="s-user-card--group fc-yellow-400" href="#" title="This user is ranked #2 on the weekly R Language leaderboard." aria-label="This user is ranked #2 on the weekly R Language leaderboard." data-controller="s-tooltip">
            {@html svgAchievementsSm}
        </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>
                1,775
            </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="Show activity on this post" data-controller="s-tooltip">
            <time>asked 2 hr ago</time>
        </a>
    </div>
    <div class="s-user-card">
        <a class="s-user-card--group" href="#">
            <span class="s-avatar s-avatar__24">
                <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
            </span>
            <span class="s-user-card--username">SofiaAlc</span>
        </a>
        <div class="s-user-card--group">
            <span class="s-badge s-badge__sm s-badge__moderator">Mod</span>
        </div>
        <a class="s-user-card--group fc-blue-400" href="#" title="This user is ranked #3 on the weekly R Language leaderboard." aria-label="This user is ranked #3 on the weekly R Language leaderboard." data-controller="s-tooltip">
            {@html svgAchievementsSm}
        </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>
                1,775
            </li>
            <li>
                <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                8
            </li>
            <li>
                <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                12
            </li>
            <li>
                <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                4
            </li>
        </ul>
        <a class="s-user-card--time" href="#" title="Show activity on this post" data-controller="s-tooltip">
            <time>asked 2 hr ago</time>
        </a>
    </div>
</div>
```

--------------------------------

### Moderator user card example

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

This example shows a user card with a moderator badge (s-badge__moderator) displayed next to the username. It uses the default card size and includes reputation and blings, but omits the time link.

```html
<div class="s-user-card">
    <a class="s-user-card--group" href="#">
        <span class="s-avatar s-avatar__24">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-24.svg" />
        </span>
        <span class="s-user-card--username s-user-card--username__op" data-s-tooltip-html-title="<a href='#' class='s-link s-link__underlined'>SofiaAlc</a> is the original poster" data-controller="s-tooltip">SofiaAlc</span>
    </a>
    <div class="s-user-card--group">
        <span class="s-badge s-badge__sm s-badge__moderator">Mod</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>
            1,775
        </li>
        <li>
            <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
            8
        </li>
        <li>
            <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
            12
        </li>
        <li>
            <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
            4
        </li>
    </ul>
</div>
```

--------------------------------

### Large user card live example minimal variant

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

This is a second live example of a large user card with the `s-user-card__lg` class and `wmx3` width constraint. It shows a simplified profile with only reputation, location, and bio, without the moderator badge or recognition row. Use this as a minimal variant.

```html
<div class="s-user-card s-user-card__lg wmx3">
    <div class="s-user-card--row">
        <a class="s-avatar s-avatar__48" href="#">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-48.svg" />
        </a>
        <div class="s-user-card--column">
            <div class="s-user-card--row">
                <a class="s-user-card--username" href="#">SofiaAlc</a>
            </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>
                    1
                </li>
            </ul>
        </div>
    </div>
    <div class="s-user-card--column">
        <ul class="s-user-card--group s-user-card--group__split">
            <li>Vancouver, Canada</li>
        </ul>
        <div class="s-user-card--bio">Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time.</div>
    </div>
</div>
```

--------------------------------

### Large user card live example with Svelte icon

Source: https://github.com/stackexchange/stacks/blob/main/packages/stacks-docs/src/docs/public/system/components/user-cards.md

This is a live example of a large user card with the `s-user-card__lg` class and `wmx3` width constraint. It shows a full profile with reputation, gold/silver/bronze blings, recognition, and bio. The `{@html svgStarVerifiedSm}` is a Svelte expression that renders the star icon.

```html
<div class="s-user-card s-user-card__lg wmx3">
    <div class="s-user-card--row">
        <a class="s-avatar s-avatar__48" href="#">
            <img class="s-avatar--image" alt="demo avatar" src="/images/avatar-disgusted-48.svg" />
        </a>
        <div class="s-user-card--column">
            <div class="s-user-card--row">
                <a class="s-user-card--username" href="#">SofiaAlc</a>
                <div class="s-user-card--group">
                    <span class="s-badge s-badge__sm s-badge__moderator">Mod</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>
                    1,775
                </li>
                <li>
                    <span class="s-bling s-bling__gold s-bling__sm"><span class="v-visible-sr">gold bling</span></span>
                    8
                </li>
                <li>
                    <span class="s-bling s-bling__silver s-bling__sm"><span class="v-visible-sr">silver bling</span></span>
                    12
                </li>
                <li>
                    <span class="s-bling s-bling__bronze s-bling__sm"><span class="v-visible-sr">bronze bling</span></span>
                    4
                </li>
            </ul>
        </div>
    </div>
    <div class="s-user-card--column">
        <div class="s-user-card--row s-user-card--recognition">
            {@html svgStarVerifiedSm}
            <span>Recognized by <a href="#">AudioBubble</a></span>
        </div>
        <ul class="s-user-card--group s-user-card--group__split">
            <li>Senior Product Designer</li>
            <li>Vancouver, Canada</li>
        </ul>
        <div class="s-user-card--bio">Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time.</div>
    </div>
</div>
```
Tokens:
Raw