Back to docs
Recipe

Team page design

A polished team section with staggered avatar cards, role badges, and a gradient accent that reinforces your brand identity.

Ingredients

  • CSS Grid with auto-fit columns for responsive layout
  • Staggered entrance using Tailwind animation utilities
  • Gradient border cards with bg-[#0A0612] inner
  • Role badges with violet-to-pink gradient text
  • Circular avatars with ring accent on hover

Preview

A

Alex Chen

Founder
M

Maya Okonkwo

Design Lead
D

Drew Patel

Engineer

Key classes

  • grid gap-6 sm:grid-cols-2 lg:grid-cols-3
  • rounded-2xl border border-zinc-800 bg-[#0A0612]
  • bg-gradient-to-br from-[#8B5CF6] to-[#F472B6] p-[2px]
  • group hover:border-zinc-700 transition-all

Notes

The gradient ring on avatars uses a padded outer div with a solid inner circle. Keep role badges short — one or two words max. For larger teams, increase the grid column count at xl breakpoints.