Zurich Design System

https://zds.zurich.com/0.8.1/
Admin
The Zurich Design System provides guidelines, design assets, and component libraries to create...
Tokens:709,480
Snippets:7,026
Trust Score:10
Update:9 months ago
Show doc for...
Tokens:
Raw
### ZvSelect Help Text Configuration (Vue)

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

Demonstrates how to provide help text for the ZvSelect component using the `help-text` parameter and the `help-text` slot. This is useful for guiding users or providing additional context. Examples show both default and 'line' configurations, as well as invalid states.

```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 />

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

```

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

### HTML Examples

Source: https://zds.zurich.com/0.8.1/atoms/icon__web

Provides various HTML examples demonstrating different configurations of the ZIcon component.

```APIDOC
## HTML Examples

| | peach | mint | small | xs | lemon:s |
|---|---|---|---|---|---|
| solid |  |  |  |  |  |
| outline |  |  |  |  |  |

**Note**: The table above seems to be illustrative and might not directly translate to runnable code snippets without further context or a specific component implementation that renders based on these cells.
```

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

### ZStageBanner HTML Examples

Source: https://zds.zurich.com/0.8.1/molecules/stage_banner__web

Provides practical HTML examples for implementing the ZStageBanner component with different configurations.

```APIDOC
## HTML Examples

### Description
Illustrative examples demonstrating various ways to use the `ZStageBanner` component with different attributes and slots.

#### Basic Usage with `shape`
```html
<z-stage-banner shape="1">
  <span>Content goes here</span>
</z-stage-banner>
```

#### Usage with `config` and `shape`
```html
<z-stage-banner config="left:center" shape="1">
  <span>Content goes here</span>
</z-stage-banner>
```

#### Usage with `pictogram`
```html
<z-stage-banner pictogram="youth">
  <span>Content goes here</span>
</z-stage-banner>
```

#### Usage with `image-src` attribute
```html
<z-stage-banner image-src="https://zds.zurich.com/0.8.1/sample.webp">
  <span>Content goes here</span>
</z-stage-banner>
```

#### Usage with `image-src` slot
```html
<z-stage-banner>
  <img slot="image-src" src="/0.8.1/sample.webp" alt="">
  <span>Content goes here</span>
</z-stage-banner>
```

#### Usage with `category` attribute
```html
<z-stage-banner category="Welcome to ZDS">
  <span>Content goes here</span>
</z-stage-banner>
```

#### Usage with `category` slot
```html
<z-stage-banner>
  <span slot="category">
    Welcome to ZDS
  </span>
  <span>Content goes here</span>
</z-stage-banner>
```
```

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

### Alert Configuration Examples

Source: https://zds.zurich.com/0.8.1/molecules/alert__react

Provides examples of how to configure the Alert component using different `config` types.

```APIDOC
## ZrAlert Configuration Examples

### Description

These examples showcase the different `config` options available for the ZrAlert component, including 'info', 'alert', 'negative', and 'positive'.

### Method

Component Rendering

### Endpoint

N/A

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

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

### Response

#### Success Response (200)

Displays the alert with the specified configuration.

#### Response Example

```html
<!-- Rendered output of the above examples -->
```
```

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

### Action Card HTML Example

Source: https://zds.zurich.com/0.8.1/molecules/action_card__web

A basic HTML example of an Action Card component with a description.

```html
Description Button

```

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

### ZrMultiselect Help Text Examples

Source: https://zds.zurich.com/0.8.1/inputs/multiselect__react_framework=react

Provides examples of using the 'help-text' parameter and the 'help-text' slot for additional user guidance. It also shows how invalid states affect the display.

```jsx
<ZrMultiselect
  help-text="This is a help text"
  label="Multiselect" />
<ZrMultiselect
  help-text="This is a help text"
  label="Multiselect"
  invalid />
<ZrMultiselect
  config="line"
  help-text="This is a help text"
  label="Multiselect" />
<ZrMultiselect
  config="line"
  help-text="This is a help text"
  label="Multiselect"
  invalid />

<ZrMultiselect label="Multiselect">
  <em slot="help-text">
    Help text
  </em>
</ZrMultiselect>
```

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

### HTML Example: Z-Switch with Label and Checked State

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

An HTML example demonstrating a z-switch component that is both labeled and checked, showcasing its initial state.

```html
<z-switch label="Switch" checked>
</z-switch>

```

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

### Basic Promo HTML Example

Source: https://zds.zurich.com/0.8.1/molecules/promo__web

