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 install Urban Bold Team - Industrial ID Card Layout to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit Urban Bold Team - Industrial ID Card Layout visually using the native Squarespace extension

+−

First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. To drop the Urban Bold Team - Industrial ID Card Layout into Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.