> For the complete documentation index, see [llms.txt](https://vu-custom.gitbook.io/vu-custom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vu-custom.gitbook.io/vu-custom/vu-os-best-practices-platform-guides/element-type-considerations.md).
# Element Type Considerations
The below are standard element types VU may configure within a template in the process of building templates for each product. Each element has its own set of defined functionality, which may lead to
#### Image Upload:
The Image Upload Element enables users to upload their own images, which are then applied as textures to specific areas of a 3D model.
#### How It Works
1. User Upload: The user uploads artwork in an accepted web-ready format (PNG, JPG, SVG). Production formats like EPS or AI are not supported. The uploaded image is stored locally in the browser's IndexedDB or LocalStorage for the session.
2. Modal Window: By default, a modal window appears after upload, allowing the user to perform manipulations:
1. Resize: Zoom in and out.
2. Rotate & Mirror: Adjust the image orientation.
3. Align: Position the image within the designated customizable area.
4. This modal can be skipped via configuration, in which case the image is applied directly as a texture.
3. Quality Check: The modal includes built-in artwork quality checks for size and DPI. It warns the user if the image quality is insufficient for the defined physical production size but allows them to proceed.
4. Overlay & Masking: The modal can display an overlay representing the customizable area (e.g., the shape of a sock) and can use a mask file to crop the user's image to fit a specific shape (e.g., a leaf).
5. Storage: The original, un-manipulated artwork is stored on S3. All manipulation metrics (scale, rotation, etc.) are saved in the recipe to recreate the final design for production.
#### List:
The list element is commonly used when configuring an array of values a user can select from. The list the array is then determined in what format it should be presented through the customizer. Below are examples of different formats of the list element. All of the containers each format are configured in still have the ability to be styled on the FE
Visibility Control Mechanisms - Each visibility function manipulates the DOM and element state using the following strategies:
* CSS Class Toggle: Adds or removes the CUSTOMIZER\_HIDDEN class to control visual display.
* Data Attribute Management: Sets or clears the data-hidden attribute to track visibility state.
* Optional Disabling: Elements may be programmatically disabled to prevent interaction.
These functions are invoked during runtime by the customizer engine to reflect configuration-driven presentation logic. They ensure that only relevant UI components are visible based on user selections, tag filters, and platform-specific constraints.
#### Color Picker:
The Color Picker Element allows users to select a custom color from a color wheel or spectrum, rather than from a pre-defined set of swatches (which are typically handled by the List Element).
Methods:
* clearColor(): Clears the current color selection, reverts the affected materials to their default state, restores the input to its default color, and triggers a change event with an empty value.
* reset(): A convenience method that calls clearColor() and then triggers an update of the Summary Element.
#### Layout:
The Layout Element is functionally similar to the Information Element but is simplified to handle only one version of content at a time. It is also used for displaying read-only, user-guiding information.
Methods:
* fetchContent(url): Retrieves content from a URL and returns the response text.
* setContent(html): Injects HTML content into the element.Button:
#### Information:
The Information Element is designed to display read-only content that helps guide a user while they are making choices. Its primary feature is the ability to store multiple versions of content and dynamically switch between them based on user interaction with other elements.
Methods:
* toggleOptionVisibility(code, isVisible): Shows or hides a specific content piece by its code.
* hideAllOptions(): Hides all content pieces within the element.
* showAllOptions(): Shows all content pieces.
* reset(): Restores all content pieces to their initial hidden states.
#### Summary:
The Summary Element provides a real-time, read-only summary of all the choices a user has made during their customization session. It automatically reflects the current state of the "recipe."
After each update, it emits a SUMMARY\_UPDATED event, which can be used to trigger other custom logic if needed.
#### Input:
The Input Element is a fundamental way to capture text-based personalization from a user.
The element can be configured to appear in one of three ways:
* Single-Line Input: A standard text field for single-line entries like a name or number.
* Multi-Line (Text Area): A single block of text where users can type multiple lines and paragraphs. This is ideal for blocky text, such as a custom message on a blanket tag.
* Multi-Line (Individual Inputs): A series of separate single-line text fields, which is useful when each line needs independent validation or positioning.
