Profile Card

A compact profile widget for team pages, user cards, and sidebars — shows identity at a glance with skills and quick-action buttons.

Preview

Alex Morgan

Senior Product Designer

FigmaDesign TokensWeb Components

Follow

Message

Code

<lt-surface appearance="outlined" elevation="0" style="max-width: 280px; width: 100%;">
<div style="padding: var(--lt-spacing-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--lt-spacing-3);">
  <lt-avatar src="https://picsum.photos/seed/profile-card/200/200" size="xl"></lt-avatar>
  <div>
    <lt-text variant="h5" style="color: var(--lt-text-default);">Alex Morgan</lt-text>
    <lt-text variant="body-sm" style="color: var(--lt-text-subtle);">Senior Product Designer</lt-text>
  </div>
  <div style="display: flex; flex-wrap: wrap; gap: var(--lt-spacing-2); justify-content: center;">
    <lt-chip>Figma</lt-chip>
    <lt-chip>Design Tokens</lt-chip>
    <lt-chip>Web Components</lt-chip>
  </div>
  <lt-divider style="width: 100%;"></lt-divider>
  <div style="display: flex; gap: var(--lt-spacing-2);">
    <lt-button variant="primary" size="sm">Follow</lt-button>
    <lt-button variant="neutral" appearance="outlined" size="sm" icon-start="mail">Message</lt-button>
  </div>
</div>
</lt-surface>

import { Surface, Avatar, Text, Chip, Divider, Button } from '@latty-ds/react';

export default function ProfileCard() {
return (
  <Surface appearance="outlined" elevation="0" style={{ maxWidth: 280, width: '100%' }}>
    <div style={{ padding: 'var(--lt-spacing-6)', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 'var(--lt-spacing-3)' }}>
      <Avatar src="https://picsum.photos/seed/profile-card/200/200" size="xl" />
      <div>
        <Text variant="h5" style={{ color: 'var(--lt-text-default)' }}>Alex Morgan</Text>
        <Text variant="body-sm" style={{ color: 'var(--lt-text-subtle)' }}>Senior Product Designer</Text>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--lt-spacing-2)', justifyContent: 'center' }}>
        <Chip>Figma</Chip>
        <Chip>Design Tokens</Chip>
        <Chip>Web Components</Chip>
      </div>
      <Divider style={{ width: '100%' }} />
      <div style={{ display: 'flex', gap: 'var(--lt-spacing-2)' }}>
        <Button variant="primary" size="sm">Follow</Button>
        <Button variant="neutral" appearance="outlined" size="sm" iconStart="mail">Message</Button>
      </div>
    </div>
  </Surface>
);
}

<template>
<lt-surface appearance="outlined" elevation="0" style="max-width: 280px; width: 100%;">
  <div style="padding: var(--lt-spacing-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--lt-spacing-3);">
    <lt-avatar src="https://picsum.photos/seed/profile-card/200/200" size="xl"></lt-avatar>
    <div>
      <lt-text variant="h5" style="color: var(--lt-text-default);">Alex Morgan</lt-text>
      <lt-text variant="body-sm" style="color: var(--lt-text-subtle);">Senior Product Designer</lt-text>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: var(--lt-spacing-2); justify-content: center;">
      <lt-chip>Figma</lt-chip>
      <lt-chip>Design Tokens</lt-chip>
      <lt-chip>Web Components</lt-chip>
    </div>
    <lt-divider style="width: 100%;"></lt-divider>
    <div style="display: flex; gap: var(--lt-spacing-2);">
      <lt-button variant="primary" size="sm">Follow</lt-button>
      <lt-button variant="neutral" appearance="outlined" size="sm" icon-start="mail">Message</lt-button>
    </div>
  </div>
</lt-surface>
</template>

Components

lt-surface, lt-avatar, lt-text, lt-chip, lt-divider, lt-button