Vev UI components examples

Vev

A set of color palette swatches organized into Primary, Accent, and Background categories. Each category displays a row of rounded square color swatches, with some swatches highlighted by an outer border.

• Color picker

Vev

A success toast notification confirming that code has been copied to the clipboard.

• Notification Toast

Vev

A dark-themed code block displaying an HTML script tag for embedding content, featuring a copy-to-clipboard icon button.

• Code block

Vev

A dark-themed color picker panel featuring a large saturation/brightness area, hue and opacity sliders, HEX input, and a swatches section.

• Color picker

Vev

A dark-themed properties inspector panel for a design tool, featuring sections for Text, Pin, Style, Background, and Margin. It includes various controls like dropdowns, inputs, toggles, and icon buttons for adjusting layout, typography, and styling.

• Toolbox

Vev

A dark-themed sidebar panel showing a hierarchical list of page elements, with a selected text element highlighted in blue.

• Vertical navigation

Vev

A vertical stack of three outlined buttons for logging in with third-party providers: Google, Facebook, and Azure AD. Each button features the provider's logo and text.

• Social login button

Vev

A card displaying a project thumbnail, title, author, and category tags.

• Card

Vev

A large text block displaying a customer quote and attribution, set against a partially overlapping pink background shape.

• Testimonial

Vev

A dark-themed global navigation header featuring a logo, primary navigation links, and two call-to-action buttons.

• Header

Vev

A large feature card with a yellow top border, a headline, a right arrow icon, and a prominent image showcasing a digital showreel.

• Card

Vev

A comprehensive website footer featuring a multi-column layout for navigation links, social media icons, copyright information, and a distinctive 'Made with Vev' badge.

• Footer