A simple HTML example showcasing the basic structure and content of a promo component, including text and a call to action.

```html
Promotional content Go to Promotion

```

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

### Fieldset HTML Example with Theme

Source: https://zds.zurich.com/0.8.1/layouts/fieldset

Demonstrates setting the theme for the Fieldset component using the 'z-theme' attribute, with 'dark' as an example value.

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

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

### Flag Component HTML Examples

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

Demonstrates how to implement the Flag component in HTML using various parameters. It shows examples for setting custom fill colors via 'custom' and 'custom-str' properties, and applying a dark theme.

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

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

### Tooltip Theme Example

Source: https://zds.zurich.com/0.8.1/atoms/tooltip

Shows how to set the theme of a tooltip component using the 'z-theme' attribute. This example specifically applies the 'dark' theme.

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

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

### VerticalStepper Theme Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/vertical_stepper

Illustrates how to set the theme for the VerticalStepper component using the 'z-theme' attribute, with 'dark' as an example.

```html
<z-vertical-stepper z-theme="dark"/>
```

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

### ListItem Theming Example (HTML)

Source: https://zds.zurich.com/0.8.1/molecules/list_item

This example demonstrates how to apply a theme to the ListItem component using the `z-theme` attribute, which can be set to 'light' or 'dark'.

```html
<z-list-item z-theme="dark" />
```

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

### ShareBar Customization Example (Web Components)

Source: https://zds.zurich.com/0.8.1/molecules/share_bar

This example demonstrates how to customize the ShareBar component using the 'custom-str' attribute to set background and text colors. It utilizes Web Components for implementation.

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

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

### Tooltip CSS Customization Example

Source: https://zds.zurich.com/0.8.1/atoms/tooltip

Provides an example of customizing tooltip appearance using CSS variables. It demonstrates setting the font color and background color.

```css
:root {
  --z-tooltip--color: #ffffff;
  --z-tooltip--bg: #333333;
}
```

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

### Configured ColorInput HTML Example

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

This HTML example showcases a more configured ColorInput component with attributes like 'size', 'line-version', 'readonly', and 'disabled'. It also includes slots for 'label' and 'help-text' to provide more context and guidance to the user.

```html
<z-color-input label="Choose a color" size="m" line-version="true" readonly="false" disabled="false">
  <span slot="label">Select your favorite color</span>
  <span slot="help-text">This is a helper text for the color input.</span>
</z-color-input>

```

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

### TextInput Theme Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/text_input

Illustrates how to set the visual theme of the TextInput component using the `z-theme` attribute. This example applies the 'dark' theme.

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

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

### Profile Component Usage Examples

Source: https://zds.zurich.com/0.8.1/atoms/profile__react_framework=react

Demonstrates various ways to use the ZrProfile component, including setting content via the 'content' prop or default slot, and displaying it with different initial values.

```html
<ZrProfile content="AZ" />
<ZrProfile content="AZaa" />
<ZrProfile>AA</ZrProfile>
<ZrProfile />
```

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

### Use ListItem with Header, Content, and Timestamp (Vue)

Source: https://zds.zurich.com/0.8.1/molecules/list_item__vue_framework=vue

An example of a ListItem component configured with header, content, and timestamp attributes. This showcases a more complete list item setup.

```html
<zv-list-item
  content="Item description"
  header="Item header"
  timestamp="12:34" />
```

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

### Image Component - Size Configuration

Source: https://zds.zurich.com/0.8.1/atoms/image__angular

Examples demonstrating how to set the column size for the Image component.

```APIDOC
## Size Configuration

### `size` Parameter
The `size` parameter determines the width of the image within its grid column.

#### Accepted values for `size`:
- `"2"`
- `"3"`
- `"4"`
- `"5"`
- `"6"`

### Request Examples
```html
<!-- Image with size 3 -->
<za-image
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
  size="3" />

<!-- Image with size 4 -->
<za-image
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
  size="4" />
```

### Response
This component renders an `<img>` tag. The success response is the rendered image. No specific JSON response is applicable.
```

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

### Basic ZvAvatarList Usage (Vue)

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

Illustrates the basic structure for using the ZvAvatarList component. This example shows an empty component without any profiles, serving as a starting point.

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

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

### Implement Tile Component with Parameters (Web Components)

Source: https://zds.zurich.com/0.8.1/molecules/tile

Demonstrates how to implement the Tile component using Web Components, configuring various parameters such as image source, header, content, and custom styling via `custom-str`. This example showcases setting a background and text color for the tile.

