Zurich Design System

https://zds.zurich.com/0.7.0/
Admin
The Zurich Design System provides resources, guidelines, design assets, and component libraries to...
Tokens:470,884
Snippets:4,673
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Import Design Tokens via CDN

Source: https://zds.zurich.com/0.7.0/getting-started/packages/design-tokens

Loads the @zurich/design-tokens package directly from a CDN into the HTML document's head. This is the quickest way to start using the design tokens without any local installation. Ensure the link is placed within the `<head>` section of your HTML.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link 
      rel="stylesheet"
      href="https://zds.zurich.com/0.7.0/@zurich/design-tokens/index.css" 
    />
  </head>
</html>
```

--------------------------------

### Z-Navigation Component with Menu, Routes, and Footer

Source: https://zds.zurich.com/0.7.0/organisms/navigation__web

Example of using the Z-Navigation component with comprehensive configurations for menu items, navigation routes (including icons), and footer links. This demonstrates a fully featured navigation setup.

```html
<z-navigation
  menu='[[{"text":"Section One","items":[{"text":"Subsection One","items":[{"text":"Sub-subsection One"},{"text":"Sub-subsection Two"}] },{"text":"Subsection Two"}]}],[{"text":"Section Two","items":[{"text":"Subsection One"},{"text":"Subsection Two"}]}]]'
  routes='[{"text":"Home","icon":"home:line"},{"text":"Contact us"}]'
  footer='[{"text":"Terms &amp; Conditions","href":""},{"text":"Privacy Policy","href":""},{"text":"Cookie Policy","href":""},{"text":"Accessibility","href":""}]'
>
</z-navigation>

```

--------------------------------

### Vue: Basic Setup with z-icon

Source: https://zds.zurich.com/0.7.0/getting-started/packages/web-components

Sets up a basic Vue application to use Zurich Web Components. It imports the global styles and mounts the main App component. This example focuses on integrating Web Components at the application level.

```ts
import { createApp } from 'vue';
import App from './App.vue';

import '@zurich/web-components/styles.css'; 

createApp(App).mount('#app');

```

--------------------------------

### Basic ActionMenu Usage

Source: https://zds.zurich.com/0.7.0/layouts/action_menu__angular

Demonstrates the basic usage of the ActionMenu component by rendering it with 'Example' as its content. This is a simple starting point for integrating the component.

```html
<za-action-menu>Example</za-action-menu>
```

--------------------------------

### Install @zurich/web-components package

Source: https://zds.zurich.com/0.7.0/getting-started/packages

After configuring authentication and the `.npmrc` file, this command installs the `@zurich/web-components` package from the specified registry. This is a typical NPM package installation command.

```bash
npm i @zurich/web-components
```

--------------------------------

### Install @zurich/dev-utils via npm

Source: https://zds.zurich.com/0.7.0/getting-started/packages/dev-utils

Installs the @zurich/dev-utils package as a development dependency using npm.

```bash
npm i -D @zurich/dev-utils
```

--------------------------------

### MobileNavBar HTML Usage Examples

Source: https://zds.zurich.com/0.7.0/organisms/mobile_nav_bar

Examples demonstrating how to implement the MobileNavBar component using HTML, showcasing different parameter configurations for custom styling and theming.

```html
<z-mobile-nav-barz-mobile-nav-barcustom='{"fill":"#06e7a3"}'/>'
```

```html
<z-mobile-nav-barz-mobile-nav-barcustom-str="fill:#06e7a3"/>"
```

```html
<z-mobile-nav-barz-mobile-nav-barz-theme="dark"/>"
```

--------------------------------

### Flag Component HTML Examples

Source: https://zds.zurich.com/0.7.0/atoms/flag

Examples demonstrating how to use the Flag component with different parameters for customization. Supports direct attribute setting or stringified JSON for custom properties.

```html
<z-flag custom='{"fill":"#06e7a3"}' />
```

```html
<z-flag custom-str="fill:#06e7a3" />
```

```html
<z-flag z-theme="dark" />
```

--------------------------------

### Install Web Components (NPM)

Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/how_it_works

Installs the Web Components package as a development dependency. This enables local usage and leverages TypeScript and JSDocs for enhanced development experience.

```sh
npm i -D @zurich/web-components
```

--------------------------------

### React Setup for ZDS Web Components

Source: https://zds.zurich.com/0.7.0/getting-started/packages/web-components

Provides the basic React setup for rendering ZDS Web Components. It includes importing necessary React DOM functions and the global styles for the web components. This setup ensures that the web components are correctly initialized within the React application.

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

import '@zurich/web-components/styles.css';

const root = document.getElementById('root') as HTMLElement;

ReactDOM
  .createRoot(root)
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );

```

--------------------------------

### Rating Component Basic HTML Example

Source: https://zds.zurich.com/0.7.0/inputs/rating

A basic HTML example demonstrating the usage of the z-rating component with custom fill color and theme.

```html
<z-rating z-ratingcustom='{"fill":"#06e7a3"}' z-theme="dark"/>
```

--------------------------------

### RangeInput Component Examples

Source: https://zds.zurich.com/0.7.0/inputs/range_input__vue_framework=vue

