Skip to content
Deprecated - contains information about version 17 of the IDS library
See
design.if.eu
for the latest documentation
Core
Relax
Design
Develop
Components
Branches
Resources
Close search results
Most common searches:
Components
Input Fields
Icons
Changelog
Data Tables
About
News
Design
Contribute
Foundation
Color
Overview
Palette
Combinations
Resources
Content
Layout
Spacing methods
Baseline grid
Tokens
Text modules
Responsive layout grid
Usage
Baseline grid
Spacing
Logotype
Versions
Clear space and minimum size
Placement
Examples
Assets
Typography
Typeface overview
Font size unit
Primary Typeface
Principles for headlines and sub-headings
Text Weight Principles
Readability and typographic rules
Fallback typeface
Assets
Text flow
Learn more
Data Visualization
Colors
Types
Usage
Behaviours
Accessibility
Anatomy
Further reading
Icons
Style overview
Categories
Color and background
Sizes
Usage
Color
Palette
Guidelines
Data presentation
Selection controls
Accessibility
Overview
Testing
Extensions
Screen readers
Automated
States
Forms
Overview
Style
Validation
Anatomy
Related
Discovery vs browsing
Visual Identity
Getting started
Assets
Design kits
Figma
XD
Grid
Install Design kits
Learn about our foundational gudelines
Review our usage guidelines
Develop
Getting Started
Setup
Frameworks
CSS
React
Other frameworks
JavaScript
Web Component
Contribute
Set up
Dev server
Creating a component
Styling a component
Documenting
Add icon
Troubleshooting
Guidelines
Browser support
Globals
Links and buttons
Semantic components
Repositories and Tools
Design tokens
Guidelines
Usage
Components
Actions
Floating Action Button
CSS
Usage
JavaScript
Usage
Overview
Variations
Usage
Default floating action button
Primary floating action button
Button
CSS
Usage
Tokens
Overview
Variations
Usage
Specs
Anatomy
States
Contextual Menu
JavaScript
Accessibility
Usage
Api
CSS
Usage
Accessibility
Tokens
Usage
Behaviours
Anatomy
Specs
Icon Button
CSS
Usage
Tokens
Overview
Usage
Behaviours
Anatomy
Specs
Cards
Info card
CSS
Usage
Tokens
Accessibility
Overview
Variations
Usage
Behaviours
Anatomy
Specs
Navigational Card
CSS
Usage
Tokens
Overview
Variations
Behaviours
Usage
Anatomy
Specs
Disclosure Card
JavaScript
Usage
CSS
Usage
Accessibility
Behaviours
Anatomy
Specs
Editorial Card
CSS
Usage
Accessibility
Tokens
Overview
Usage
Behaviours
Modifiers
Specs
Anatomy
Color
CSS
Accessibility
Classnames
App development
Tokens
Feedback
Consent Banner
Implementation
Loader
CSS
Usage
Usage
Status Indicator
CSS
Usage
Accessibility
Overview
Usage
Anatomy
Specs
Toast
CSS
Usage
Tokens
Web Component
Usage
Api
Variations
Usage
Behaviours
Accessibility
Anatomy
Specs
Resources
Alert Banner
CSS
Usage
Tokens
Usage
Anatomy
Specs
Progress Tracker
CSS
Usage
Tokens
Overview
Variations
Usage
Indeterminate
Determinate
Small
Inputs
Checkbox
CSS
Usage
Modifiers
Tokens
Overview
Usage
Behaviours
Anatomy
Dropdown Filter
CSS
Usage
Accessibility
Tokens
Usage
Anatomy
Specs
Dropdown Select
CSS
Usage
Tokens
Overview
Usage
Behaviours
Anatomy
Specs
File Upload
CSS
Usage
Tokens
JavaScript
Usage
Overview
Variations
Input
Button
Drag and drop
File list
Related links
Input Label
CSS
Usage
Accessibility
Usage
Behaviours
Anatomy
Specs
Numeric Stepper
CSS
Usage
JavaScript
Usage
Api
Overview
Usage
Behaviours
Anatomy
Specs
Phonenumber
CSS
Usage
Web Component
Usage
Api
Usage
Accessibility
Anatomy
Specs
Radio Buttons
CSS
Usage
Tokens
Overview
Usage
Behaviours
Anatomy
Search Field
CSS
Usage
Overview
Variations
Usage
Behaviours
Anatomy
Specs
Global header
Slider
CSS
Usage
Accessibility
Usage
Anatomy
Specs
Toggle
CSS
Usage
Overview
Usage
Behaviours
Anatomy
Autocomplete
JavaScript
Features
Usage
Api
CSS
Usage
Modifiers
Tokens
Overview
Variations
Usage
Behaviours
Autocomplete string
Autocomplete tags
Accessibility
Anatomy
Specs
Related links
Datepicker
JavaScript
Usage
Api
Web Component
Usage
CSS
Usage
Frameworks
Accessibility
Options
Usage
Operational states
Anatomy
Specs
Input Fields
CSS
Usage
Tokens
Accessibility
Overview
Usage
Behaviours
Anatomy
Segmented Control
CSS
Usage
Accessibility
Tokens
Overview
Usage
Behaviours
Anatomy
Specs
Textarea
CSS
Usage
Tokens
Usage
Behaviours
Anatomy
Specs
Layout
Breakpoint
CSS
Tokens
Mixins
App development
Grid
CSS
Usage
Tokens
Overview
Types
Options
Section
CSS
Usage
Modifiers
Tokens
Overview
Usage
Behaviours
Specs
Media
Avatar
CSS
Usage
Modifiers
Tokens
Avatar
Usage
Variations
Default
Headshot
Initials
Behaviours
Icons
CSS
Usage
Mixins
Tokens
App development
Accessibility
Logo
CSS
Usage
Assets
Usage
Downloads
Video
CSS
Usage
Overview
Variations
Usage
Overlay
Controls
Transcript
States
Anatomy
Navigation
Accordion Menu
CSS
Usage
Accessibility
JavaScript
Features
Usage
Api
Overview
Usage
Behaviours
Accessibility
Anatomy
Specs
Breadcrumbs
CSS
Usage
Usage
Anatomy
Dropdown Menu
CSS
Usage
Accessibility
Tokens
JavaScript
Features
Usage
Api
Overview
Usage
Behaviours
Anatomy
Specs
Link List
CSS
Usage
Overview
Usage
Behaviours
Anatomy
Specs
Pagination
CSS
Usage
Accessibility
Overview
Variations
Default
Dots
Accessibility
Shortcuts
CSS
Usage
Tokens
Overview
Usage
Behaviour
Anatomy
Specs
Sidebar Menu
CSS
Usage
Accessibility
Overview
Usage
Behaviours
Anatomy
Specs
Tabs
CSS
Modifiers
Truncation
JavaScript
Features
Usage
Api
Variations
Usage
Behaviours
Anatomy
Specs
Resources
Tooltip Menu
CSS
Usage
Accessibility
Tokens
Overview
Usage
Behaviours
Anatomy
Specs
Link
CSS
Usage
Tokens
Usage
Accessible download links
States
Overlay
Help Tooltip
CSS
Usage
Web Component
Usage
Overview
Usage
Behaviours
Accessibility
Anatomy
Info Tooltip
CSS
Usage
Web Component
Usage
Modal
CSS
Usage
JavaScript
Usage
Web Component
Usage
Usage
Anatomy
Specs
Tooltip
CSS
Usage
Tokens
JavaScript
Usage
Overview
Usage
Accessibility
Anatomy
Popover
JavaScript
Usage
Api
CSS
Usage
Accessibility
Tokens
Overview
Usage
Behaviours
Anatomy
Specs
Accessibility
Page Sections
Banner
CSS
Usage
Usage
Anatomy
Specs
Global Footer
CSS
Usage
Usage
Anatomy
Specs
Global Minimal Header
CSS
Usage
Accessibility
Overview
Usage
Anatomy
Specs
Hero Navigation
CSS
Usage
JavaScript
Usage
Overview
Usage
Behaviours
Anatomy
Implementation
Hero
CSS
Usage
Overview
Usage
Modifiers
Anatomy
Specs
Panel
CSS
Usage
Tokens
Accessibility
JavaScript
Usage
Api
Overview
Variations
Usage
Behaviours
Anatomy
Specs
Quick Facts
CSS
Usage
Overview
Usage
Behaviours
Anatomy
Specs
Split
CSS
Usage
Tokens
Overview
Usage
Behaviours
Anatomy
Specs
Timeline
CSS
Usage
Overview
Variations
Usage
Anatomy
Specs
FAQ
JavaScript
Usage
Web Component
Usage
CSS
Usage
Tokens
Accessibility
Usage
Behaviours
Anatomy
Specs
Global Header
CSS
Usage
Accessibility
Tokens
Overview
Variations
Usage
Open pages
My pages
My Business
Co-branding
Search
Header
CSS
Usage
Tokens
Overview
Usage
Anatomy
Specs
Tables
Comparison Table
CSS
Usage
Accessibility
Tokens
JavaScript
Features
Usage
Overview
Usage
Product Matrix Table
CSS
Usage
Usage
States
Anatomy
Responsive
Specs
Data Tables
JavaScript
Features
Usage
CSS
Usage
Behaviours
Accessibility
Responsive
Tokens
Overview
Principles
Variations
Usage
Behaviours
Responsive
Anatomy
Specs
Text
Blockquote
CSS
Usage
Accessibility
Resources
Usage
Anatomy
Specs
Typography
CSS
Usage
Mixins
Classnames
Tokens
App development
Tag
JavaScript
API
CSS
Usage
Tokens
Overview
Variations
Usage
Category tags
Filter tags
Input tags
Status tags
Utils
CSS
Responsive
Spacing
Hidden
Tokens
App development
Text alignment
Code
JavaScript
Api
Data Visualization
CSS
Usage
Tokens
Overview
Legend
Infographics
Charting libraries
Color
CSS
Tokens
UI Shell
CSS
Usage
Tokens
Overview
Usage
Anatomy
Resources
Downloads
Changelog
Back to top
Contact us
, Opens in new window