```html
<z-tile
  content="Content"
  custom-str="bg: #1BE59E; color: #04093C"
  header="Header"
  image-src="https://zds.zurich.com/0.8.1/nyancat.webp"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies lacinia. Donec auctor, nunc nec ultricies lacinia, nunc nunc ultr
</z-tile>
```

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

### Set Date Range for Calendar (Angular)

Source: https://zds.zurich.com/0.8.1/inputs/calendar__angular

This example demonstrates how to define a selectable date range for the ZaCalendar component using the `range` property, which accepts an array of start and end dates.

```html
<za-calendar [range]="['2024-09-05','2024-09-27']" />

```

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

### Import All Web Components via CDN (HTML)

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

This snippet demonstrates how to import all web components and their styles from a CDN into the <head> of an HTML document. This is the fastest way to get started.

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

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

### Using ZrTabs with Model Attribute (HTML)

Source: https://zds.zurich.com/0.8.1/layouts/tabs__react_framework=react

This example demonstrates how to use the `model` attribute in the ZrTabs component to set the initially active tab. The `model` attribute expects a numerical index starting from 1. Hardcoding this value can lead to non-reactive behavior.

```html
<ZrTabs model="2">
  <div
    name="HTML"
    slot="tab-1"
  >
    HTML - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div
    name="CSS"
    slot="tab-2"
  >
    CSS - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div
    name="JS"
    slot="tab-3"
  >
    JS - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</ZrTabs>
```

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

### Define ProgressTracker Steps using Options (HTML)

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

This example demonstrates how to define the steps for the ProgressTracker component using `<option>` tags within the component's markup. Each option represents a step with text. This is a declarative way to set up the steps.

```html
<zv-progress-tracker>
	<option>Step 1</option>
	<option>Step 2</option>
	<option>Step 3</option>
	<option>Last step</option>
</zv-progress-tracker>
```

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

### Install CSS Components Locally via NPM

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

Installs the @zurich/css-components package using NPM. This command also installs @zurich/design-tokens as a dependency. After installation, CSS files can be imported into your JavaScript/TypeScript projects.

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

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

### Shape Component Examples

Source: https://zds.zurich.com/0.8.1/atoms/shape

Examples demonstrating how to use the Shape component with different parameters and customizations.

```APIDOC
## Shape Component Usage Examples

### Request Example

```html
<z-shape
  custom-str="size: 30px;"
  shape="3"
>
</z-shape>
<z-shape
  custom-str="size: 40px;"
  shape="4"
>
</z-shape>
<z-shape
  custom-str="size: 50px;"
  shape="5"
>
</z-shape>
<z-shape
  custom-str="size: 60px;"
  shape="6"
>
</z-shape>
```

### Response Example

(Shape component does not have a direct response body as it's a UI component. The output is visual rendering.)
```

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

### Basic Multiselect Implementation (Web Components)

Source: https://zds.zurich.com/0.8.1/inputs/multiselect

Demonstrates the basic implementation of the Multiselect component using Web Components. This example shows how to instantiate the component in HTML.

```html
<z-multiselect></z-multiselect>
```

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

### Install better-vsts-npm-auth

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

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

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

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

### Basic Usage of ZrTagsSelect

Source: https://zds.zurich.com/0.8.1/inputs/tags_select__react_framework=react

Demonstrates the fundamental usage of the ZrTagsSelect component. This example shows the component without any specific configurations, rendering with default behavior.

```html
<ZrTagsSelect />

```

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

### Basic PasswordInput Example

Source: https://zds.zurich.com/0.8.1/inputs/password_input__web

A fundamental example of implementing the ZDS PasswordInput component with a label.

```html
<z-password-input label="Password input"/>
```

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

### Basic ZvSelect Usage with Options (Vue)

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

Demonstrates the basic usage of the ZvSelect component with options. It shows how to bind options to the component and set an initial model value. The `options` prop expects an array of objects, each with `text` and `value` properties.

```html
<zv-select
  :options="[{text:'Option A',value:'a'},{text:'Option B',value:'b'},{text:'Option C',value:'c',disabled:true},{text:'Option D',value:'d'}]"
  label="Select"
  model="b" />

```

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

### Define Select Options using <option> Tags

Source: https://zds.zurich.com/0.8.1/inputs/select__react

This example shows how to define the options for the Select component using standard HTML `<option>` tags. Each option has a value and displayed text. This method is a convenient way to populate the select list.

```html
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
```

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

### Tooltip HTML Example

Source: https://zds.zurich.com/0.8.1/atoms/tooltip

