This article describes what components are and how they are used to define the elements of the page that will be tested.
Table of Contents
Looking for how to create contexts and components?
What are Components?
Components define the parts of a page you want to test.
Technically, components are a structural aspect of a web page's design and are defined by CSS selectors and may reference one or more HTML elements on a particular webpage.
Components enable less technical users to easily modify various aspects of the page design using generative AI and/or a visual editor. The alternative is coding changes by hand.
Components are defined at the context level and can be modified by one or more variants.
Here is a list of common components you might create for your project. Essentially, if it's an HTML element, then it can be a component.
| Components | Examples | Common HTML Elements |
| Headings |
|
h1 - h6 Sometimes non-heading elements are designed to look like headings. |
| Body copy, Labels |
|
p, label Sometimes divs are used to contain and style text. |
| Buttons, Links |
|
button, a Sometimes clickable elements may use a div |
| Lists, List Items |
|
ul, ol, li Sometimes non-list elements, like divs, are made to look and behave like lists. |
| Tables |
|
table Sometimes non-table elements are made to look and behave like tables. |
| Containers |
|
header, section, div, article, aside, footer |
Using Components
Components are used to target and apply CSS and Javascript changes for a given variant.
Evolv AI’s generative AI technology references components in variant descriptions to generate fully coded designs.
Defining components
Components can only be defined and used in the Evolv AI Web Editor.
The Web Editor is designed to make defining components easy by selecting them directly from a preview of your website. Once added, these components become available to all variables within a context.
Learn more: Creating a component
Modifying Components
Components can undergo various style property changes by individual variants. These changes can encompass text content, typography, spacing, borders, backgrounds, etc.
When a variant modifies a component, an orange dot indicator appears next to the component (see bottom left of image below) in the listing. This indicator helps you track the altered components in the selected variant.
Best Practices
For efficient and organized testing, consider these best practices when working with components:
- Plan components beforehand – Add components for your intended variables before creating any variants. This practice streamlines the design and testing process.
- All in the name – Give each component a distinct, descriptive name that aligns with the aspect of the customer experience you intend to change. This allows you and others to easily understand what the component refers to.
- Avoid Conflicts – When planning your variables and variants, ensure that a variant in one variable does not target the same or conflicting design aspect as another variant in a different variable. This prevents design conflicts and ensures a coherent user experience when variants are combined together. Learn more: About Variables and Variants