Provides various examples of using the ZvRangeInput component with different parameters and attributes. It covers setting the initial model value, labels, configuration (line/shaped), help text, and range limits.

```html
<zv-range-input
  :model="[1,5]"
  label="Range input" />
```

```html
<zv-range-input label="Range input" />
<zv-range-input
  config="line"
  label="Range input" />
```

```html
<zv-range-input>
  <em slot="label">
    Range input
  </em>
</zv-range-input>
```

```html
<zv-range-input
  help-text="This is a help text"
  label="Range input" />
<zv-range-input
  help-text="This is a help text"
  label="Range input"
  invalid />
<zv-range-input
  config="line"
  help-text="This is a help text"
  label="Range input" />
<zv-range-input
  config="line"
  help-text="This is a help text"
  label="Range input"
  invalid />
```

```html
<zv-range-input label="Range input">
  <em slot="help-text">
    Help text
  </em>
</zv-range-input>
```

```html
<zv-range-input
  :range="[1,10]"
  label="Range input" />
<zv-range-input
  :range="[1,10]"
  config="line"
  label="Range input" />
```

```html
<zv-range-input
  label="Range input"
  min="1" />
```

```html
<zv-range-input
  label="Range input"
  max="10" />
```

```html
<zv-range-input
  label="Range input"
  disabled />
<zv-range-input
  config="line"
  label="Range input"
  disabled />
```

```html
<zv-range-input
  label="Range input"
  invalid />
<zv-range-input
  config="line"
  label="Range input"
  invalid />
```

--------------------------------

### Install CSS Components via NPM

Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components

Installs the @zurich/css-components package using NPM. This command also installs its dependency, @zurich/design-tokens. It is suitable for local development and integration with NPM-style build systems.

```bash
npm i @zurich/css-components
```

--------------------------------

### Vue: Global Setup with Scripts

Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components

Shows the global setup for Vue applications, including importing base styles and JavaScript files in the main entry point for application-wide access.

```ts
import { createApp } from 'vue';
import App from './App.vue';

import '@zurich/css-components/base.css';   // Import base styles 
import '@zurich/css-components/javascript.js';   // Import scripts

createApp(App)
  .mount('#app');

```

--------------------------------

### Basic RadioSelect Example

Source: https://zds.zurich.com/0.7.0/inputs/radio_select__web

A fundamental example of the RadioSelect component with basic options and a label. It shows the default behavior and structure.

```html
<z-radio-select label="Basic Example">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</z-radio-select>
```

--------------------------------

### Install better-vsts-npm-auth (Bash)

Source: https://zds.zurich.com/0.7.0/getting-started/packages

Installs the better-vsts-npm-auth package globally using npm. This is a prerequisite for authenticating with Azure DevOps feeds.

```bash
npm i -g better-vsts-npm-auth
```

--------------------------------

### HTML Example with ButtonGroup and z-button (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/button_group__web

This example demonstrates how to use the ButtonGroup component in HTML, including adding 'z-button' elements as children to define the buttons within the group. No additional parameters are shown in this basic example.

```html
<z-button-group>
  <z-button>Button 1</z-button>
  <z-button>Dislike</z-button>
  <z-button>Like</z-button>
</z-button-group>

```

--------------------------------

### KpiValue Component HTML Example

Source: https://zds.zurich.com/0.7.0/data/kpi_value

This example demonstrates how to use the KpiValue component in HTML, including setting custom CSS properties using the 'custom' and 'custom-str' attributes, and applying a theme.

```html
<z-kpi-valuez-kpi-valuecustom='{"fill":"#06e7a3"}'/>
<z-kpi-valuez-kpi-valuecustom-str="fill:#06e7a3"/>
<z-kpi-valuez-kpi-valuez-theme="dark"/>
```

--------------------------------

### Install Design Tokens via NPM

Source: https://zds.zurich.com/0.7.0/getting-started/packages/design-tokens

Installs the @zurich/design-tokens package using NPM. This is suitable for local development and integration into NPM-style build systems. After installation, the CSS can be imported directly into your JavaScript or TypeScript files.

```bash
npm i @zurich/design-tokens
```

--------------------------------

### ImageStage Component Example (HTML)

Source: https://zds.zurich.com/0.7.0/molecules/image_stage

An example demonstrating how to use the ImageStage component with custom styling applied via a stringified JSON object for the 'custom' attribute.

```html
<z-image-stagez-image-stagecustom='{"fill":"#06e7a3"}'/>" />
```

--------------------------------

### HTML Example with ButtonGroup config parameter (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/button_group__web

This example shows how to configure the ButtonGroup component using the 'config' parameter. The 'config' string allows for specifying the type and size of the buttons within the group.

```html
<z-button-group config="{ type: 'primary', size: 'large' }">
  <z-button>Dislike</z-button>
  <z-button>Like</z-button>
</z-button-group>

```

--------------------------------

### Install vsts-npm-auth globally

Source: https://zds.zurich.com/0.7.0/getting-started/packages

This command installs the `vsts-npm-auth` tool globally, which is required for authenticating with private NPM registries like Azure DevOps. It ensures that authentication is always attempted.

```bash
npm i -g vsts-npm-auth --registry https://registry.npmjs.org --always-auth true --no-save
```

--------------------------------

### ButtonGroup Theme Customization Example