Demonstrates how to implement a tooltip using HTML with custom styling. It shows the use of the 'custom' attribute to set specific CSS properties like fill color.

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

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

### HTML Example: Invalid Z-Switch

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

An HTML example of an invalid z-switch component. This visually indicates an error state.

```html
<z-switch label="Switch label" invalid>
</z-switch>

```

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

### HTML Example: Disabled Z-Switch

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

An HTML example showing a disabled z-switch component. This prevents user interaction.

```html
<z-switch label="Switch" disabled>
</z-switch>

```

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

### SnapScroll Theme Parameter Example

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

This example demonstrates setting the theme of the SnapScroll component to 'dark' using the 'z-theme' attribute.

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

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

### Setting Initial Modal State (HTML)

Source: https://zds.zurich.com/0.8.1/layouts/modal__angular

Illustrates how to set the initial state of the modal to be open using the 'open' flag. This is intended for initial setup without a reactive control loop.

```html
<za-modal
  style="--z-modal--position:absolute;"
  open
>
  Content
</za-modal>
```

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

### MultiInput Theme Example (Web Components)

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

Illustrates how to set the visual theme of the MultiInput component using the 'z-theme' attribute. This allows switching between 'light' and 'dark' themes.

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

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

### SelectionTag HTML Examples

Source: https://zds.zurich.com/0.8.1/inputs/selection_tag__web

Provides visual examples of the z-selection-tag component in different states, including checked and disabled variations.

```html
| - | checked  
---|---|---  
- |  Tag |  Tag  
disabled |  Tag |  Tag

```

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

### Example Icon Renderings (HTML Table)

Source: https://zds.zurich.com/0.8.1/atoms/icon__css

This section provides a visual representation of various icon renderings based on different size and color configurations, demonstrating the application of modifiers.

```html
| - | peach | mint | small | xs | lemon:s  
---|---|---|---|---|---|---
solid |  __ |  __ |  __ |  __ |  __ |  __  
outline |  __ |  __ |  __ |  __ |  __ |  __
```

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

### Combine <option> Tags and Slots for Select Options

Source: https://zds.zurich.com/0.8.1/inputs/select__react

This example demonstrates a hybrid approach to defining select options, combining `<option>` tags for basic values with slots for custom content. Note that the label defaults to the inner text of the `<option>` tag.

```html
<option value="ES">🇪🇸 Spain</option>
<option value="DE">
  <span slot="options-DE">🇩🇪 Germany</span>
</option>
<option value="FR">
  <span slot="options-FR">🇫🇷 France</span>
</option>
<option value="GB">
  <span slot="options-GB">🇬🇧 United Kingdom</span>
</option>
```

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

### Playground Output Example for Z-Tabs

Source: https://zds.zurich.com/0.8.1/layouts/tabs__web

Demonstrates a possible output from the Z-Tabs component's playground. This example shows the active tab is '1'.

```html
1

```

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

### RangeInput Theme Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/range_input

Shows how to set the theme of the RangeInput component using the 'z-theme' attribute. This example applies the 'dark' theme.

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

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

### MultiInput Customization Example (Web Components)

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

Demonstrates how to apply custom CSS properties to the MultiInput component using the 'custom' attribute. This allows for dynamic styling of the input element.

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

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

### ZrButton with Only Icon and Configurations

Source: https://zds.zurich.com/0.8.1/atoms/button__react

Illustrates using a button with only an icon, and how to apply different configurations (type, size) and icon styles when no text is present.

```html
<ZrButton icon="edit:line" />
<ZrButton
  config="secondary:xs"
  icon="edit:line" />
<ZrButton
  config="l"
  icon="edit:line" />
```

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

### Install Design Tokens via NPM

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

Installs the @zurich/design-tokens package using NPM. This is suitable for NPM-style build systems and local development.

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

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

### Promo Component Implementation (Web Components)

Source: https://zds.zurich.com/0.8.1/molecules/promo

Example of how to implement the Promo component using Web Components. It demonstrates setting various properties like category, config, custom-str, and header to configure the promo's appearance and content. The 'custom-str' property allows for direct CSS variable customization.

```html
<z-promo
  category="One time offer"
  config="left"
  custom-str="bg: #1BE59E; color: #04093C"
  header="Promotional header">
  Promotional content
</z-promo>
```

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

### Fieldset HTML Example with Customization

Source: https://zds.zurich.com/0.8.1/layouts/fieldset

Demonstrates how to implement a Fieldset component in HTML, including setting custom string properties for color and font, and providing a legend. It also shows nested z-text-input elements.

