Profile card

A profile card for a /profile command. It uses Container, Section with Thumbnail, Separator, Text Display and Action Row.

Preview

My BotAPPToday at 12:00 PM

Ana García

@ana · Member since 2021-01-01

🏆 Level 42 · 12,350 XP

---

📊 Stats

• Messages: 8,214
• Voice time: 120 h
• Badges: 🥇 🎨 🎮

🖼️ Latest screenshots

⭐Give reputationView badges

payload.json

{
  "flags": 32768,
  "components": [
    {
      "type": 17,
      "accent_color": 5793266,
      "components": [
        {
          "type": 9,
          "components": [
            {
              "type": 10,
              "content": "# Ana García"
            },
            {
              "type": 10,
              "content": "-# @ana · Member since <t:1609459200:D>"
            },
            {
              "type": 10,
              "content": "🏆 **Level 42** · 12,350 XP"
            }
          ],
          "accessory": {
            "type": 11,
            "media": {
              "url": "attachment://avatar.png"
            },
            "description": "Ana's avatar"
          }
        },
        {
          "type": 14,
          "divider": true,
          "spacing": 2
        },
        {
          "type": 10,
          "content": "### 📊 Stats\n- **Messages:** 8,214\n- **Voice time:** 120 h\n- **Badges:** 🥇 🎨 🎮"
        },
        {
          "type": 14,
          "divider": false,
          "spacing": 1
        },
        {
          "type": 10,
          "content": "### 🖼️ Latest screenshots"
        },
        {
          "type": 12,
          "items": [
            {
              "media": {
                "url": "attachment://mountains.png"
              }
            },
            {
              "media": {
                "url": "attachment://sunset.png"
              }
            },
            {
              "media": {
                "url": "attachment://forest.png"
              }
            }
          ]
        },
        {
          "type": 1,
          "components": [
            {
              "type": 2,
              "style": 1,
              "label": "Give reputation",
              "custom_id": "rep:123456789012345678",
              "emoji": {
                "name": "⭐"
              }
            },
            {
              "type": 2,
              "style": 2,
              "label": "View badges",
              "custom_id": "badges:123456789012345678"
            }
          ]
        }
      ]
    }
  ]
}

How it’s built

1. A Container with the brand color (accent_color).
2. A Section: name and details on the left, avatar on the right.
3. A large Separator with a line to split off the header.
4. A Text Display with a markdown list for the stats.
5. A Media Gallery with 3 images.
6. An Action Row with buttons that carry the user ID in their custom_id.

Code

HTTP

Send the JSON above in payload_json together with the images as multipart/form-data.

JavaScript

import { ContainerBuilder, ButtonBuilder, ButtonStyle, SeparatorSpacingSize, MessageFlags } from 'discord.js';

function profileCard(user, stats) {
  return new ContainerBuilder()
    .setAccentColor(0x5865f2)
    .addSectionComponents((section) =>
      section
        .addTextDisplayComponents(
          (text) => text.setContent(`# ${user.displayName}`),
          (text) => text.setContent(`-# @${user.username}`),
          (text) => text.setContent(`🏆 **Level ${stats.level}** · ${stats.xp} XP`),
        )
        .setThumbnailAccessory((thumbnail) =>
          thumbnail.setURL(user.displayAvatarURL()).setDescription(`${user.displayName}'s avatar`),
        ),
    )
    .addSeparatorComponents((separator) => separator.setSpacing(SeparatorSpacingSize.Large))
    .addTextDisplayComponents((text) =>
      text.setContent(`### 📊 Stats\n- **Messages:** ${stats.messages}`),
    )
    .addActionRowComponents((row) =>
      row.setComponents(
        new ButtonBuilder().setCustomId(`rep:${user.id}`).setLabel('Give reputation').setEmoji('⭐').setStyle(ButtonStyle.Primary),
        new ButtonBuilder().setCustomId(`badges:${user.id}`).setLabel('View badges').setStyle(ButtonStyle.Secondary),
      ),
    );
}

await interaction.reply({
  flags: MessageFlags.IsComponentsV2,
  components: [profileCard(interaction.user, { level: 42, xp: 12350, messages: 8214 })],
});

Python

def profile_card(user: discord.User, level: int, xp: int, messages: int) -> discord.ui.LayoutView:
    view = discord.ui.LayoutView()
    view.add_item(
        discord.ui.Container(
            discord.ui.Section(
                f"# {user.display_name}",
                f"-# @{user.name}",
                f"🏆 **Level {level}** · {xp} XP",
                accessory=discord.ui.Thumbnail(user.display_avatar.url, description=f"{user.display_name}'s avatar"),
            ),
            discord.ui.Separator(spacing=discord.SeparatorSpacing.large),
            discord.ui.TextDisplay(f"### 📊 Stats\n- **Messages:** {messages}"),
            discord.ui.ActionRow(
                discord.ui.Button(label="Give reputation", emoji="⭐", style=discord.ButtonStyle.primary, custom_id=f"rep:{user.id}"),
                discord.ui.Button(label="View badges", style=discord.ButtonStyle.secondary, custom_id=f"badges:{user.id}"),
            ),
            accent_colour=0x5865F2,
        )
    )
    return view


await interaction.response.send_message(view=profile_card(interaction.user, 42, 12350, 8214))

Go

func profileCard(u *discordgo.User, level, xp, messages int) discordgo.Container {
  color := 0x5865F2
  large := discordgo.SeparatorSpacingSizeLarge
  alt := u.Username + "'s avatar"

  return discordgo.Container{
    AccentColor: &color,
    Components: []discordgo.MessageComponent{
      discordgo.Section{
        Components: []discordgo.MessageComponent{
          discordgo.TextDisplay{Content: "# " + u.Username},
          discordgo.TextDisplay{Content: fmt.Sprintf("🏆 **Level %d** · %d XP", level, xp)},
        },
        Accessory: discordgo.Thumbnail{
          Media:       discordgo.UnfurledMediaItem{URL: u.AvatarURL("256")},
          Description: &alt,
        },
      },
      discordgo.Separator{Spacing: &large},
      discordgo.TextDisplay{Content: fmt.Sprintf("### 📊 Stats\n- **Messages:** %d", messages)},
      discordgo.ActionsRow{Components: []discordgo.MessageComponent{
        discordgo.Button{Label: "Give reputation", Style: discordgo.PrimaryButton, CustomID: "rep:" + u.ID,
          Emoji: &discordgo.ComponentEmoji{Name: "⭐"}},
        discordgo.Button{Label: "View badges", Style: discordgo.SecondaryButton, CustomID: "badges:" + u.ID},
      }},
    },
  }
}