# Helvetia Design System > Web component design system for Baloise/Helvetia products. Components are built with Stencil and shipped as framework-agnostic custom elements, with first-class wrappers and usage guidance for HTML, React, and Angular. Accessible (WCAG 2.2 AA), responsive (320px–2560px), and driven by design tokens. ## Docs - [Getting Started](https://helvetia-design.vercel.app/?path=/docs/development-getting-started--getting-started) - [Component](https://helvetia-design.vercel.app/?path=/docs/development-component--component) - [Form](https://helvetia-design.vercel.app/?path=/docs/development-form--form) - [Theming](https://helvetia-design.vercel.app/?path=/docs/development-theming--theming) - [Internationalization](https://helvetia-design.vercel.app/?path=/docs/development-internationalization--internationalization) - [Testing](https://helvetia-design.vercel.app/?path=/docs/development-testing--testing) - [All Tokens](https://helvetia-design.vercel.app/?path=/docs/tokens-all-tokens--overview) - [Design Tokens Explained](https://helvetia-design.vercel.app/?path=/docs/tokens-design-tokens-explained--overview) - [Use Tokens in Code](https://helvetia-design.vercel.app/?path=/docs/tokens-use-tokens-in-code--overview) ## Components ### Actions - [Button](https://helvetia-design.vercel.app/?path=/docs/components-actions-button-button--button): Button provides a clickable element for triggering actions, submitting forms, or navigating — supporting text, icons, or both. - [Close](https://helvetia-design.vercel.app/?path=/docs/components-actions-close-close--close): Close renders a button element for closing or dismissing UI components with customizable size and color. ### Forms - [Checkbox](https://helvetia-design.vercel.app/?path=/docs/components-forms-checkbox-checkbox--checkbox): Checkbox renders a checkbox form control for selecting multiple options from a group with optional label and help text. - [Counter](https://helvetia-design.vercel.app/?path=/docs/components-forms-counter-counter--counter): Counter renders a numeric value flanked by decrease and increase buttons. - [Datepicker](https://helvetia-design.vercel.app/?path=/docs/components-forms-datepicker-datepicker--datepicker): Datepicker renders a masked date input field with an interactive calendar popup for date selection. - [File Upload](https://helvetia-design.vercel.app/?path=/docs/components-forms-fileupload-fileupload--fileupload): FileUpload renders a drag-drop file upload area with optional file list, validation, and form field integration. - [Input](https://helvetia-design.vercel.app/?path=/docs/components-forms-input-input--input): Input renders a text input field with validation, masking, autocomplete, and optional help/error messaging. - [Label](https://helvetia-design.vercel.app/?path=/docs/components-forms-label-label--label): Label renders a semantic HTML label element for form inputs with optional required indicator and customizable styling. - [Number Input](https://helvetia-design.vercel.app/?path=/docs/components-forms-number-input-number-input--number-input): Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation. - [Phone Input](https://helvetia-design.vercel.app/?path=/docs/components-forms-phone-input-phone-input--phone-input): Phone input renders an international phone number field with a country picker (flag + calling code) and a national-number input that live-formats as the user types. - [Radio](https://helvetia-design.vercel.app/?path=/docs/components-forms-radio-radio--radio): Radio renders a radio button form control for selecting one option from a group with optional label and help text. - [Segment](https://helvetia-design.vercel.app/?path=/docs/components-forms-segment-segment--segment): Segment renders a group of button-like controls for selecting a single option from multiple choices with toggle behavior. - [Select](https://helvetia-design.vercel.app/?path=/docs/components-forms-select-select--select): Select renders an accessible single- or multi-select dropdown backed by Slim Select, with full form association and the standard DS field wrapper (label, description, validation). - [Slider](https://helvetia-design.vercel.app/?path=/docs/components-forms-slider-slider--slider): Slider renders a noUiSlider-backed slider with validation and label/description messaging. - [Textarea](https://helvetia-design.vercel.app/?path=/docs/components-forms-textarea-textarea--textarea): Textarea renders a multi-line text input field with validation, resizing, and optional help/error messaging. - [Toggle](https://helvetia-design.vercel.app/?path=/docs/components-forms-toggle-toggle--toggle): Toggle renders a switch-like form control for toggling between on/off states with optional label and help text. ### Indicators - [Badge](https://helvetia-design.vercel.app/?path=/docs/components-indicators-badge-badge--badge): Badge displays a small indicator or counter on a child component to highlight notifications, counts, or status information. - [Hint](https://helvetia-design.vercel.app/?path=/docs/components-indicators-hint-hint--hint): Hint displays contextual help via an info-circle trigger button. - [Progress Bar](https://helvetia-design.vercel.app/?path=/docs/components-indicators-progress-bar-progress-bar--progress-bar): Progress bar displays a visual indicator of progress or completion for a task or operation with percentage and label. - [Spinner](https://helvetia-design.vercel.app/?path=/docs/components-indicators-spinner-spinner--spinner): Spinner displays an animated loading indicator with customizable color, size, and variation. - [Tag](https://helvetia-design.vercel.app/?path=/docs/components-indicators-tag-tag--tag): Tag renders a compact label element for categorizing, filtering, or marking content with optional close button. ### Media - [Brand Icon](https://helvetia-design.vercel.app/?path=/docs/components-media-brandicon-brandicon--brandicon): Icon displays SVG icons with customizable color, size, rotation, and optional tile background. - [Icon](https://helvetia-design.vercel.app/?path=/docs/components-media-icon-icon--icon): Icon displays SVG icons with customizable color, size, rotation, and optional tile background. - [Logo](https://helvetia-design.vercel.app/?path=/docs/components-media-logo-logo--logo): Logo displays animated Baloise or Helvetia brand logos with customizable color, size, and responsive sizing. - [Shape](https://helvetia-design.vercel.app/?path=/docs/components-media-shape-shape--shape): Shape renders decorative geometric shapes with customizable color, size, rotation, and variation. ### Navigation - [App Navbar](https://helvetia-design.vercel.app/?path=/docs/components-navigation-appnavbar-app-navbar--app-navbar): AppNavbar provides semantic navigation with responsive sidebar menu and keyboard support. - [Pagination](https://helvetia-design.vercel.app/?path=/docs/components-navigation-pagination-pagination--pagination): Pagination provides navigation controls for moving between pages of content with customizable size, alignment, and layout. - [Steps](https://helvetia-design.vercel.app/?path=/docs/components-navigation-steps-steps--steps): Steps coordinates ds-step and ds-step-panel children into an accessible stepped interface, supporting panels and navigation variants. - [Tabs](https://helvetia-design.vercel.app/?path=/docs/components-navigation-tabs-tabs--tabs): Tabs coordinates ds-tab and ds-tab-panel children into an accessible tabbed interface, supporting panels and navigation variants. ### Overlays - [Drawer](https://helvetia-design.vercel.app/?path=/docs/components-overlays-drawer-drawer--drawer): Drawer displays a panel that slides up from the bottom of the screen. - [Modal](https://helvetia-design.vercel.app/?path=/docs/components-overlays-modal-modal--modal): Modal displays content in a dialog overlay using the native dialog element. - [Notification](https://helvetia-design.vercel.app/?path=/docs/components-overlays-notification-notification--notification): Notification presents inline feedback messages for success, warning, error, or informational states with optional close action. - [Popup](https://helvetia-design.vercel.app/?path=/docs/components-overlays-popup-popup--popup): Popup displays anchored overlay content positioned relative to a trigger element. - [Sheet](https://helvetia-design.vercel.app/?path=/docs/components-overlays-sheet-sheet--sheet): Sheet displays a fixed panel anchored to the bottom of the viewport. - [Snackbar](https://helvetia-design.vercel.app/?path=/docs/components-overlays-snackbar-snackbar--snackbar): Snackbar displays brief feedback messages at the bottom of the screen with optional action buttons and dismissal control. - [Toast](https://helvetia-design.vercel.app/?path=/docs/components-overlays-toast-toast--toast): Toast displays temporary notification messages that appear at the top of the page and auto-dismiss with optional action buttons and close control. - [Tooltip](https://helvetia-design.vercel.app/?path=/docs/components-overlays-tooltip-tooltip--tooltip): Tooltip displays contextual information when users hover over, focus on, or tap a trigger element. ### Structure - [Accordion](https://helvetia-design.vercel.app/?path=/docs/components-structure-accordion-accordion--accordion): Accordion displays collapsible content sections with open/close toggle buttons and optional animations. - [App Footer](https://helvetia-design.vercel.app/?path=/docs/components-structure-appfooter-app-footer--app-footer): AppFooter renders application level legal links, language selection, and social links. - [Card](https://helvetia-design.vercel.app/?path=/docs/components-structure-card-card--card): Card groups related content together in a contained, visually distinct container with optional header and footer. - [Carousel](https://helvetia-design.vercel.app/?path=/docs/components-structure-carousel-carousel--carousel): Carousel coordinates ds-carousel-item children into a scrollable, accessible slide interface. - [Content](https://helvetia-design.vercel.app/?path=/docs/components-structure-content-content--content): Content arranges content with flexible layout, alignment, and spacing options for structural layouts. - [Data](https://helvetia-design.vercel.app/?path=/docs/components-structure-data-data--data): Data displays a list of label-value pairs in a organized, accessible format. - [Divider](https://helvetia-design.vercel.app/?path=/docs/components-structure-divider-divider--divider): Divider renders a visual separator line for grouping or distinguishing content sections. - [Heading](https://helvetia-design.vercel.app/?path=/docs/components-structure-heading-heading--heading): Heading renders semantic HTML heading elements (h1–h6) with flexible styling options for visual hierarchy independent of markup level. - [List](https://helvetia-design.vercel.app/?path=/docs/components-structure-list-list--list): List renders semantic HTML list elements (ordered or unordered) for grouping related items. - [Root](https://helvetia-design.vercel.app/?path=/docs/components-structure-root-root--root): Root is a root wrapper component that provides global configuration, focus management, and responsive behavior context for all design system components. - [Stack](https://helvetia-design.vercel.app/?path=/docs/components-structure-stack-stack--stack): Stack arranges child elements in a vertical or horizontal layout with customizable spacing and alignment options. - [Text](https://helvetia-design.vercel.app/?path=/docs/components-structure-text-text--text): Text renders paragraph and article content with flexible sizing, styling, and semantic emphasis options. ## Optional - [llms-full.txt](https://helvetia-design.vercel.app/llms-full.txt): Full API reference (props, events, methods, slots, parts, CSS custom properties) and usage guidance for every component, concatenated into a single file.