Menu Item 1 Layer 1 Nested Item 1 Layer 2 Nested Item 2 Link Layer 3 Nested Item 1 Layer 3 Nested Item 2 Layer 3 Nested Item 3 Layer 3 Nested Item 4 Layer 2 Nested Item 3 Layer 2 Nested Item 4 Layer 2 Nested Item 5 Layer 1 Nested Item 2 Layer 2 Item 1 Layer 2 Item 2 Layer 2 Item 3 Nested Item 3 Layer 1 Nested Item 4 Nested Item 4 Menu Item 2 More Item1 Item2 Right Item Right Item Nested one Nested one Nested one Final one User Item Item Item Item

Using Stencil web components in an Vanilla JS

Accordion

Content for Item #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

Alert

Attention! This is an alert message — check it out!

Breadcrumb

Breadcrumb 1 Google Bing Yahoo Naver Breadcrumb 2 Google Bing Yahoo Naver Breadcrumb 3

Button

Click me Not clickable when disabled

Checkbox

label
Submit

Toggle Disabled Toggle Error Toggle Value

Checkbox Group

Option 0Option 1Option 2

Card

Overline Headline This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more.This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more.This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. Button Button

Chip

Item Label 0 Item Label 1 Item Label 2 Item Label 3

Content Switcher

Item 1 Item 2 Item 3 Item 4

Dropdown

dropdown Header Text First One Two Three Four

FilterTypeGroup

Icon Button

Link

Link

Modal

Multi-Select

Category A - Main Section Category A.1 - First Subsection Option A.1.1 - Basic Item Option A.1.2 - Preselected Item Option A.1.3 - Another Item Category A.2 - Second Subsection Option A.2.1 - Nested Item Option A.2.2 - Deep Nested Parent Option A.2.2.1 - Level 4 Item Option A.2.2.2 - Level 4 Item Option A.2.2.3 - Even Deeper Option A.2.2.3.1 - Level 5 Item Option A.2.2.3.2 - Level 5 Item Option A.2.3 - Final Nested Option A.3 - Direct Child Option A.4 - Another Direct Child Category B - Secondary Section Category B.1 - Mixed Content Option B.1.1 - Standard Item Category B.1.2 - Sub-Category Option B.1.2.1 - Nested Choice Option B.1.2.2 - Nested Choice Option B.1.2.3 - Nested Choice Option B.1.3 - Standard Item Option B.2 - Standalone Item Option B.3 - Standalone Item Category C - Complex Structure Category C.1 - Multi-Level Group Category C.1.1 - Sub-Group Alpha Option C.1.1.1 - Alpha Item 1 Option C.1.1.2 - Alpha Item 2 Category C.1.2 - Sub-Group Beta Option C.1.2.1 - Beta Item 1 Option C.1.2.2 - Beta Item 2 Option C.1.2.3 - Beta Item 3 Option C.1.3 - Direct Item Category C.2 - Another Group Option C.2.1 - Group Item Option C.2.2 - Group Item Option D - Top-Level Standalone Option E - Top-Level Standalone Category F - Final Section Option F.1 - Simple Item Option F.2 - Simple Item Category F.3 - Last Group Option F.3.1 - Final Nested Option F.3.2 - Final Nested Option F.3.3 - Final Nested

Notification

Success notification
Locked notification
Error notification

Number Indicator

+ -

Pagination

Progress bar

Update Progress

Radio Button

Apple Pear Orange Submit

Radio Button Group

Option 0 Option 1 Option 2 Option 3

Spinner

Sidebar

Item Header Header Section Menu Item Click me Menu Item 2 Item Header Item One Item Two Item Three Item Four

Single-Select

Toggle Disabled Toggle Error

Slider

Value: 50

Slider (Double)

Min Value: 20
Max Value: 80

Search field

Search bar

Status

Switch

Tabs

tab 1 content tab 2 content tab 3 content

Stepper

Step 1 Step 2 Step 3 Step 4 Step 5 Previous Step Toggle Show Number Toggle Variant Next Step

Tag

tag

Table (Basic)

Table (Advanced)

Table with sidebar filter

Text Field

Label

Standard text field

test

Submit form Reset form

Tooltip

I'm the compact tooltip reference element - Please hover me

Dismissible tooltip on button click

Extended tooltip on button hover

File Upload