Build smarter components, launch faster, and stay on-brand.
Design and content creation in Vev just got a whole lot more powerful. Introducing States and Variants, the game-changing feature that transforms how you build components. Whether you're crafting an intricate design system or rapidly launching a new landing page, States and Variants help you stay consistent, work faster, and collaborate better.
Let’s dive into what this means and how it changes your workflow.
What are States and Variants?
At their core, States define how a component behaves (like hover or active effects), while Variants define different visual or structural versions of that same component (like light vs. dark themes or compact vs. detailed layouts).
Together, they let you build one master component, define its behaviors and appearances, and reuse it everywhere (with consistency baked in!).
Use It Like a Pro: 3 Powerful Ways to Use States and Variants
1. Build and Maintain a Unified Component System
Ideal for: design system creators and advanced designers
Say goodbye to scattered, inconsistent components. With States and Variants, you can now:
- Create a single Main Component, like a card for news or product previews.
- Define universal States (e.g., how the card reacts on hover).
- Add flexible Variants (e.g., card with image vs. card with video).
- Share it across your entire project. Change it once, and it updates everywhere!
This means your design system becomes a true source of truth: consistent, clean, and always up-to-date.
Benefits:
- Maintain brand integrity across teams
- Make global design updates in seconds
- Speed up design without compromising quality
2. Rapid Production with Ready-Made Assets
Ideal for: marketers, content editors, and time-crunched teams
Need to launch a product microsite by Friday? No problem.
Now, content teams can drag-and-drop prebuilt components with built-in States and Variants—like a Hero section with hover animations, or a Feature grid with light/dark variants—and get to publishing right away.
Benefits:
- Launch faster, without waiting on devs
- Skip complex design work, and just focus on editing content
- Ensure quality and interactivity out of the box
3. Seamless Collaboration Between Designers and Content Creators
Ideal for: cross-functional teams
Designers can now create smart, interactive building blocks that content creators simply reuse. For example, a Team Member Profile block can include all styling (States) and layout options (Variants). Content creators then just fill in names, titles, and photos. No broken designs, no bottlenecks.
Benefits:
- Designers focus on system-level thinking
- Content creators work independently with confidence
- Everyone ships faster, and with fewer errors
Why States and Variants are Important
With States and Variants, Vev becomes not just a platform for designing beautiful pages, but a system for building, scaling, and collaborating on those pages in ways that were previously slow, messy, or inconsistent.
Consistency by default
Every component behaves and looks exactly how it should, every time.
Faster time-to-publish
Reusable parts mean less time redesigning or rebuilding.
Empowered teams
Designers focus on systems. Content creators focus on storytelling. Everyone wins.
Start Building Smarter and Faster with Vev
Ready to scale your design system, empower more teammates, and launch faster than ever? Vev makes it easy. With a host of powerful tools, layout options, immersive effects, and animations all easy to access in Vev’s visual-first builder, creating for the web has never been easier. When you're done, publish anywhere on the web, including to your existing CMS.