Pages
Custom Element
What is a Custom Element?
The Custom Element offers great flexibility by allowing you to embed any SVG in your visualization. You can use the custom element as a decorative visual accent or as a dynamic background for other UI elements. Its versatility makes it perfect for enhancing your user interface with unique designs and effects.
Custom elements can be used to:
- Add dynamic visual accents to enhance the design
- Serve as backgrounds for cards or other UI elements
- Integrate animated SVG elements to create engaging visual effects
- Improve the overall aesthetic of your layout with SVG-based graphics
The custom element's appearance and behavior can be tailored by customizing the SVG content and applying animations directly within the SVG.
Overview of Custom Element Use Cases
| Use Case | Description | Example Use Case |
|---|---|---|
| Custom Background | The custom element serves as a background for other UI components, providing a visually appealing backdrop. | Use as a card background in a dashboard |
| Visual Accent | Acts as a highlight or accent within your design, adding style or emphasizing particular elements. | Decorative SVG to emphasize buttons or icons |
| Dynamic Animations | Integrates animated SVGs to bring movement or interactivity to your design. | Animated fan or rotating gear icon |
| Aesthetic Enhancement | Enhances the overall look of your UI by incorporating SVG graphics as part of your layout. | Decorative border or interactive element |
Custom Background
A flexible SVG background that can be used to add a visual touch to your cards, buttons, or other containers.
- Use case: Use as a background element for a card or a section of the UI, creating a unique visual effect.
- Typical targets: Card components, containers, sections of the page
Requires embedding the SVG and adjusting it to fit the layout of your UI elements.
Visual Accent
A decorative SVG accent that can be used to highlight specific elements or add a visual emphasis.
- Use case: Add a decorative visual accent to a button, icon, or section header.
- Example: Use a rotating SVG icon on a button to draw attention.
Recommended when you want to improve the look and feel of UI components with minimal interaction.
Dynamic Animations
The Custom Element can incorporate animated SVGs, making it ideal for adding motion or interactivity to your design.
- Use case: Animate a gear, fan, or icon to signify activity or process.
- Example: Use an animated fan blade icon to indicate the system is processing or running.
This is perfect for cases where you need visual feedback or want to enhance the user experience with interactive visuals.
Aesthetic Enhancement
A decorative SVG element used to improve the visual appeal of your interface, whether as a border, background, or other visual elements.
- Use case: Add a decorative SVG frame around content or as a background element.
- Example: Use a complex SVG pattern to enhance the layout or section headers.
Ideal for making your UI look polished and professional with minimal effort.
Summary
The Custom Element is an incredibly versatile component that allows you to enhance the visual aspect of your UI. Whether used for backgrounds, accents, animations, or aesthetic improvements, it can be tailored to meet various design needs.
| Use Case | Best For | Notes |
|---|---|---|
| Custom Background | Visual background for cards or containers | Flexible and adaptable |
| Visual Accent | Adding emphasis or decoration to UI elements | Subtle yet impactful design |
| Dynamic Animations | Animated SVGs for interactive visuals | Adds motion or dynamic effects |
| Aesthetic Enhancement | Improving the overall look of the interface | Uses SVG graphics for design |