```html
<z-fieldset
  custom-str="color: #1BE59E; font: var(--zf-body-14)"
  legend="Fieldset legend">
  <z-text-input label="Name">
  </z-text-input>
  <z-text-input label="Surname">
  </z-text-input>
</z-fieldset>
```

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

### Install CSS Components (NPM)

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

Installs the CSS components package as a development dependency in your project. This is typically done in the root of the project where the package.json file is located.

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

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

### Profile Component Status Examples

Source: https://zds.zurich.com/0.8.1/atoms/profile__react_framework=react

Illustrates how to set the online status of the ZrProfile component using the 'status' parameter. Supported values are 'online', 'absent', and 'occupied'.

```html
<ZrProfile status="online">
  AZ
</ZrProfile>
<ZrProfile status="absent">
  AZ
</ZrProfile>
<ZrProfile status="occupied">
  AZ
</ZrProfile>
```

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

### Install Angular Components using NPM

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

Installs the `@zurich/angular-components` package as a development dependency using NPM. This command should be executed in your project's root directory.

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

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

### SnapScroll Custom Parameter Example

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

This example shows how to set custom CSS tokens for the SnapScroll component using the 'custom' attribute, which accepts a JSON string.

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

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

### SelectableCards Flags Examples

Source: https://zds.zurich.com/0.8.1/inputs/selectable_cards__angular

Provides examples of using various flags like `disabled`, `invalid`, `horizontal`, and `compact` to modify the component's appearance and behavior.

```APIDOC
## SelectableCards Flags Examples

### Description

This section details the usage of boolean flags to control the state and layout of the `za-selectable-cards` component.

### Method

Component Input Binding (Boolean Flags)

### Endpoint

N/A

### Parameters

#### Flags

- **`disabled`** (boolean): Applies to the entire component, disabling all selectable cards.
- **`invalid`** (boolean): Marks the component's input state as invalid, often used for form validation feedback.
- **`horizontal`** (boolean): Arranges the cards in a horizontal layout.
- **`compact`** (boolean): Reduces the padding and spacing within the cards for a more compact appearance.

### Request Example

**Disabled Example:**
```html
<za-selectable-cards disabled>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</za-selectable-cards>
```

**Invalid Example:**
```html
<za-selectable-cards invalid>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</za-selectable-cards>
```

**Horizontal Example:**
```html
<za-selectable-cards horizontal>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</za-selectable-cards>
```

**Compact Example:**
```html
<za-selectable-cards compact>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</za-selectable-cards>
```

### Response

N/A (These are presentation and state examples)

```

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

### Basic Tile Structure with Content

Source: https://zds.zurich.com/0.8.1/molecules/tile__css

This HTML example demonstrates the basic structure of a Tile component with content. It uses an `<article>` tag with the `z-tile` attribute and includes a `<main>` tag with a `<p>` tag for displaying descriptive text.

```html
<article
  data-zds="vue"
  style
  z-tile
>
  <picture
    data-zds="vue"
    style
    z-image
  >
    <img
      alt="Image"
      src
      onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';"
    >
    </picture>
    <main>
      <p>Article card content</p>
    </main>
  </article>
```

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

### Basic Icon Usage

Source: https://zds.zurich.com/0.8.1/atoms/icon

Demonstrates the basic usage of the Icon component with its name and optional style. The 'icon' parameter takes a pattern of '<name><?:style>', where 'style' defaults to 'solid'.

```html
<z-icon icon="search"></z-icon>
<z-icon icon="help solid"></z-icon>
<z-icon icon="forward line"></z-icon>
```

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

### ZaSelect Help Text Parameter and Slot

Source: https://zds.zurich.com/0.8.1/inputs/select__angular

Shows how to provide help text for the ZaSelect component using the `help-text` parameter. It also demonstrates using the `help-text` slot for custom help content and includes examples with the `invalid` and `config='line'` attributes.

```html
<za-select
  help-text="This is a help text"
  label="Select" />
<za-select
  help-text="This is a help text"
  label="Select"
  invalid />
<za-select
  config="line"
  help-text="This is a help text"
  label="Select" />
<za-select
  config="line"
  help-text="This is a help text"
  label="Select"
  invalid />
<za-select label="Select">
  <em slot="help-text">
    Help text
  </em>
</za-select>

```

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

### Resizer Component Initialization with Custom CSS Properties (Web Components)

Source: https://zds.zurich.com/0.8.1/functionalities/request

