Skip to content

Main Navigation

Learn to use it

Packages

@zurich/dev-utils

@zurich/design-tokens

@zurich/css-components

@zurich/web-components

@zurich/angular-components

@zurich/react-native

Primitive tokens

Layouts

Semantic tokens

Assets

Media

Atoms

ScrollIndicator

SocialMediaIcon

Inputs

ProgressTracker

SegmentedControl

VerticalStepper

Layouts

Molecules

Functionalities

Organisms

Libraries

ZDS Components Library

ZDS Components Library V2

ZDS Data Library

Training

ZDS Training tasks

Sidebar Navigation

Release notes

Resources

Glossary

Components status

Getting started

About

Introduction

Processes

How to start

Introduction

Basic concepts

How it works

Packages

Overview

@zurich/dev-utils

@zurich/design-tokens

@zurich/css-components

@zurich/web-components

@zurich/angular-components

@zurich/react-native

Integrations

CSS

Web

Angular

React

Vue

Next.js

Platforms

Salesforce

Mendix

Code examples

Welcome page

Log in

Landing page

Secondary page

Multi-step form

Support

FAQs

Foundations

Introduction

Breakpoints

Spacers

Colors

Intro

Palettes

Shadows

Typography

Intro

Text styles

Layouts

Flex

Grid

Assets

Icons

Pictograms

Images

Themes

Semantic tokens

Zurich media

Images

Accessibility

Atoms

Introduction

Badge 🧪

Web Component

CSS Component

Figma

Button 🧪

Web Component

CSS Component

Figma

Chip 🧪📱

Web Component

CSS Component

Currency 🧪📱

Web Component

Date 🧪📱

Web Component

Icon 🧪📱

Web Component

CSS Component

Figma

Image 🧪

Web Component

CSS Component

Figma

Link 🧪

Web Component

CSS Component

Loader 🧪

Web Component

CSS Component

Figma

Logo 🧪📱

Web Component

CSS Component

Figma

Number 🧪📱

Web Component

Pictogram 🧪📱

Web Component

CSS Component

Figma

Profile 🧪

Web Component

CSS Component

ProgressBar 🧪

Web Component

CSS Component

Figma

SafeSpace 🧪📱

Web Component

CSS Component

Figma

ScrollIndicator 🧪🆕

Web Component

Shape 🐞📱

Web Component

CSS Component

Figma

Skeleton 🧪🆕

Web Component

CSS Component

SmilingZ 🧪📱

Web Component

CSS Component

Figma

SocialMediaIcon 🧪🆕

Web Component

CSS Component

Tag 🧪📱

Web Component

CSS Component

Figma

Time 🐞📱

Web Component

Toast 🧪

Web Component

CSS Component

Figma

Tooltip 🧪

Web Component

CSS Component

Figma

ZurichImage 🧪

Web Component

Inputs

Introduction

CSS inputs

Web inputs

BooleanIcon 🧪

Web Component

CSS Component

Calendar 🧪

Web Component

Figma

Checkbox 🧪

Web Component

CSS Component

Figma

CheckboxGroup 🧪

Web Component

CheckboxSelect 🧪🆕

Web Component

ChipsSet 🧪🆕

Web Component

DateInput 🧪

Web Component

CSS Component

NumberInput 🧪

Web Component

CSS Component

Pagination 🧪

Web Component

Figma

PasswordInput 🧪

Web Component

CSS Component

ProgressTracker 🧪

Web Component

Figma

RadioSelect 🧪

Web Component

CSS Component

Figma

Rating 🧪

Web Component

CSS Component

SegmentedControl 🧪

Web Component

CSS Component

Figma

Select 🧪

Web Component

SelectionTag 🧪🆕

Web Component

CSS Component

Slider 🧪

Web Component

Figma

Stepper 🧪🆕

Web Component

Figma

Switch 🧪

Web Component

CSS Component

Figma

TextInput 🧪

Web Component

CSS Component

Figma

Textarea 🧪

Web Component

CSS Component

Figma

TimeInput 🧪

Web Component

CSS Component

VerticalStepper 🧪🆕

Web Component

Figma

Layouts

Introduction

Accordion 🧪

Web Component

CSS Component

Figma

ActionMenu 🧪

Web Component

CSS Component

Figma

ButtonGroup 🧪

Web Component

CSS Component

Figma

Card 🧪

Web Component

CSS Component

Figma

Carousel 🧪🆕

Web Component

Figma

Fieldset 🧪

Web Component

CSS Component

Form 🧪

Web Component

CSS Component

InputGroup 🧪🆕

Web Component

CSS Component

Modal 🧪

Web Component

CSS Component

Figma

Sidebar 🧪

Web Component

CSS Component

Figma

Table 🧪🆕

Web Component

CSS Component

Figma

Tabs 🧪

Web Component

CSS Component

Figma

Molecules

Introduction

ActionCard 🧪

Web Component

CSS Component

Alert 🧪

Web Component

CSS Component

Figma

ArticleCard 🧪

Web Component

CSS Component

Avatar 🧪

Web Component

CSS Component

AvatarList 🧪

Web Component

CSS Component

Breadcrumbs 🧪

Web Component

CSS Component

Figma

EmptyState 🧪🆕

Web Component

CSS Component

Figma

FloatingBanner 🧪

Web Component

CSS Component

Promo 🧪

Web Component

CSS Component

Figma

Quote 🧪

Web Component

CSS Component

Figma

Stage 🧪

Web Component

CSS Component

Figma

StageBanner 🧪

Web Component

CSS Component

Figma

Functionalities

Introduction

Request 🧪

Resizer 🧪🆕

Organisms

Introduction

Footer 🧪🆕

Web Component

CSS Component

Navigation 🧪🆕

Web Component

CSS Component

Figma

Figma plugin

Introduction

Development

Introduction

Documentation

Figma

Dev utils

Overview

Helpers

VS Code

Troubleshooting

Index

Configuration

Information

Current version: 0.5.12

Preferences adjustments

...

Reset config

Last updated:

Pager

Next pageRelease notes