Skip to content

Main Navigation

Assets

Media

Atoms

Inputs

ProgressTracker

SegmentedControl

Layouts

Molecules

Functionalities

Libraries

ZDS Components Library

ZDS Components Library V2

ZDS Data Library

Training

ZDS Training tasks

Sidebar Navigation

Release notes

Roadmap

Resources

Getting started

About

Introduction

Processes

How to start

Introduction

Basic concepts

How it works

Code examples

Welcome page

Log in

Landing page

Secondary page

Multi-step form

Packages

Overview

@zurich/dev-utils

@zurich/design-tokens

@zurich/css-components

@zurich/web-components

@zurich/angular-components

@zurich/react-native

Support

FAQs

Foundations

Introduction

Breakpoints

Spacers

Layouts

Flex

Grid

Colors

Intro

Palettes

Shadows

Typography

Intro

Text styles

Themes

Icons

Pictograms

Images

Zurich media

Images

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

Shape 🐞📱

Web Component

CSS Component

Figma

SmilingZ 🧪📱

Web Component

CSS Component

Figma

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

BooleanIcon 🧪

Web Component

CSS Component

Calendar 🧪🆕

Web Component

Figma

Checkbox 🧪

Web Component

CSS Component

Figma

CheckboxGroup 🧪🆕

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

Slider 🧪🆕

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

Layouts

Introduction

Accordion 🧪

Web Component

CSS Component

Figma

ButtonGroup 🧪🆕

Web Component

CSS Component

Figma

Card 🧪

Web Component

CSS Component

Figma

DropdownMenu 🧪

Web Component

CSS Component

Figma

Fieldset 🧪

Web Component

CSS Component

Form 🧪

Web Component

CSS Component

Modal 🧪

Web Component

CSS Component

Figma

Sidebar 🧪🆕

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

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 🧪🆕

Figma plugin

Introduction

Development

Introduction

Documentation

Dev utils

Overview

Helpers

VS Code

Troubleshooting

Index

Figma

...

Figma integration with VSCode

Figma extension for VSCode

...

alt

Last updated:

Pager

Next pageRelease notes