Demonstrates how to initialize the Resizer component with custom CSS properties using the 'custom' attribute. This attribute accepts a stringified JSON object.

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

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

### ListItem Customization Example with String (HTML)

Source: https://zds.zurich.com/0.8.1/molecules/list_item

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

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

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

### Carousel Configuration Examples

Source: https://zds.zurich.com/0.8.1/layouts/carousel__vue

Examples demonstrating how to use the `config` attribute to customize carousel navigation arrows and dot positions, as well as combining these settings.

```APIDOC
## Carousel Configuration (`config` attribute)

### Description
The `config` attribute is used to customize the interaction components of the carousel, specifically the navigation arrows and dots. It accepts a string with modifiers separated by colons.

### Parameters
#### `config` Modifiers
- **Arrows**: `circle`, `chevron`, `semi`
- **Dots Position**: `center`, `left`, `right`
- **Navigation**: `nav` (requires dots configuration)

### Examples
#### Arrow Styling
```html
<zv-carousel config="circle">
  <div slot="slide-1"></div>
  <div slot="slide-2"></div>
  <div slot="slide-3"></div>
</zv-carousel>
<zv-carousel config="semi">
  <div slot="slide-1"></div>
  <div slot="slide-2"></div>
  <div slot="slide-3"></div>
</zv-carousel>
```

#### Dots Position
```html
<zv-carousel config="left">
  <div slot="slide-1"></div>
  <div slot="slide-2"></div>
  <div slot="slide-3"></div>
</zv-carousel>
<zv-carousel config="right">
  <div slot="slide-1"></div>
  <div slot="slide-2"></div>
  <div slot="slide-3"></div>
</zv-carousel>
```

#### Dots with Navigation
```html
<zv-carousel config="center:nav">
  <div slot="slide-1"></div>
  <div slot="slide-2"></div>
  <div slot="slide-3"></div>
</zv-carousel>
```

#### Combined Modifiers (`arrows:dots:nav`)
```html
<zv-carousel config="semi:center:nav">
  <div slot="slide-1"></div>
  <div slot="slide-2"></div>
  <div slot="slide-3"></div>
</zv-carousel>
```
```

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

### RangeInput Customization Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/range_input

Demonstrates how to apply custom CSS properties to the RangeInput component using the 'custom' attribute. This example sets the 'fill' color to '#06e7a3'.

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

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

### ZaTile with Image and Actions

Source: https://zds.zurich.com/0.8.1/molecules/tile__angular

Illustrates how to configure the ZaTile component with an image source and custom action buttons.

```APIDOC
## ZaTile with Image and Actions

### Description

This example demonstrates how to use the `image-src` attribute or the `image-src` slot to display an image within the `za-tile` component. It also shows how to include custom actions using the `actions` slot with `za-button-group` and `za-button` components.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Image Configuration

- **image-src** (string) - The URL of the image to display.
- **image-src** (slot) - Used to provide an image element for the tile.

#### Actions Configuration

- **actions** (slot) - Accepts a `za-button-group` to define custom actions.

### Request Example

```html
<za-tile
  header="Header"
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
>
  Tile content
</za-tile>

<za-tile header="Header">
  <img
    slot="image-src"
    src="/0.8.1/sample.webp"
    alt
  >
    Tile content
  </za-tile>

<za-tile
  content="Tile content"
  header="Header"
>
  <za-button-group slot="actions">
    <za-button
      config="xs"
      icon="link:line"
    >
      Visit
    </za-button>
    <za-button
      config="secondary:xs"
      icon="bookmark:line"
      icon-right
    >
      Save
    </za-button>
  </za-button-group>
</za-tile>
```

### Response

N/A (Component Usage)

#### Success Response (200)

N/A (Component Usage)

#### Response Example

N/A (Component Usage)
```

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

### Icon Configuration (Size and Color)

Source: https://zds.zurich.com/0.8.1/atoms/icon

Illustrates how to configure the Icon component's size and color using the 'config' parameter. The 'config' parameter follows the pattern '<?size><?:color>', with default size 'm' and various color options.

```html
<z-icon icon="search" config="xs"></z-icon>
<z-icon icon="help" config="l black"></z-icon>
<z-icon icon="forward" config="::moss"></z-icon>
<z-icon icon="user" config="s peach"></z-icon>
```

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

### Install Web Components (NPM)

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

Installs the Web Components package as a development dependency in your project. Similar to CSS components, this command should be executed in the project's root directory.

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

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

### Open Modal Example

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

