Teamdream | Responsive Team Card Bootstrap Template

TeamDream — Responsive Team Card Bootstrap Template

TeamDream is a premium HTML team card template featuring 10 unique, fully distinct layouts — from classic grids and editorial dark cards to glassmorphism, overlay hover, and interactive department filters. Every layout is pixel-perfect, W3C valid, and ready to drop into any website with compiled CSS included.

Built from the ground up with Bootstrap 5.3, Sass source files, CSS custom properties for effortless dark mode, and vanilla JS for filtering — no jQuery, just clean and modern code. The included package.json is optional and only needed if you want to rebuild CSS from SCSS.

10 Unique Layouts Included:

• Layout 01 — Classic Grid Light: 4-column portrait card grid on a warm neutral background. Ghost social icon circles, lift-on-hover shadow.
• Layout 02 — Editorial Dark Grid: 3-column landscape photo cards on a deep navy gradient. Left-aligned typography with an indigo accent rule.
• Layout 03 — Horizontal Cards: Full-width row cards with photo left, bio right. Accent border slides in from the left on hover.
• Layout 04 — Full Overlay Hover: Portrait cards where hovering reveals name, role, bio and social links via a smooth dark overlay.
• Layout 05 — Minimal Circle: Ultra-minimal layout with circular photos — a floating card materialises on hover.
• Layout 06 — Glassmorphism: Frosted glass cards over a vivid purple gradient. Blur + saturation backdrop filter with graceful fallback.
• Layout 07 — List View: Team directory in a filterable table format with avatar, badge, socials, and profile link per row.
• Layout 08 — Skills & Tags Dark: Dark mode cards with square-cropped photos, skill pill badges, and experience indicators.
• Layout 09 — Featured + Grid: Asymmetric layout — large featured leader card on the left, compact 3-column mini-grid on the right.
• Layout 10 — Filter by Department: Square-crop cards with coloured department badges. Instant filter tabs for Leadership, Engineering, Design, Marketing.

Why choose TeamDream?

• 10 Genuinely Distinct Layouts:
  Every layout has a unique structural concept — different photo proportions, grid systems, interaction patterns, and visual treatments.
• Dark Mode Built In:
  CSS custom property theming system. Toggle data-theme="dark" on the html element — every colour adapts instantly.
• Ready Without Build Tools:
  Open any HTML file in a browser and it works. Compiled CSS is included, while Sass source files and optional package.json scripts are provided for advanced customization.
• Interactive JS Filtering:
  Vanilla JS department filter with instant show/hide — no jQuery needed.
• Card Entrance Animations:
  IntersectionObserver-based fade+slide animations that trigger as cards enter the viewport.
• SVG Social Icons:
  Dedicated SVG icons for Facebook, LinkedIn, X (Twitter), GitHub, Dribbble, and Figma. Context-aware tinting via CSS filter.
• W3C Valid HTML5:
  All 11 HTML files validated clean — zero errors, zero warnings.
• Fully Responsive:
  Optimized for desktop, tablet, and mobile on all modern browsers.

Tech Stack & Features:

• Bootstrap v5.3.3 (CDN)
• Material Design Icons v7.4 for UI helper icons, bundled locally
• Google Fonts: Inter + Lora
• Custom SVG social icons (Facebook, LinkedIn, X, GitHub, Dribbble, Figma)
• Sass source files with !default variables and modular layout partials
• CSS custom properties theming (light + dark)
• IntersectionObserver card animations
• Vanilla JS department filter
• Glassmorphism with @supports fallback
• 100% Responsive
• W3C valid HTML5 (all files)
• Cross-browser: Chrome, Firefox, Safari, Opera, Edge
• No jQuery; compiled CSS works without running build tools
• FREE lifetime updates
• Support within 24 hours
• Full HTML documentation included

What’s included in the download?

• landing.html — overview page with links to all 10 demos
• index.html through index-10.html — 10 unique demo layouts
• src/assets/css/ — style.css, Bootstrap 5.3, Material Design Icons CSS
• src/assets/scss/ — Sass source files, variables, layout partials, and responsive styles
• src/assets/js/main.js — animations + filter logic
• src/assets/img/icons/ — custom SVG social icons (so-* brand colors + sw-* white variants)
• src/assets/fonts/ — MDI webfont files (woff2, woff, ttf, eot)
• package.json — optional Sass build scripts: build:css, watch:css, build:css:min
• documentation/ — full HTML documentation

3rd Party Libraries:

• Bootstrap v5.3.3
• Material Design Icons v7.4
• Google Font: Inter
• Google Font: Lora

Images License:

Preview images are for demonstration only and are not included in the download package.

Support:

• If you have any questions, please feel free to contact us.
• You will receive a response within 12–24 hours.

Documentation:

The documentation includes separate sections for CSS structure, Sass structure, rebuilding CSS, changing team card colors and fonts, and changing social icons.

Important Note:

• All preview images are for demonstration only and are not included in the final purchase files.
• Sass and package.json are optional. The included compiled CSS works immediately; run npm install only if you want to rebuild CSS from SCSS.
• The main package builds with npm run build:css.
• CSS/code customization beyond the template’s existing feature set is not included in item support scope per Envato policy.

Version History:

v2.0.1 — 24.06.2026

 - Replaced minified materialdesignicons.css with full unminified source (MDI v7.4.47) - Documentation expanded: added HTML structure modification examples,   live server deployment guide (FTP, Netlify, GitHub Pages),   and Troubleshooting & FAQ section (8 common issues) - Package cleaned: removed .DS_Store files and legacy vendor directory 

v2.0.0 — 19.06.2026

 - Full visual redesign: warm neutral palette, complete dark mode overhaul - 10 unique layouts (up from 1 in v1.0) - New layouts: Editorial Dark Grid, Horizontal Cards, Overlay Hover,   Minimal Circle, Glassmorphism, List View, Skills+Tags, Featured+Grid,   Filter by Department - SVG social icons replacing MDI icon fonts - Twitter renamed to X throughout - IntersectionObserver card entrance animations - Interactive department filter (Vanilla JS, no jQuery) - Inter + Lora Google Fonts pairing - Sass source files added with modular layout partials and build scripts - Documentation expanded with CSS/Sass structure, build, colors, fonts, and icons - W3C validated — zero errors across all 11 HTML files 

v1.0.0 — 01.03.2024

- Initial Release

Follow: