User Profile

A profile page with avatar, stats, badges, and bio section.

Preview

SK

Sashi Kumar

Full-stack developer & open-source contributor

AngularTypeScriptCSS
142Posts
3.2KFollowers
284Following

Passionate about building lightweight, accessible UI components. Creator of Oat CSS and contributor to several open-source projects.

html
<div class="flex justify-center">
  <div class="card max-w-md w-100">
    <div class="vstack gap-4 items-center text-center">
      <ng-oat-avatar initials="SK" size="xl" />
      <div>
        <h3 class="mb-0">Sashi Kumar</h3>
        <p class="text-light mb-0">Full-stack developer</p>
      </div>
      <div class="hstack gap-2">
        <ng-oat-badge variant="secondary">Angular</ng-oat-badge>
        <ng-oat-badge variant="success">TypeScript</ng-oat-badge>
        <ng-oat-badge variant="outline">CSS</ng-oat-badge>
      </div>
      <div class="hstack gap-6">
        <div class="vstack items-center">
          <strong class="text-3">142</strong>
          <small class="text-light">Posts</small>
        </div>
        <!-- ... more stats -->
      </div>
      <hr class="w-100" />
      <p class="text-left">Bio text here...</p>
      <div class="hstack gap-2 w-100">
        <button class="btn flex-1">Follow</button>
        <button class="btn outline flex-1">Message</button>
      </div>
    </div>
  </div>
</div>

SFC Source

typescript
import { Component } from '@angular/core';
import { NgOatAvatar, NgOatBadge } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-profile',
  imports: [NgOatAvatar, NgOatBadge],
  template: `
    <div class="flex justify-center p-8">
      <div class="card max-w-md w-100">
        <div class="vstack gap-4 items-center text-center">
          <ng-oat-avatar initials="SK" size="xl" />
          <div>
            <h3 class="mb-0">Sashi Kumar</h3>
            <p class="text-light mb-0">Full-stack developer</p>
          </div>
          <div class="hstack gap-2">
            <ng-oat-badge variant="secondary">Angular</ng-oat-badge>
            <ng-oat-badge variant="success">TypeScript</ng-oat-badge>
            <ng-oat-badge variant="outline">CSS</ng-oat-badge>
          </div>
          <div class="hstack gap-6">
            <div class="vstack items-center">
              <strong class="text-3">142</strong>
              <small class="text-light">Posts</small>
            </div>
            <div class="vstack items-center">
              <strong class="text-3">3.2K</strong>
              <small class="text-light">Followers</small>
            </div>
            <div class="vstack items-center">
              <strong class="text-3">284</strong>
              <small class="text-light">Following</small>
            </div>
          </div>
          <hr class="w-100" />
          <p class="text-left">Passionate about building lightweight, accessible UI components.</p>
          <div class="hstack gap-2 w-100">
            <button class="btn flex-1">Follow</button>
            <button class="btn outline flex-1">Message</button>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class ProfileComponent {}