Layout Patterns
- Grid
- Onboarding
- Headers and Titles
- Footer
- Images
- Table
- Links
- Carousel
- Navigations
- Form
- Buttons
- Cards
- Calendar
- Typography
Grid
- Column Layout
- Masonry Layout
- Minigrid: Minimal 2kb zero dependency cascading grid layout without pain.
- bricklayer: Responsive Pinterest Like Masonry Layout
- Grid element
- react-stonecutter: Animated grid layout component for React
- Gallery Grid Layout
- Split Layout
- Timeline
- Gradient grid with shared background
- Golden Layout - Multi-screen layout for WebApps
Onboarding
- Tutorial - Onboarding: App Onboarding Best Practices You Should Follow
Headers and Titles
- Move background on mouse cursor move
- Auto changing text
- Coversheet with 100% viewport height DEMO
- How to Create a Fixed Header Which Animates on Page Scroll
Footer
- Footer Love: An inspirational exhibit for all your footer fetishes.
Images
Table
- Products Comparison Table: A responsive table to compare and filter through multiple products.
Links
Carousel
- react-slick: React carousel component
Navigations
- Collection of patterns
- Dot Navigation
- Hamburger Menu
- Vertical dot navigation
- Hover animation
- Responsive Hamburger toggle
- Hamburger overlay menu
- Responsive Accordion
- Full page sliding down panel
- Advance Search Form
- Navigation menus using CSS flexbox
- Auto-Hiding Navigation: A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.
Form
- Login
- File Input
- Slider
Buttons
Cards
Calendar
Typography
- Typography.js: A powerful toolkit for building websites with beautiful typography.