This pattern describes a desktop web landing page, featuring a fixed navigation bar, footer, and interactive elements such as carousels, buttons, and hypertext links. It integrates animations, video, and anchor scrolling to create an engaging user experience. Notable behavior: Animation; Carrousel; Fixed on Scroll.

Desktop, Pathfinding, Accessibility, Decision Making, Web, English, Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation

Facilitates file uploads with drag-and-drop or click interactions, providing background loading, progress indicators, and visual feedback. Manages empty, loading, and completion states for user awareness.

A standard checkbox component enhanced with custom color styling to visually differentiate selection states or categories, improving clarity and user feedback in forms and lists.

Desktop, Landing Page, Web, Español, Drag & Drop Gesture, Carrousel, Image / Illustration, Animation, Navbar, Hypertext Links, Fixed on Scroll

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

A horizontal slider pattern for displaying items, commonly used in e-commerce for product carousels, featuring pagination and image display.

Enables users to create a file from a web image by dragging and dropping it, often involving OS-level file handling and potentially a modal for confirmation or options.

A modal dialog pattern that overlays content, dims the background, and allows scrolling within the modal's content. Typically used for focused user interaction or displaying detailed information.

A landing page designed to promote and facilitate the download of a mobile application. It typically includes a navigation bar, visual elements, and calls to action to guide users.

A user interface pattern where a theme switcher, typically for toggling between light and dark modes, is accessible within a side-drawer or side panel. This interaction involves opening the drawer, selecting a theme, and often includes visual transitions. Notable behavior: Click event; Drawer open/close; Side-drawer open.

A vertical navigation menu composed of icons, often placed in a side panel or navbar, supporting tooltips on hover and notification badges for user awareness and pathfinding.

Animates a background element, often an image or illustration, as the user scrolls, creating a dynamic visual transition. The background can be fixed in position relative to the viewport.

This pattern allows users to upload files by dragging and dropping them onto a designated area, often featuring visual feedback, progress indicators, and potentially appearing within a modal dialog. Notable behavior: Drag and Drop; File Selection; Idle.

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

Desktop, Onboarding, Decision Making, Accessibility, Web, Español, English, Modal, Button, Steps, Dropdown Menu, Text Input, Image / Illustration, Close Overlay, Facebook

Desktop, Decision Making, Awareness, Accessibility, Web, English, Animation, User Selection, Drag & Drop Gesture, Timeline, Image / Illustration, Button, Steps, GIPHY

This pattern presents a multi-step modal dialog that overlays the entire screen, often used for onboarding new users or drawing attention to important information. It guides users through a sequence of steps, typically featuring pagination for navigation and potentially including images, illustrations, or hypertext links to provide additional context or actions. Notable behavior: Opening and closing a modal; Navigating through sequential steps; Modal open/closed.

Desktop, Decision Making, Apple OS, macOS, Español, Alert Dialog, Progress State, Close Overlay, Hover Event, Image / Illustration, Apple

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

Displays a dedicated empty state within a sidebar or side panel, often featuring an illustration and hypertext links to guide users on initial content creation or onboarding steps.

This pattern utilizes an illustration or meme within an empty state user interface to provide context, engage users, or add humor. It often includes hypertext links to guide users toward next steps or relevant information.

Desktop, Onboarding, Web, Español, Text Input, Photo, Button, Price, Favorite Button, Hypertext Links, Image / Illustration, Dropdown Menu, MercadoLibre

This pattern describes a security-focused top banner, typically integrated into or positioned near a navigation bar on desktop web applications. Its primary purpose is to convey critical security information or alerts, guiding users in decision-making processes. It often includes elements like an avatar, search input, and an image or illustration to enhance clarity and user engagement. Notable behavior: Top-of-viewport.

This pattern presents a context menu, activated by a right-click event, offering various options for maximizing a window. It is commonly found in desktop or browser environments, enhancing user control over window display. Notable behavior: Right Click.

A dynamic visual effect that simulates an explosion of confetti, typically used to celebrate user actions or provide positive feedback.

Applies a zoom-out visual transition to an element, typically an image or illustration, when a user hovers over it. This interaction provides immediate visual feedback, indicating interactivity and drawing attention to the element on desktop web interfaces.

Presents a dedicated screen to confirm a significant user action, ensuring explicit consent and heightened awareness before proceeding. This pattern is crucial for irreversible operations, often featuring clear calls to action and supporting visuals.