Source: https://zds.zurich.com/0.7.0/layouts/button_group

Illustrates how to set the theme for the ButtonGroup component. This example applies the 'dark' theme.

```html
<z-button-group z-theme="dark"/>
```

--------------------------------

### React: Global Setup for Components

Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components

Illustrates the global setup for React applications using Zurich CSS Components. This involves importing base styles and JavaScript files globally in the main entry point.

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

import '@zurich/css-components/base.css';   // Import base styles 
import '@zurich/css-components/javascript.js';   // Import scripts

const root = document.getElementById('root') as HTMLElement;

ReactDOM
  .createRoot(root)
  .render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );
```

--------------------------------

### SafeSpace Customization Example (HTML)

Source: https://zds.zurich.com/0.7.0/atoms/safe_space

This example shows how to apply custom CSS properties to the SafeSpace component, specifically setting the background color using the 'custom' object.

```html
<z-safe-space custom='{"fill":"#06e7a3"}'/>
```

--------------------------------

### Example: Using the Icon Component

Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components

Demonstrates the usage of the icon component within a HTML body, setting a dark theme and specifying an arrow icon. This example assumes the necessary design tokens and CSS components are already linked.

```html
<body z-theme="dark">
  <link
    rel="stylesheet"
    href="../@zurich/design-tokens/Icons.css"
  />
  <link
    rel="stylesheet"
    href="../@zurich/css-components/index.css"
  />

  <i
    z-icon="l"
    icon="arrow-down:line"
  ></i>
</body>
```

--------------------------------

### Install CSS Components (NPM)

Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/how_it_works

Installs the CSS components package as a development dependency. This allows for local usage and access to TypeScript and JSDocs features.

```sh
npm i -D @zurich/css-components
```

--------------------------------

### ProgressBar Theme Example (HTML)

Source: https://zds.zurich.com/0.7.0/atoms/progress_bar

This snippet illustrates how to set the theme for the ProgressBar component using the 'z-theme' attribute, with 'dark' as an example value.

```html
<z-progress-bar z-progress-bar z-theme="dark"/>
```

--------------------------------

### Form Customization Example (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/form

Demonstrates how to customize the Form component using the 'custom-str' attribute for margin and gap. This example shows a complete form structure with text inputs and a submit button.

```html
<z-form custom-str="margin: 10px; gap: 10px;">
  <z-text-input label="Name">
  </z-text-input>
  <z-text-input label="Email">
  </z-text-input>
  <z-text-input label="Password">
  </z-text-input>
  <z-button wide>
    Submit
  </z-button>
</z-form>
```

--------------------------------

### Avatar Component Theme Example (HTML)

Source: https://zds.zurich.com/0.7.0/molecules/avatar

This example demonstrates how to set the theme for the Avatar component using the 'z-theme' attribute. Supported themes are 'light' and 'dark', allowing for visual consistency with the application's theme.

```html
<z-avatarz-avatarz-theme="dark"/>
```

--------------------------------

### Alert Component API

Source: https://zds.zurich.com/0.7.0/molecules/alert

This section details the parameters available for the Alert component and provides examples of its implementation.

```APIDOC
## Alert Component

### Description
Alerts are interactive notifications that communicate direct and concise feedback to the user, with the option to add a simple action they can perform. They can have an associated icon (on the left) for the message and can be manually dismissed by the user.

### Implementations
- CSS Components
- Web Components

### Parameters

#### Custom Properties

- **`config`** (string) - Defines the state of the alert. Possible values are: `info`, `alert`, `negative` and `positive`.
- **`content`** (string) - The content of the alert.
- **`icon`** (string) - The icon to display with the alert.
- **`confirm-text`** (string) - The text for the confirmation button.
- **`hide-close`** (boolean) - Hides the close button.
- **`custom`** (object) - A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as a JS object in stringified JSON format.
  - **Example:** `<z-alert custom='{"fill":"#06e7a3"}'/>`
- **`custom-str`** (string) - The stringified version of the `custom` property. It follows the pattern `key:value;key:value;`, with the possibility of setting multiple values and spaces between the punctuation characters.
  - **Example:** `<z-alert custom-str="fill:#06e7a3"/>`
- **`z-theme`** (string) - Sets the theme of the component. Possible values are `light` and `dark`.
  - **Example:** `<z-alert z-theme="dark"/>`

### Customization

CSS Variable| Type| Description
---|---|---
`--z-alert--bg`| color| The background color of the alert.
`--z-alert--color`| color| The text color of the alert.

Both background and text colors can be customized using the `--z-alert--bg` and `--z-alert--color` custom properties.

### Request Example

```html
<z-alert custom-str="bg:#1BE59E; color: #04093C;">
  Custom alert
</z-alert>
```

### Response Example