Demonstrates how to use the ZModal component with a button to open it. The `model` parameter controls the visibility of the modal. It's recommended to use a variable for `model` to ensure reactivity.

```html
<z-button
  config="s"
  icon="arrow-diagonal:line"
>
  Open modal
</z-button>
<z-modal style="--z-modal--position:absolute;">
  <p>Content of the modal</p>
</z-modal>
```

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

### ListItem Customization Example (HTML)

Source: https://zds.zurich.com/0.8.1/molecules/list_item

This example demonstrates how to customize the ListItem component using the `custom` attribute, which accepts a JSON string of key-value pairs for CSS custom tokens.

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

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

### Resizer Component Initialization with Theme (Web Components)

Source: https://zds.zurich.com/0.8.1/functionalities/request

Shows how to set the theme of the Resizer component using the 'z-theme' attribute. The available themes are 'light' and 'dark'.

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

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

### ZvLoader Usage Examples (Vue)

Source: https://zds.zurich.com/0.8.1/atoms/loader__vue_framework=vue

Provides various examples of how to use the ZvLoader component, including default usage, with text content via slot and prop, and with an empty content.

```html
<zv-loader />
<zv-loader>Loading text</zv-loader>
<zv-loader content="Loading text content" />
<zv-loader content=" " />
```

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

### Image Component - Aspect Ratio Configuration

Source: https://zds.zurich.com/0.8.1/atoms/image__angular

Examples showcasing different aspect ratio configurations for the Image component.

```APIDOC
## Aspect Ratio Examples

### `config` Parameter
The `config` parameter controls the aspect ratio of the image. It accepts predefined values or a combination with `round` for rounded corners.

#### Accepted values for `config`:
- `"full-width"`
- `"3:2"`
- `"1:1"`
- `"4:3"`
- `"16:9"`
- `"round"` (for `1:1` aspect ratio with rounding)
- `"1:1:round"` (explicitly `1:1` aspect ratio with rounding)

### Request Examples
```html
<!-- 3:2 Aspect Ratio -->
<za-image
  config="3:2"
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
  size="2" />

<!-- Rounded 1:1 Aspect Ratio -->
<za-image
  config="round"
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
  size="2" />

<!-- 4:3 Aspect Ratio -->
<za-image
  config="4:3"
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
  size="2" />

<!-- 16:9 Aspect Ratio -->
<za-image
  config="16:9"
  image-src="https://zds.zurich.com/0.8.1/sample.webp"
  size="2" />
```

### Response
This component renders an `<img>` tag. The success response is the rendered image. No specific JSON response is applicable.
```

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

### Install Dev Utils Locally via npm

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

Install the @zurich/dev-utils package as a development dependency using npm. This allows access to all provided tools, including SCSS.

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

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

### Install vsts-npm-auth for Windows

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

Installs the vsts-npm-auth tool globally, which is required for authenticating with Azure DevOps artifact feeds. This command ensures the tool is available for subsequent authentication steps.

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

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

### Enabling Search Feature

Source: https://zds.zurich.com/0.8.1/inputs/multiselect__vue_framework=vue

This example shows how to enable the internal search functionality for the Multiselect component using the `with-search` flag. It also demonstrates setting a custom placeholder for the search input.

```html
<zv-multiselect :options="options" with-search search-placeholder="Find an option..."></zv-multiselect>
```

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

### PasswordInput Theme Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/password_input

Shows how to set the visual theme (e.g., 'dark') for the PasswordInput component using the 'z-theme' attribute.

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

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

### MobileNavBar HTML Example with Theme

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

This example illustrates how to set the theme for the MobileNavBar component directly in HTML. The 'z-theme' attribute can be set to 'light' or 'dark' to control the component's appearance.

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

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

### Selection Tag JSON Customization Example

Source: https://zds.zurich.com/0.8.1/inputs/selection_tag

Provides an example of how to use the `custom` property in a JSON string format to define CSS custom tokens for the Selection Tag component.

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

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

### Basic ZrPromo Usage with Image

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

Shows a basic implementation of the ZrPromo component, setting a header and an image source URL. This is a fundamental way to display promotional content with an associated image.

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

```

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

### Basic ZvTagsSelect Usage with Options Array

Source: https://zds.zurich.com/0.8.1/inputs/tags_select__vue

This example demonstrates the basic usage of the ZvTagsSelect component by passing an array of options directly to the 'options' prop. Each option object must contain 'text' and 'value' keys. The 'disabled' key can be used to disable specific options.

```html
<zv-tags-select
  :options="[{text:'Option 1',value:'1'},{text:'Option 2',value:'2'},{text:'Option 3',value:'3',disabled:true},{text:'Option 4',value:'4'}]" />
