The widget library for WordPress is here Download plugin

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.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

đź‘‹ P.S. Have questions? Leave a comment.