+ A link component is a navigational element that directs users to another page or section within an application.
+
+
+
+ Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages. Links can be paired with other elements to create cohesive designs, enhancing the digital experience by providing smooth transitions and interaction cues.
+
+
+ Types of Links
+
+
+ Links in an interface serve as vital elements for navigation and interaction. Multiple types of links are available to establish hierarchy, provide visual prominence, and enhance flexibility, guiding users towards their goals efficiently. With distinct styling and behaviors, links can help streamline user flows and create a cohesive user experience.
+
+
Simple Links
+
+ Basic anchor links with customizable colors and typography styles that inherit properties from the Typography component. This allows flexibility in styling with options like various text sizes or variants.
+
+
+
+
+ Simple Link
+
+
+
+
+
Customized Links
+
+ The links can be customized in the below mentioned way
+
+
1. Color
+
Nomally the color of Sistent Link is green , but on adding styling properties, You can customize link colors with predefined values such as primary, secondary, error, success, warning, info, or inherit existing text colors like Blue, Red.
+
+
+
+
+ Customized Link 1
+
+
+
+
+
2. Underlining
+
+ Also known as ghost buttons, text buttons are mostly just what the
+ name implies; they are buttons without fills or borders which might
+ just have a specific text styling and color to denote different
+ states for easier identification.
+
+
+
+
+ Customized Link 2
+
+
+
+
+
+
3. Variants
+
+ Links can have various text styles using the different styling property
+
+
+
+
+ Customized Link 3
+
+
+
+
+
+ Security
+
+
+ When using target="_blank" with links, it's crucial to include
+ rel="noopener" or rel="noreferrer" for security reasons:
+
+
+ - Prevent Access:
rel="noopener" prevents the new page from accessing the
+ window.opener property, securing your original page from potential malicious redirects.
+ - Avoid Referer Leakage:
rel="noreferrer" not only blocks the new page's
+ access to your original page but also stops the Referer header from being sent, protecting user privacy.
+ - Security Risk Mitigation: Using these attributes reduces the risk of phishing attacks
+ and ensures that your site maintains control over its navigation and data.
+
+
+ By following these practices, you can enhance the security of your web application and protect your users.
+
+
+
+
+ Optimized Rendering of Links Using
+
+
+
+ useMemo is a React hook that helps optimize the rendering of link components by memorizing computed values, which prevents unnecessary re-renders.
+
+
Docker Extension
- 
Docs
- 
Meshery Catalog
-- 
Kanvas
+- 
Kanvas
- 
Landscape
- 
ImageHub
- 
Meshery
diff --git a/src/assets/brand/kanvas-brand-kit.zip b/src/assets/brand/kanvas-brand-kit.zip
new file mode 100644
index 000000000000..99e69096cdb8
Binary files /dev/null and b/src/assets/brand/kanvas-brand-kit.zip differ
diff --git a/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.png b/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.png
index cd92997fc832..1181c066efdc 100644
Binary files a/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.png and b/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.png differ
diff --git a/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.svg b/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.svg
index 06a8d46404b3..d152413e26f7 100644
--- a/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.svg
+++ b/src/assets/images/kanvas/horizontal/kanvas-horizontal-color.svg
@@ -3,39 +3,35 @@