import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as o,o as i}from"./app-BZ-6COYf.js";const a={};function s(r,e){return i(),t("div",null,e[0]||(e[0]=[o('<h2 id="human-connection-styleguide" tabindex="-1"><a class="header-anchor" href="#human-connection-styleguide"><span>Human Connection - Styleguide</span></a></h2><p>This Design System provides our team with essential components and guidelines to achieve a consistent user experience accross our applications.</p><h3 id="documentation" tabindex="-1"><a class="header-anchor" href="#documentation"><span>Documentation</span></a></h3><p>If you are searching for more technical information for the UI &amp; API, you can find it in the <a href="https://docs.human-connection.org/nitro" target="_blank" rel="noopener noreferrer">HC Documentation</a>.</p><h3 id="how-to-use-it" tabindex="-1"><a class="header-anchor" href="#how-to-use-it"><span>How to use it</span></a></h3><p>Use the system&#39;s components to solve common UI problems like layout, typography, displaying data or data input.</p><p>When no component fits your case, either extend an existing one or create a new one.</p><h3 id="extending-existing-components" tabindex="-1"><a class="header-anchor" href="#extending-existing-components"><span>Extending existing components</span></a></h3><p>When extending components, make sure not to break existing features. If you really need to, it might be better to create a new one and mark the existing component as <code>deprecated</code></p><h3 id="creating-new-components" tabindex="-1"><a class="header-anchor" href="#creating-new-components"><span>Creating new components</span></a></h3><p>Keep a few things in mind when creating a new component:</p><ul><li>Keep it simple</li><li>Keep it extendable</li><li>Use Design Tokens wherever needed</li><li>Document it</li></ul><h3 id="resources" tabindex="-1"><a class="header-anchor" href="#resources"><span>Resources</span></a></h3><p>If you would like to become a component superhero feel free to dive into the <a href="https://pablohpsilva.github.io/vuejs-component-style-guide/#/" target="_blank" rel="noopener noreferrer">Vuejs Component Style Guide</a>.</p>',14)]))}const d=n(a,[["render",s],["__file","Introduction.html.vue"]]),h=JSON.parse('{"path":"/styleguide/src/styleguide/docs/Introduction.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Human Connection - Styleguide","slug":"human-connection-styleguide","link":"#human-connection-styleguide","children":[{"level":3,"title":"Documentation","slug":"documentation","link":"#documentation","children":[]},{"level":3,"title":"How to use it","slug":"how-to-use-it","link":"#how-to-use-it","children":[]},{"level":3,"title":"Extending existing components","slug":"extending-existing-components","link":"#extending-existing-components","children":[]},{"level":3,"title":"Creating new components","slug":"creating-new-components","link":"#creating-new-components","children":[]},{"level":3,"title":"Resources","slug":"resources","link":"#resources","children":[]}]}],"git":{"createdTime":1770201138000,"updatedTime":1770201138000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.58,"words":174},"filePathRelative":"styleguide/src/styleguide/docs/Introduction.md","localizedDate":"February 4, 2026","excerpt":"<h2>Human Connection - Styleguide</h2>\\n<p>This Design System provides our team with essential components and guidelines to achieve a consistent user experience accross our applications.</p>\\n<h3>Documentation</h3>\\n<p>If you are searching for more technical information for the UI &amp; API, you can find it in the <a href=\\"https://docs.human-connection.org/nitro\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">HC Documentation</a>.</p>"}');export{d as comp,h as data};