Urban Bold Team - Industrial ID Card Layout

Stop hiding your team behind boring, circular headshots. The Urban Bold Team widget turns your "About Us" page into a roster of heavy hitters. Designed with a Streetwear & Industrial aesthetic, this component styles each team member profile as a high-security Access Pass or Official ID Card, instantly establishing your brand as an exclusive operation.

Visual Aesthetic: The design relies on a visceral combination of Safety Orange (#FF5E3A) and Jet Black, creating a high-contrast environment that demands attention. Each team card is packed with realistic details: a "scotch tape" visual over the photo suggests a physical mood board, while the barcode footer and "sticker" role badges reinforce the industrial utility vibe. Typography is key, utilizing the condensed 'Anton' font to give names and headlines a poster-like weight.

Interaction & Motion: The widget features a sophisticated Grayscale-to-Color hover effect. By default, team photos are desaturated to maintain visual uniformity. When a user hovers over a card, the image snaps into full color, the card lifts physically via a 3D transform, and the shadow deepens—creating a tactile, satisfying interaction that mimics picking up a physical ID badge.

Use Cases: This widget is built for brands that want to showcase their "Squad" rather than just their employees:

• Creative Agencies: Show clients that your team consists of specialists and disruptors, not just account managers.
• Streetwear & Lifestyle Brands: Introduce your designers and stylists in a format that matches your clothing's branding.
• Gaming & Esports Organizations: Perfect for displaying player rosters or content creator teams with a "gamer tag" feel.
• Music & Event Crews: Highlight the artists, DJs, or production staff behind a festival or tour.

Key Features:

• ID Card Architecture: Profiles are structured like security badges with "Photo," "Role," "Bio," and "ID Number" sections.
• Skeuomorphic Details: Features CSS-styled "Tape" strips and "Sticker" badges that add physical realism to the digital design.
• Interactive Hover States: Engaging grayscale-to-color transitions and 3D lift effects bring the static grid to life.
• Decorative Barcodes: SVG-based barcodes in the footer add to the "Official Personnel" technical aesthetic.
• Responsive Grid: The layout automatically adjusts from a 3-column spread on desktop to a single-column stack on mobile, preserving the ID card aspect ratio.
• CMS Ready: All text (Name, Role, Bio, ID) and images are fully editable, making it easy to update your roster as your team grows.