Scale Design System

repository·main·Indexed 19 days ago

A digital design system for Telekom products providing production-ready components, design tokens, and documentation. It is available in both a branded Telekom version and a neutral open-source version, with implementation examples for Angular, Gatsby, Nuxt (including Nuxt 3), and React.

Tokens: 192.2K
Snippets: 435
Records: 893
Agent score: 63%

What's inside Scale

Use the scale-helper-text component
main
The scale-helper-text component is a superset of the default anchor <a> element, used to display supplementary information or validation messages. It supports different visual variants and allows for custom icons and text via slots.
https://github.com/telekom/scale/blob/main/packages/components/src/components/helper-text/readme.md
Use the scale-telekom-mobile-menu component
main
The scale-telekom-mobile-menu is a mobile navigation component. It supports properties for branding and navigation control, emits events for closing the menu, and exposes shadow parts for styling.
https://github.com/telekom/scale/blob/main/packages/components/src/components/telekom/telekom-mobile-menu/readme.md
Use the scale-loading component
main
The scale-loading component is a loading spinner used to indicate progress or loading states. It supports different sizes, alignments, and visual variants to match your UI requirements.
https://github.com/telekom/scale/blob/main/packages/components/src/components/loading-spinner/readme.md
Browser support for Scale components
main
Scale components are designed to work with common evergreen browsers. Currently, the library supports 11 different browser types and versions. For specific details regarding supported versions and future compatibility, refer to the browser support matrix provided in the official documentation assets.
https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/setup_and_info/Browser_Support_de.md
Use the scale-collapsible component
main
The scale-collapsible component provides a collapsible section interface. It can be used as a standalone component or as part of a <scale-accordion> to manage multiple collapsible sections.
https://github.com/telekom/scale/blob/main/packages/components/src/components/collapsible/readme.md
Use the scale-tab-nav component
main
The scale-tab-nav component is used to create tabbed navigation interfaces. It supports different sizing options and custom style injection via properties.
https://github.com/telekom/scale/blob/main/packages/components/src/components/tab-nav/readme.md
Use the scale-tab-header component
main
The scale-tab-header component provides a tab navigation interface. It supports customization via properties for size, selection state, and disabled status, and emits events when the selection changes or a tab is disabled.
https://github.com/telekom/scale/blob/main/packages/components/src/components/tab-header/readme.md
Use the scale-nav-segment component
main
The scale-nav-segment component is a navigation element used to represent segments within a navigation structure. It is a StencilJS-based component and is currently used as a dependency within the scale-app-header component.
https://github.com/telekom/scale/blob/main/packages/components/src/components/telekom/nav-segment/readme.md
Use the app-mega-menu component
main
The app-mega-menu is a component used to render large-scale navigation menus. It is a StencilJS-based component that accepts configuration for navigation items and state management for active routes. It is primarily used as a dependency within the scale-app-header component.
https://github.com/telekom/scale/blob/main/packages/components/src/components/telekom/app-mega-menu/readme.md
Use the ScaleCombobox component
main
The ScaleCombobox component provides a text input combined with a dropdown list. It allows users to select from a predefined list of options or type in a custom value. It supports keyboard navigation, accessibility (ARIA), and various visual states like disabled or invalid.
```
<scale-combobox
  label="Select a framework"
  placeholder="Type or select..."
></scale-combobox>
```
https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/combobox/Combobox.stories.mdx
Use the scale-menu-flyout-item component
main
The scale-menu-flyout-item component represents an individual item within a flyout menu. It supports various states such as being active, disabled, or behaving as a checkbox/radio item. It can also display a cascade arrow icon if configured.
https://github.com/telekom/scale/blob/main/packages/components/src/components/menu-flyout-item/readme.md
Use the scale-toggle-button component
main
The scale-toggle-button is a component used to create buttons that can be toggled between a selected and deselected state. It supports icon-only modes, various sizes, and customizable background variants.
https://github.com/telekom/scale/blob/main/packages/components/src/components/toggle-button/readme.md