(No specific response structure is defined for this component as it's a UI element. The examples above demonstrate its usage.)
```

--------------------------------

### Basic Select component usage

Source: https://zds.zurich.com/0.7.0/inputs/select__web

A fundamental example of the Select component, demonstrating its core functionality with a model binding and a list of options.

```html
<template>
  <Select label="Select an option" v-model="selectedValue" :options="options" />
</template>

<script setup>
import { ref } from 'vue';

const selectedValue = ref('A');
const options = ref([
  { value: 'A', text: 'Option A' },
  { value: 'B', text: 'Option B' },
  { value: 'C', text: 'Option C' }
]);
</script>
```

--------------------------------

### RangeInput Usage Examples

Source: https://zds.zurich.com/0.7.0/inputs/range_input__vue

Demonstrates how to use the ZvRangeInput component with various parameters and configurations.

```APIDOC
## RangeInput Parameters Use

### `modelValue`

Attention! If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

```html
<zv-range-input
  :model="[1,5]"
  label="Range input" />
```

### `label`

The `label` parameter is used to set the text label of the component. Make sure you always use it.

```html
<zv-range-input label="Range input" />
<zv-range-input
  config="line"
  label="Range input" />
```

Can also use the `label` slot:

```html
<zv-range-input>
  <em slot="label">
    Range input
  </em>
</zv-range-input>
```

### `config`

The `config` parameter is used to set the shape of the input between `lined` and `shaped`. Being omitted will render the default `shaped` shape.

```html
<zv-range-input label="Range input" />
<zv-range-input
  config="line"
  label="Range input" />
```

### `help-text`

The `help-text` parameter is used to provide additional assistance to the user.

```html
<zv-range-input
  help-text="This is a help text"
  label="Range input" />
<zv-range-input
  help-text="This is a help text"
  label="Range input"
  invalid />
<zv-range-input
  config="line"
  help-text="This is a help text"
  label="Range input" />
<zv-range-input
  config="line"
  help-text="This is a help text"
  label="Range input"
  invalid />
```

It can also use the `help-text` slot:

```html
<zv-range-input label="Range input">
  <em slot="help-text">
    Help text
  </em>
</zv-range-input>
```

### `range`

The `range` parameter is used to set the range of the input. It must be an array with two numbers. The first number is the minimum value and the second number is the maximum value.

```html
<zv-range-input
  :range="[1,10]"
  label="Range input" />
<zv-range-input
  :range="[1,10]"
  config="line"
  label="Range input" />
```

###### `min`

Instead of using `range` we can use just `min`. This overrides the `range` value.

```html
<zv-range-input
  label="Range input"
  min="1" />
```

###### `max`

Instead of using `range` we can use just `max`. This overrides the `range` value.

```html
<zv-range-input
  label="Range input"
  max="10" />
```

### Flags Usage Examples

#### `disabled`

```html
<zv-range-input
  label="Range input"
  disabled />
<zv-range-input
  config="line"
  label="Range input"
  disabled />
```

#### `invalid`

```html
<zv-range-input
  label="Range input"
  invalid />
<zv-range-input
  config="line"
  label="Range input"
  invalid />
```

```

--------------------------------

### Basic ZvNumberInput Usage in Vue

Source: https://zds.zurich.com/0.7.0/inputs/number_input__vue

Demonstrates the basic implementation of the ZvNumberInput component in a Vue template. It includes setting a label for the input field. This is a fundamental example for getting started with the component.

```html
<zv-number-input label="Number input" />
```

--------------------------------

### Z-Alert Configuration Examples

Source: https://zds.zurich.com/0.7.0/molecules/alert__web

Demonstrates how to use the 'config' attribute to set different alert states: info, alert, negative, and positive.

```html
<z-alert config="info">
  This is an info alert
</z-alert>
<z-alert config="alert">
  This is an alert alert
</z-alert>
<z-alert config="negative">
  This is a negative alert
</z-alert>
<z-alert config="positive">
  This is a positive alert
</z-alert>

```

--------------------------------

### Basic Promo Component Usage with Image

Source: https://zds.zurich.com/0.7.0/molecules/promo__react

Demonstrates the basic usage of the ZrPromo component, setting a header and an image source URL.

```jsx
<ZrPromo
  header="Promotional header"
  image-src="https://zds.zurich.com/0.7.0/sample.webp" />

```

--------------------------------

### Progress Tracker Reset Method Example

Source: https://zds.zurich.com/0.7.0/inputs/progress_tracker__web

Demonstrates how to call the `reset()` method on a ProgressTracker instance. This example includes a button to trigger the reset, which clears internal states and emits 'change' and 'restarted' events.

```html
<div
  style="display:grid;place-items:center;width:100%;"
>
  <z-progress-tracker>
  </z-progress-tracker>
  <z-button
    config="negative"
    icon="trash"
  >
  </z-button>
</div>

```

--------------------------------

### Basic ZrLoader Usage Examples

Source: https://zds.zurich.com/0.7.0/atoms/loader__react_framework=react

Demonstrates the basic usage of the ZrLoader component, including instances with no content, with a text content, and with content passed via the 'content' prop.

```html
<ZrLoader />
<ZrLoader>Loading text</ZrLoader>
<ZrLoader content="Loading text content" />

```

--------------------------------

### Define Carousel Slides with Slots (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/carousel__angular

This example illustrates how to define individual slides within the Carousel component using HTML slots. Each slide must use the 'slot' attribute with an incremental number, starting from 'slide-1'. This ensures the component correctly renders and manages each slide's content.

```html
<za-carousel config="center">
  <div slot="slide-1">
  </div>
  <div slot="slide-2">
  </div>
  <div slot="slide-3">
  </div>
  <div slot="slide-4">
  </div>
</za-carousel>
```

--------------------------------

### Import TextInput Component

Source: https://zds.zurich.com/0.7.0/inputs/text_input__react_framework=react

Demonstrates how to import the TextInput component. Ensure the correct path is used for your project setup.

```javascript
import { TextInput } from '@zenzu/ui';
```

--------------------------------

### Basic Progress Tracker Usage

Source: https://zds.zurich.com/0.7.0/inputs/progress_tracker__react

A basic example of using the ZrProgressTracker component without any specific configurations. It renders with default settings.

```html
<ZrProgressTracker />

```

--------------------------------

### ZResizer Component Output Example

Source: https://zds.zurich.com/0.7.0/functionalities/resizer__web

Example of the output format for the ZResizer component, likely representing dimensions and positions.

```json
{"x":0,"y":0,"width":16,"height":0,"top":0,"right":16,"bottom":0,"left":0}

```

--------------------------------

### Basic Z-Pagination with Pages Parameter

Source: https://zds.zurich.com/0.7.0/inputs/pagination__web

This example demonstrates the basic usage of the z-pagination component, setting the total number of pages using the 'pages' attribute. This is a fundamental configuration for the component.

```html
<z-pagination pages="10">
</z-pagination>
```

--------------------------------

### Forced Text Input Configuration (HTML)

Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/basic_concepts

Illustrates setting component configuration directly in the HTML using attributes. This method is efficient for configurations as it renders immediately.

```html
<z-text-input config="line"></z-text-input> <!-- ✅ -->
<z-text-input model="My text"></z-text-input> <!-- ❌ -->
```

--------------------------------

### SnapScroll Theme Example (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/snap_scroll

This example illustrates how to set the theme of the SnapScroll component to 'dark' using the 'z-theme' attribute.

```html
<z-snap-scroll z-theme="dark"/>
```

--------------------------------

### HTML: Example of text contrast adjustments with z-theme

Source: https://zds.zurich.com/0.7.0/foundations/themes/index

Illustrates how different text types (default, disabled, error, warning, success, info) adapt their colors for better contrast and readability within a section. This example shows the visual output of applying themes to text elements.

```html
<h3>Hello</h3>
<section>
  <div>
    <p>This is a text</p>
    <p z-text="disabled">
      Disabled text
    </p>
  </div>
  <div>
    <p z-text="error">
      Error text
    </p>
    <p z-text="warning">
      Warning text
    </p>
  </div>
  <div>
    <p z-text="success">
      Success text
    </p>
    <p z-text="info">
      Info text
    </p>
  </div>
</section>
```

--------------------------------

### EmptyState Web Component Implementation

Source: https://zds.zurich.com/0.7.0/molecules/empty_state

This snippet shows how to implement the EmptyState component as a Web Component. It includes examples of setting the theme and other common properties.

```html
<z-empty-state z-theme="dark"/>
```

--------------------------------

### Preset Text Input with JavaScript Initialization (HTML, JavaScript)

Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/basic_concepts

Shows how to pre-populate a text input component and set its configuration using JavaScript. The component still maintains self-control after initialization.

```html
<z-text-input></z-text-input>

<script type="module">
  const input = document.getElementById('my-input');
  input.model = 'My text'
  input.config = 'line'
</script>
```

--------------------------------

### ZvSelect Help Text Examples (Vue)

Source: https://zds.zurich.com/0.7.0/inputs/select__vue_framework=vue

Demonstrates various ways to implement help text for the ZvSelect component using the `help-text` parameter. Examples include basic help text, help text with an invalid state, and help text with the 'line' configuration. The `help-text` slot can also be used for custom help text content.

```html
<zv-select
  help-text="This is a help text"
  label="Select" />
<zv-select
  help-text="This is a help text"
  label="Select"
  invalid />
<zv-select
  config="line"
  help-text="This is a help text"
  label="Select" />
<zv-select
  config="line"
  help-text="This is a help text"
  label="Select"
  invalid />
```

```html
<zv-select label="Select">
  <em slot="help-text">
    Help text
  </em>
</zv-select>
```

--------------------------------

### Include CSS Components and JavaScript via CDN

Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components

Includes the main CSS file and the JavaScript helper script for @zurich/css-components using Content Delivery Network (CDN) links. This is the quickest way to start using the components in a vanilla HTML file.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://zds.zurich.com/0.7.0/@zurich/css-components/index.css" />
    <script type="module" src="https://zds.zurich.com/0.7.0/@zurich/css-components/javascript.js"></script>
  </head>
</html>
```

--------------------------------

### Basic Promo Usage with Image URL

Source: https://zds.zurich.com/0.7.0/molecules/promo__vue

Demonstrates the basic usage of the ZvPromo component, setting a header and an image source using a direct URL.

```html
<zv-promo
  header="Promotional header"
  image-src="https://zds.zurich.com/0.7.0/sample.webp" />
```

--------------------------------

### Import Z-Tooltip Component

Source: https://zds.zurich.com/0.7.0/atoms/tooltip__web

This snippet shows how to import the Z-Tooltip component from the '@zurich/web-components/tooltip' module. Ensure the package is installed in your project.

```javascript
import { ZTooltip } from '@zurich/web-components/tooltip';
```

--------------------------------

### Profile Component Initialization (Web Components)

Source: https://zds.zurich.com/0.7.0/atoms/profile

This snippet demonstrates how to initialize the z-profile component with custom properties for fill color and theme.

```html
<z-profilez-profilecustom='{"fill":"#06e7a3"}'/>"
<z-profilez-profilez-theme="dark""/>"
```

--------------------------------

### Define VerticalStepper Steps using Options

Source: https://zds.zurich.com/0.7.0/inputs/vertical_stepper__web

This example shows an alternative way to define the steps for the VerticalStepper component using nested '<option>' tags. Each '<option>' tag's content represents a step. This method provides a more declarative way to set up the steps.

```html
<z-vertical-stepper>
  <option>Step 1</option>
  <option>Step 2</option>
  <option>Step 3</option>
  <option>Step 4</option>
</z-vertical-stepper>
	
```

--------------------------------

### ShareButton: Custom String Parameter Example

Source: https://zds.zurich.com/0.7.0/molecules/share_button

This example illustrates using the `custom-str` parameter to configure the ShareButton's appearance with a custom fill color.

```html
<z-share-button z-share-button custom-str="fill:#06e7a3"/>
```

--------------------------------

### KpiValue Component Basic Usage

Source: https://zds.zurich.com/0.7.0/data/kpi_value__web

Demonstrates the basic usage of the KpiValue component, setting the amount, difference, header, and description.

```HTML
<kpi-value amount="1000" difference="200" header="Revenue" description="Total revenue for the period."></kpi-value>
```

--------------------------------

### ButtonGroup CSS Customization Example

Source: https://zds.zurich.com/0.7.0/layouts/button_group

Demonstrates how to customize the ButtonGroup component using CSS custom properties. This example shows setting the fill color.

```html
<z-button-group custom='{"fill":"#06e7a3"}'/>
```

--------------------------------

### Basic ZrPromo Usage with Image

Source: https://zds.zurich.com/0.7.0/molecules/promo__react_framework=react

Shows a basic implementation of the ZrPromo component, setting a header and an image source. The `image-src` attribute can accept a URL or a named image from Zurich's media library.

```jsx
<ZrPromo
  header="Promotional header"
  image-src="https://zds.zurich.com/0.7.0/sample.webp" />

```

```jsx
<ZrPromo
  header="Promotional header"
  image-src="polar_bear" />

```

--------------------------------

### SnapScroll Custom String Example (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/snap_scroll

This example shows how to customize the SnapScroll component using the 'custom-str' attribute, which accepts a string of key-value pairs separated by semicolons.

```html
<z-snap-scroll custom-str="fill:#06e7a3"/>
```

--------------------------------

### Listened Text Input with Event Listener (HTML, JavaScript)

Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/basic_concepts

Demonstrates a text input component that listens for events (like 'change') to perform actions. This 'reactive' approach allows dynamic updates based on user interaction, and can be combined with the 'preset' method. Configurations can be done via 'forced'.

```html
<z-text-input id="my-input"></z-text-input>

<script type="module">
  const input = document.getElementById('my-input');
  /* Dynamic configuration can de done here */
  input?.addEventListener('change', ({ detail }) => {
    /* Perform something with the value */
    const isInvalid = detail && detail.length < 3;
    input.invalid = isInvalid;
  });
</script>
```

--------------------------------

### Disabled Textarea Examples

Source: https://zds.zurich.com/0.7.0/inputs/textarea__vue_framework=vue_css

Shows how to disable user interaction with the textarea component using the 'disabled' flag. Examples are provided for both default and 'lined' configurations.

```html
<vue-textarea
  label="Textarea"
  disabled />

<vue-textarea
  config="line"
  label="Textarea"
  disabled />

```

--------------------------------

### DateInput Component Configuration Example

Source: https://zds.zurich.com/0.7.0/inputs/date_input__react_framework=react

Demonstrates how to configure the DateInput component with various parameters such as label, model, help-text, and range. It also shows how to handle events like onChange and onEnter.

```html
<DateInput
  label="My Date Input"
  model="2023-01-01"
  help-text="Select a date"
  :range="[1000, 2000]"
  @onChange="newValue => console.log(newValue)"
  @onEnter="() => console.log('Enter pressed')"
></DateInput>
```

--------------------------------

### Breadcrumbs HTML Structure Example

Source: https://zds.zurich.com/0.7.0/molecules/breadcrumbs__css

This example demonstrates the basic HTML structure for the Breadcrumbs component using the 'z-breadcrumbs' custom attribute. It utilizes button elements as links for each crumb.

```html
<nav class="z-breadcrumbs">
  <button class="button" type="button">
    <span class="icon icon-home"></span>
    Home
  </button>
  <button class="button" type="button">
    Link
  </button>
  <button class="button" type="button">
    Current page
  </button>
</nav>
```

--------------------------------

### Basic Modal Usage Example

Source: https://zds.zurich.com/0.7.0/layouts/modal__web

Demonstrates a basic HTML structure for using the ZModal component. It includes the modal tag and content within its default slot. The 'open' flag can be used for initial state, but 'model' is recommended for reactivity.

```html
<z-modal>
  Content of the modal
</z-z-modal>
```

--------------------------------

### Basic AvatarList Usage

Source: https://zds.zurich.com/0.7.0/molecules/avatar_list__vue

This example demonstrates the basic structure for using the z-avatar-list component. It serves as a placeholder and requires further configuration with profiles.

```html
<z-avatar-list>
</z-avatar-list>
```

--------------------------------

### Basic Promo Usage with Image URL (HTML)

Source: https://zds.zurich.com/0.7.0/molecules/promo__angular

Demonstrates the basic usage of the ZaPromo component, setting a header and an image source using a URL. The `image-src` attribute accepts a web URL for the promotional image.

```html
<za-promo
  header="Promotional header"
  image-src="https://zds.zurich.com/0.7.0/sample.webp" />

```

--------------------------------

### Install Angular Components using NPM

Source: https://zds.zurich.com/0.7.0/getting-started/packages/angular-components

Installs the Zurich Angular components package as a development dependency using NPM. This command should be run in the root of your Angular project.

```shell
npm i -D @zurich/angular-components
```

--------------------------------

### HTML Example for Select Component with Customization

Source: https://zds.zurich.com/0.7.0/inputs/select

Demonstrates how to use the Select component in HTML, including setting custom styling properties via the 'custom' attribute using stringified JSON. This allows for dynamic theming and appearance changes.

```html
<z-selectz-selectcustom='{"fill":"#06e7a3"}'/>
```

--------------------------------

### Elastic Textarea Examples

Source: https://zds.zurich.com/0.7.0/inputs/textarea__vue_framework=vue_css

Demonstrates the 'elastic' parameter, which allows the textarea to automatically grow and shrink its height to fit its content. Examples are shown for both default and 'lined' configurations.

```html
<vue-textarea
  label="Textarea"
  elastic />

<vue-textarea
  config="line"
  label="Textarea"
  elastic />

```

--------------------------------

### MultiInput Theme Example (HTML)

Source: https://zds.zurich.com/0.7.0/inputs/multi_input

Illustrates how to set the visual theme of the MultiInput component using the 'z-theme' attribute. Supported themes include 'light' and 'dark'.

```html
<z-multi-input z-theme="dark" />
```

--------------------------------

### SnapScroll Customization Example (HTML)

Source: https://zds.zurich.com/0.7.0/layouts/snap_scroll

This example demonstrates how to apply custom styling to the SnapScroll component using the 'custom' attribute, which accepts a JSON string of key-value pairs for CSS custom tokens.

```html
<z-snap-scroll custom='{"fill":"#06e7a3"}'/>
```

--------------------------------

### Stepper Theme Setting Example (HTML)

Source: https://zds.zurich.com/0.7.0/inputs/stepper

Illustrates how to set the theme for the Stepper component using the 'z-theme' attribute. This allows switching between 'light' and 'dark' themes to match the application's design.

```html
<z-stepperz-stepperz-theme="dark"/>
```

--------------------------------

### Readonly Textarea Examples

Source: https://zds.zurich.com/0.7.0/inputs/textarea__vue_framework=vue_css

Illustrates how to set the textarea to a read-only state using the 'readonly' flag, typically used for displaying information. Examples are provided for both default and 'lined' configurations.

```html
<vue-textarea
  label="Textarea"
  readonly />

<vue-textarea
  config="line"
  label="Textarea"
  readonly />

```

--------------------------------

### Resetting Z-Switch Value with reset() Method

Source: https://zds.zurich.com/0.7.0/inputs/switch__web

This example shows how to use the 'reset()' method to clear the value of a z-switch. It also emits 'change' and 'restarted' events. The button in the example triggers this method.

```html
<div
  z-flex="100"
  z-center
>
  <z-switch label="Input">
  </z-switch>
  <z-button
    config="negative"
    icon="trash"
  >
  </z-button>
</div>
```

--------------------------------

### Reset ZStepper Method Example

Source: https://zds.zurich.com/0.7.0/inputs/stepper__web

Provides an example of how to call the 'reset()' method on a ZStepper component, typically triggered by a button. This resets the stepper to its initial state and emits events.

```html
<div
  z-flex="100"
  z-center
>
  <z-stepper>
  </z-stepper>
  <z-button
    config="negative"
    icon="trash"
  >
  </z-button>
</div>

```

--------------------------------

### Z-Switch with Help Text Options

Source: https://zds.zurich.com/0.7.0/inputs/switch__web

This code demonstrates setting help text for the z-switch. It can be provided via the 'help-text' attribute or the 'help-text' slot, and works best when a 'label' is also present.

```html
<z-switch help-text="This is a help text">
</z-switch>
<z-switch
  help-text="This is a help text"
  label="Input"
>
</z-switch>
<z-switch>
  <em slot="help-text">
    This is a help text
  </em>
</z-switch>
<z-switch label="Input">
  <em slot="help-text">
    This is a help text
  </em>
</z-switch>
```

--------------------------------

### HTML for Second Invalid Text Input Example

Source: https://zds.zurich.com/0.7.0/inputs/css

Presents another example of an invalid text input, similar to the previous one, demonstrating the use of `aria-invalid` attribute for accessibility.

```html
<label
  data-zds="vue"
  style
  z-text-input
>
  <span>Text input</span>
  <small>Invalid input</small>
  <input
    type="text"
    aria-invalid
    placeholder
  >
</label>
```

--------------------------------

### Import ZColorInput Component

Source: https://zds.zurich.com/0.7.0/inputs/color_input__web

Demonstrates how to import the ZColorInput component from the '@zurich/web-components/color-input' module. This is the first step to using the component in your project.

```javascript
import { ZColorInput } from '@zurich/web-components/color-input';

```

--------------------------------

### Localized Date Display Examples

Source: https://zds.zurich.com/0.7.0/foundations/accessibility/localization

Illustrates the z-date WebComponent for displaying dates and times in various locales. Examples include basic date display, specifying a date, and including the weekday.

```html
<z-date locale="de">
</z-date>
<z-date
  date="1991-09-21"
  locale="zh"
>
</z-date>
<z-date
  date="1991-09-21"
  locale="de"
  weekday="long"
>
</z-date>
```

--------------------------------

### Basic BooleanIcon HTML Example

Source: https://zds.zurich.com/0.7.0/inputs/boolean_icon__css

Demonstrates the basic usage of the BooleanIcon component with a checkbox input and the 'z-boolean-icon' attribute to specify an icon.

```html
<input type="checkbox" class="z-boolean-icon" name="star">
<label>Favorite</label>
```

--------------------------------

### Progress Tracker with Options (HTML)

Source: https://zds.zurich.com/0.7.0/inputs/progress_tracker__vue_framework=vue

Shows how to define steps for the zv-progress-tracker component using `<option>` tags. Each option can contain text, an icon, and a disabled state.

```html
<zv-progress-tracker>
  <option>Step 1</option>
  <option>Step 2</option>
  <option disabled>
    Step 3
  </option>
  <option icon="check:line">
    Last step
  </option>
</zv-progress-tracker>
```

--------------------------------

### SocialMediaIcon Brand Examples (HTML)

Source: https://zds.zurich.com/0.7.0/atoms/social_media_icon__angular

Provides examples of displaying various social media icons by setting the 'brand' attribute. This demonstrates the range of supported social media platforms.

```html
<za-social-media-icon brand="facebook" />
<za-social-media-icon brand="instagram" />
<za-social-media-icon brand="linkedin" />
<za-social-media-icon brand="pinterest" />
<za-social-media-icon brand="spotify" />

```

--------------------------------

### Z-Button Spread Layout Example

Source: https://zds.zurich.com/0.7.0/atoms/button__web

Shows how to use the 'wide="spread"' attribute on a Z-button to distribute items with elements spaced apart. Includes examples with and without icons.

```html
<z-button wide="spread">
  Button
</z-button>
<z-button
  icon="close"
  wide="spread"
>
  Button
</z-button>
<z-button
  icon="close"
  wide="spread"
  icon-right
>
  Button
</z-button>
```

--------------------------------

### Use Web Components in Vanilla HTML

Source: https://zds.zurich.com/0.7.0/getting-started/packages/web-components

This code demonstrates the direct usage of a web component, `z-logo`, within a vanilla HTML file after including the necessary CSS and JavaScript files. It shows how to apply attributes like `inline` and sets a theme using `z-theme`.

```html
<body z-theme="dark">
  <link
    rel="stylesheet"
    href="../@zurich/web-components/styles.css"
  />
  <script
    type="module"
    src="../@zurich/web-components/index.js"
  ></script>

  <z-logo inline></z-logo>
</body>
```

--------------------------------

### Locale Component Examples

Source: https://zds.zurich.com/0.7.0/foundations/accessibility/localization

Demonstrates the usage of the z-locale WebComponent to display locale values. It shows basic usage, specifying a key chain, and forcing a specific locale.

```html
<z-locale>
</z-locale>
<z-locale value-key="locale.th">
</z-locale>
<z-locale
  locale="es"
  value-key="today"
>
</z-locale>
```

--------------------------------

### Accordion Customization Example 2

Source: https://zds.zurich.com/0.7.0/layouts/accordion

This example showcases customization of the Accordion component's body color, width, and outline using the `custom-str` attribute. It also demonstrates setting the `summary` and `open` properties.

```html
<z-accordion
  custom-str="color: #1BE59E; width:300px; outline: dotted"
  summary="My accordion"
  open>
  Body text lorem ipsum dolor sit amet
</z-accordion>
```

--------------------------------

### HTML Example for Select Component with Theme

Source: https://zds.zurich.com/0.7.0/inputs/select

Shows how to apply a specific theme ('dark' in this case) to the Select component using the 'z-theme' attribute. This enables easy switching between predefined themes for the component's appearance.

```html
<z-selectz-selectz-theme="dark"/>
```

--------------------------------

### Localized Time Display Examples

Source: https://zds.zurich.com/0.7.0/foundations/accessibility/localization

Demonstrates the z-time WebComponent for formatting time values. Examples include displaying current time, specific times, and relative time formatting with different locales.

```html
<z-time
  locale="de"
  with-seconds
>
</z-time>
<z-time
  locale="zh"
  time="00:45"
>
</z-time>
<z-time
  as-relative="year"
  locale="en"
  time="1991-09-21"
>
</z-time>
```
Tokens:
Raw