Data-* Attributes

24 snippets

Explore data-* Attributes resources for the web — layouts, components, effects, and more. Pick a subsection below to continue.

html-data-attributes

Snippets(24)

3D Flip Card
A 3d flip card built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Content Card+2 more
Demo Code
Technologies
CSS, jQuery
Difficulty
intermediate
Features
3D Rotation, Dynamic Backgrounds
Accessible Password Input with Custom Web Components
A accessible password input with custom web components built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Form Elements Html+4 more
Demo Code
Technologies
Vanilla JavaScript, Web Components, CSS Custom Properties
Difficulty
Intermediate
Features
Real-time validation, Accessible ARIA patterns, Custom Element encapsulation
Responsive
Yes
Bouncy Digital Block Clock
A bouncy digital block clock built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 12+
Features
Bouncing Animation, Rolling Digits, Dark Mode, Responsive Scaling
Responsive
Yes
Button Group with Animated Indicator
A button group with animated indicator built with modern frontend techniques for responsive and reusable UI.
Call To Action Semantic Html Html Frontend Ui+5 more
Demo Code
Difficulty
intermediate
Features
animated indicator, sliding highlight, dynamic offsets
Responsive
Yes
Buttons: Bootstrap 5 and vanilla-tilt.js
A buttons: bootstrap 5 and vanilla-tilt.js built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
Bootstrap 5, vanilla-tilt.js
Features
3D Tilt Effect, Parallax Hover, Interactive UI
CSS Grouped Area Chart
A css grouped area chart built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
Intermediate
Features
Semantic HTML, CSS Variables, No-JS Charting
Responsive
Yes
CSS Grouped Bar Chart
A css grouped bar chart built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, HTML
Difficulty
Beginner
Features
Grouped bars, Comparison layout
Responsive
Yes
Cinematic Parallax Reactive Navigation Menu
A cinematic parallax reactive navigation menu built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Semantic Html Html+4 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
Background Shifting, Parallax Interaction, State-Driven Styling
Responsive
Yes
Circular Variable Font Loading Spinner
A circular variable font loading spinner built with modern frontend techniques for responsive and reusable UI.
Text Formatting Loading Animation Css Loader Html+4 more
Demo Code
Technologies
HTML, SCSS, Babel
Difficulty
Intermediate
Browser support
Chrome 92+, Edge 92+, Firefox 90+, Safari 15.4+
Features
Variable Typography, Radial Positioning, Staggered Animation
Responsive
Yes
Contextual Inline CSS Editor
A contextual inline css editor built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, SCSS, Babel
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Dynamic Editor Generation, Contextual Positioning, Live Preview, Property Parsing
Responsive
Yes
Cosmic Neon Text Effect
A cosmic neon text effect built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Features
Hover Animation, Neon Glow, Text Stroke
Responsive
Yes
E-commerce Product Filter
A e-commerce product filter built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS Logic, Sticky Sidebar, No JavaScript
Responsive
Yes
Hop Over Notification Badge
A hop over notification badge built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Difficulty
beginner
Features
CSS animation, dynamic content, pseudo-elements
Hover Effects
A hover effects built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Features
CSS :has() selector, Custom Properties, Data Attributes
Interactive Board Game Prototype
A interactive board game prototype built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Safari 11+, Firefox 55+, Edge 79+
Features
Procedural Generation, State Machine, SVG Sprites, Dark Mode
Responsive
Yes
Jello Animated Sliding Tab Navigation
A jello animated sliding tab navigation built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Dynamic Theming, Sliding Indicator, Contextual Menu, Jello Bounce
Responsive
Yes
Movie Card
A movie card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Difficulty
intermediate
Features
skewed background, star rating, custom tooltips, data-attributes
Responsive
Yes
Neumorphic Multi-Buttons with GSAP Tooltip
A neumorphic multi-buttons with gsap tooltip built with modern frontend techniques for responsive and reusable UI.
Call To Action Semantic Html Html Frontend Ui+5 more
Demo Code
Technologies
GSAP, CSS, HTML, SVG
Difficulty
Intermediate
Features
Neumorphism, Animated Tooltips, SVG Animation
Responsive
Yes
Pricing Table with CSS Transforms
A pricing table with css transforms built with modern frontend techniques for responsive and reusable UI.
Semantic Html Form Elements Html Frontend Ui+4 more
Demo Code
Difficulty
intermediate
Features
Price switcher, CSS animations, Dynamic data updates
Responsive
Yes
Responsive Sidebar
A responsive sidebar built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
Intermediate
Features
Collapsible menu, CSS Custom Properties, Dynamic tooltips
Responsive
Yes
Scroll-Animated Accordion Vertical Timeline
A scroll-animated accordion vertical timeline built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 115+, Edge 115+, Firefox 114+ (flag), Safari 26+
Features
Scroll-Driven Reveal, Collapsible Content, Alternating Layout, Responsive Geometry
Responsive
Yes
Scroll-Driven Dynamic Marquee Frame
A scroll-driven dynamic marquee frame built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+
Features
Dynamic Marquee, Scroll Triggered, Dynamic Theming, Reduced Motion
Responsive
Yes
Scroll-Triggered Text Highlights
A scroll-triggered text highlights built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 60+, Safari 11+
Features
Scroll-Linked Animation, GSAP ScrollTrigger, CSS Variables, Accessible Highlights, Dark Mode
Responsive
Yes
Calendar Mockup
A calendar mockup built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
beginner
Features
grid-layout, event-labels, poster-style
Responsive
Yes