```

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

### Button with Different Configurations (HTML)

Source: https://zds.zurich.com/0.8.1/atoms/button__vue

Provides examples of how to apply different configurations to the ZvButton component, including type (primary, secondary, negative, positive, link) and size (xs, s, m, l).

```html
<zv-button config="primary">
  Button
</zv-button>
<zv-button config="secondary">
  Button
</zv-button>
<zv-button config="negative">
  Button
</zv-button>
<zv-button config="positive">
  Button
</zv-button>
<zv-button config="link">
  Button
</zv-button>

<zv-button config="xs">
  Button
</zv-button>
<zv-button config="s">
  Button
</zv-button>
<zv-button config="m">
  Button
</zv-button>
<zv-button config="l">
  Button
</zv-button>

```

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

### ArticleCard Customization Example (HTML)

Source: https://zds.zurich.com/0.8.1/molecules/article_card

Demonstrates how to use the `custom-str` attribute to customize the appearance of the ArticleCard component, including dimensions, background color, text color, and shadow. This example utilizes HTML for implementation.

```html
<z-article-card
  custom-str="width: 300px; max-width: 300px; height: 300px; bg: #1BE59E; color: #04093C; shadow: 0 0 10px rgba(0, 0, 0, 0.1);"
  header="Header"
  image-src="https://zds.zurich.com/0.8.1/nyancat.webp"
>
  Card content
</z-article-card>
```

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

### Basic HTML Carousel Structure Example

Source: https://zds.zurich.com/0.8.1/layouts/carousel__web

A basic HTML structure for a carousel, utilizing the `<z-carousel>` element with slotted content for individual slides. This example shows the fundamental markup for creating carousel slides in HTML.

```html
<z-carousel config="semi:center:nav">
  <div slot="slide-1">Slide 1</div>
  <div slot="slide-2">Slide 2</div>
  <div slot="slide-3">Slide 3</div>
</z-carousel>
```

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

### Providing RadioSelect Help Text using Parameter

Source: https://zds.zurich.com/0.8.1/inputs/radio_select__react

Demonstrates how to use the `help-text` parameter to provide descriptive text for the RadioSelect component. This enhances user understanding.

```html
<radio-select help-text="This is a help indication">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</radio-select>
```

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

### TextInput Customization Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/text_input

Demonstrates how to customize the appearance of the TextInput component using the `custom` property with a JavaScript object defining CSS custom tokens. This example sets the 'fill' color.

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

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

### ActionMenu Basic Usage with Customization (HTML)

Source: https://zds.zurich.com/0.8.1/layouts/action_menu

Demonstrates the basic implementation of the ActionMenu component using HTML. It shows how to set content and apply custom styling through the 'custom-str' attribute, including colors, background, heading color, border radius, and shadow.

```html
<z-action-menu
  content="Action menu"
  custom-str="color:#04093C; bg: #F5F5F5; color-hover: #F5F5F5; bg-hover: #04093C ; heading-color: red; radius:0px; shadow: var(--zd-2)"
>
</z-action-menu>
```

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

### RangeInput Custom String Example (HTML)

Source: https://zds.zurich.com/0.8.1/inputs/range_input

Illustrates the use of the 'custom-str' attribute for setting CSS custom tokens in a string format. This example sets the 'fill' color similarly to the 'custom' attribute.

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

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

### HTML Examples of Z-Checkbox States

Source: https://zds.zurich.com/0.8.1/inputs/checkbox__web

Provides various HTML examples showcasing different states and configurations of the Z-Checkbox component, including no label, with labels, checked, indeterminate, disabled, and invalid states.

```html
<!-- No label -->
<z-checkbox></z-checkbox>

<!-- With label -->
<z-checkbox label="Checkbox label"></z-checkbox>

<!-- Checked -->
<z-checkbox checked></z-checkbox>
<z-checkbox label="Checked" checked></z-checkbox>

<!-- Indeterminate -->
<z-checkbox indeterminate></z-checkbox>
<z-checkbox label="Indeterminate" indeterminate></z-checkbox>

<!-- Disabled -->
<z-checkbox disabled></z-checkbox>
<z-checkbox label="Disabled" disabled></z-checkbox>

<!-- Invalid -->
<z-checkbox invalid></z-checkbox>
<z-checkbox label="Invalid" invalid></z-checkbox>
```
Tokens:
Raw