diff --git a/packages/stacks-docs/_data/user-card.json b/packages/stacks-docs/_data/user-card.json
index 331658754a..4447f70112 100644
--- a/packages/stacks-docs/_data/user-card.json
+++ b/packages/stacks-docs/_data/user-card.json
@@ -1,427 +1,430 @@
{
- "classes": [
- {
- "class": ".s-user-card",
- "applies": "N/A",
- "description": "Base user card container that applies the basic style."
- },
- {
- "class": ".s-user-card--group",
- "applies": "N/A",
- "description": "A container for group elements."
- },
- {
- "class": ".s-user-card--group__split",
- "applies": "Modifier for
.s-user-card--group",
- "description": "Inserts a separator between each element."
- },
- {
- "class": ".s-user-card--column",
- "applies": "N/A",
- "description": "A container for column elements."
- },
- {
- "class": ".s-user-card--row",
- "applies": "N/A",
- "description": "A container for row elements."
- },
- {
- "class": ".s-user-card--bio",
- "applies": "N/A",
- "description": "Container for the user's bio."
- },
- {
- "class": ".s-user-card--recognition",
- "applies": "N/A",
- "description": "Container for recognition by a collective."
- },
- {
- "class": ".s-user-card--rep",
- "applies": "N/A",
- "description": "Container for the user's reputation."
- },
- {
- "class": ".s-user-card--time",
- "applies": "N/A",
- "description": "Container for the user's timestamp."
- },
- {
- "class": ".s-user-card--username",
- "applies": "N/A",
- "description": "Container for the user's username."
- }
- ],
- "base": [
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": "",
- "silver": "",
- "bronze": ""
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4
- }
- ],
- "with-badges": [
- {
- "username": "Community",
- "timestamp": "asked 2 hr ago",
- "badges": [
- {
- "class": "s-badge__bot",
- "text": "Bot"
- }
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "badges": [
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ "classes": [
+ {
+ "class": ".s-user-card",
+ "applies": "N/A",
+ "description": "Base user card container that applies the basic style."
+ },
+ {
+ "class": ".s-user-card--group",
+ "applies": "N/A",
+ "description": "A container for group elements."
+ },
+ {
+ "class": ".s-user-card--group__split",
+ "applies": "Modifier for
.s-user-card--group",
+ "description": "Inserts a separator between each element."
+ },
+ {
+ "class": ".s-user-card--column",
+ "applies": "N/A",
+ "description": "A container for column elements."
+ },
+ {
+ "class": ".s-user-card--row",
+ "applies": "N/A",
+ "description": "A container for row elements."
+ },
+ {
+ "class": ".s-user-card--bio",
+ "applies": "N/A",
+ "description": "Container for the user's bio."
+ },
+ {
+ "class": ".s-user-card--recognition",
+ "applies": "N/A",
+ "description": "Container for recognition by a collective."
+ },
+ {
+ "class": ".s-user-card--rep",
+ "applies": "N/A",
+ "description": "Container for the user's reputation."
+ },
+ {
+ "class": ".s-user-card--time",
+ "applies": "N/A",
+ "description": "Container for the user's timestamp."
+ },
+ {
+ "class": ".s-user-card--username",
+ "applies": "N/A",
+ "description": "Container for the user's username."
}
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "badges": [
+ ],
+ "base": [
{
- "class": "s-badge__staff",
- "text": "Staff"
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago"
},
{
- "class": "s-badge__moderator",
- "text": "Mod"
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": "",
+ "silver": "",
+ "bronze": ""
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4
}
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": "",
- "silver": "",
- "bronze": "",
- "badges": [
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ ],
+ "with-badges": [
+ {
+ "username": "Community",
+ "timestamp": "asked 2 hr ago",
+ "badges": [
+ {
+ "class": "s-badge__bot",
+ "text": "Bot"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "badges": [
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "badges": [
+ {
+ "class": "s-badge__staff",
+ "text": "Staff"
+ },
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": "",
+ "silver": "",
+ "bronze": "",
+ "badges": [
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "badges": [
+ {
+ "class": "s-badge__staff",
+ "text": "Staff"
+ },
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
}
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "badges": [
- {
- "class": "s-badge__staff",
- "text": "Staff"
- },
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ ],
+ "small": [
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "badges": [
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
}
- ]
- }
- ],
- "small": [
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "badges": [
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ ],
+ "large": [
+ {
+ "username": "SofiaAlc",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "badges": [
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ],
+ "recognition": "Recognized by AudioBubble",
+ "role": "Senior Product Designer",
+ "location": "Vancouver, Canada",
+ "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time."
+ },
+ {
+ "username": "SofiaAlc",
+ "reputation": 1,
+ "location": "Vancouver, Canada",
+ "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time."
+ },
+ {
+ "username": "SofiaAlc",
+ "reputation": "1",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4
}
- ]
- }
- ],
- "large": [
- {
- "username": "SofiaAlc",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "badges": [
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ ],
+ "sizes": [
+ {
+ "size": "small",
+ "class": ".s-user-card__sm",
+ "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies."
+ },
+ {
+ "size": "default",
+ "class": "N/A",
+ "description": "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."
+ },
+ {
+ "size": "large",
+ "class": ".s-user-card__lg",
+ "description": "Use the large variant when space permits and more detailed information is desired"
}
- ],
- "recognition": "Recognized by AudioBubble",
- "role": "Senior Product Designer",
- "location": "Vancouver, Canada",
- "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time."
- },
- {
- "username": "SofiaAlc",
- "reputation": 1,
- "location": "Vancouver, Canada",
- "bio": "Developer who believes in clean code, clear coffee, and the occasional snake pun. Automating the boring stuff one script at a time."
- },
- {
- "username": "SofiaAlc",
- "reputation": "1",
- "gold": 8,
- "silver": 12,
- "bronze": 4
- }
- ],
- "sizes": [
- {
- "size": "small",
- "class": ".s-user-card__sm",
- "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies."
- },
- {
- "size": "default",
- "class": "N/A",
- "description": "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."
- },
- {
- "size": "large",
- "class": ".s-user-card__lg",
- "description": "Use the large variant when space permits and more detailed information is desired"
- }
- ],
- "original-poster": [
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "size": "small"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4
- },
- {
- "username": "SofiaAlc",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "badges": [
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ ],
+ "original-poster": [
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "size": "small"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4
+ },
+ {
+ "username": "SofiaAlc",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "badges": [
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
}
- ]
- }
- ],
- "new-contributor": [
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "size": "small",
- "badges": [
- {
- "class": "s-badge__new",
- "text": "New"
+ ],
+ "new-contributor": [
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "size": "small",
+ "badges": [
+ {
+ "class": "s-badge__new",
+ "text": "New"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "badges": [
+ {
+ "class": "s-badge__new",
+ "text": "New"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "badges": [
+ {
+ "class": "s-badge__new",
+ "text": "New"
+ },
+ {
+ "class": "s-badge__staff",
+ "text": "Staff"
+ }
+ ]
}
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "badges": [
- {
- "class": "s-badge__new",
- "text": "New"
+ ],
+ "deleted-user": [
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "size": "small"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago"
}
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "badges": [
- {
- "class": "s-badge__new",
- "text": "New"
- },
- {
- "class": "s-badge__staff",
- "text": "Staff"
+ ],
+ "states": [
+ {
+ "name": "Original Poster",
+ "class": "s-user-card--username__op",
+ "description": "This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads."
+ },
+ {
+ "name": "New Contributor",
+ "class": "N/A",
+ "description": "This label appears on a user's first-ever question or answer to signal that they are new to the platform."
+ },
+ {
+ "name": "Deleted user",
+ "class": "s-user-card__deleted",
+ "description": "When a user is deleted, we still need to show their name, but we strip the meta data."
}
- ]
- }
- ],
- "deleted-user": [
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "size": "small"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago"
- }
- ],
- "states": [
- {
- "name": "Original Poster",
- "class": "s-user-card--username__op",
- "description": "This label identifies the author of the primary post (such as the Question asker) when they appear in secondary contexts, like comment threads."
- },
- {
- "name": "New Contributor",
- "class": "N/A",
- "description": "This label appears on a user's first-ever question or answer to signal that they are new to the platform."
- },
- {
- "name": "Deleted user",
- "class": "s-user-card__deleted",
- "description": "When a user is deleted, we still need to show their name, but we strip the meta data."
- }
- ],
- "recognized-member": [
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "recognitionIcon": "StarVerifiedSm",
- "size": "small"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "recognitionIcon": "StarVerifiedSm",
- "size": "small",
- "badges": [
- {
- "class": "s-badge__staff",
- "text": "Staff"
+ ],
+ "recognized-member": [
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "recognitionIcon": "StarVerifiedSm",
+ "size": "small"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "recognitionIcon": "StarVerifiedSm",
+ "size": "small",
+ "badges": [
+ {
+ "class": "s-badge__staff",
+ "text": "Staff"
+ }
+ ]
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "recognitionIcon": "StarVerifiedSm"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": 8,
+ "silver": 12,
+ "bronze": 4,
+ "recognitionIcon": "StarVerifiedSm",
+ "badges": [
+ {
+ "class": "s-badge__staff",
+ "text": "Staff"
+ }
+ ]
}
- ]
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "recognitionIcon": "StarVerifiedSm"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": 8,
- "silver": 12,
- "bronze": 4,
- "recognitionIcon": "StarVerifiedSm",
- "badges": [
- {
- "class": "s-badge__staff",
- "text": "Staff"
+ ],
+ "awarded": [
+ {
+ "username": "SofiaAlc",
+ "award": "fc-orange-400",
+ "position": "third",
+ "timestamp": "asked 2 hr ago",
+ "size": "small"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": "",
+ "silver": "",
+ "bronze": "",
+ "award": "fc-yellow-400",
+ "position": "second"
+ },
+ {
+ "username": "SofiaAlc",
+ "timestamp": "asked 2 hr ago",
+ "reputation": "1,775",
+ "gold": "8",
+ "silver": "12",
+ "bronze": "4",
+ "award": "fc-blue-400",
+ "position": "first",
+ "badges": [
+ {
+ "class": "s-badge__moderator",
+ "text": "Mod"
+ }
+ ]
}
- ]
- }
- ],
- "awarded": [
- {
- "username": "SofiaAlc",
- "award": "fc-orange-400",
- "timestamp": "asked 2 hr ago",
- "size": "small"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": "",
- "silver": "",
- "bronze": "",
- "award": "fc-yellow-400"
- },
- {
- "username": "SofiaAlc",
- "timestamp": "asked 2 hr ago",
- "reputation": "1,775",
- "gold": "8",
- "silver": "12",
- "bronze": "4",
- "award": "fc-blue-400",
- "badges": [
- {
- "class": "s-badge__moderator",
- "text": "Mod"
+ ],
+ "additional-bling": [
+ {
+ "name": "Recognized Member",
+ "class": "s-user-card--recognition-additional-bling",
+ "description": "This label appears on within a Collective question post to signal that they are a Recognized Member."
+ },
+ {
+ "name": "Awarded",
+ "class": "N/A",
+ "description": "This icon appears next to a user when they are within the top 3 positions of a Collective’s leaderboard."
}
- ]
- }
- ],
- "additional-bling": [
- {
- "name": "Recognized Member",
- "class": "s-user-card--recognition-additional-bling",
- "description": "This label appears on within a Collective question post to signal that they are a Recognized Member."
- },
- {
- "name": "Awarded",
- "class": "N/A",
- "description": "This icon appears next to a user when they are within the top 3 positions of a Collective’s leaderboard."
- }
- ]
-}
\ No newline at end of file
+ ]
+}
diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html
index 8752c28e9a..bde2e3dc6a 100644
--- a/packages/stacks-docs/product/components/user-cards.html
+++ b/packages/stacks-docs/product/components/user-cards.html
@@ -1089,7 +1089,7 @@
{% endfor %}
{% endif %}
-
+
{% icon "AchievementsSm", native %}
{% if user.reputation or user.gold or user.silver or user.bronze %}