Infineon Design System - HTML CDN Example

Accordion

Content for Initial Item. 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.

View Code

<ifx-accordion auto-collapse="false">
      <ifx-accordion-item caption="Label" open="true" aria-level-number="3" icon="">Content for Initial Item. 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.</ifx-accordion-item>
      <ifx-accordion-item caption="Label" open="false" aria-level-number="3" icon="">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.</ifx-accordion-item>
      <ifx-accordion-item caption="Label" open="false" aria-level-number="3" icon="">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.</ifx-accordion-item>
    </ifx-accordion>

Action List

View Code

<ifx-action-list list-aria-label="Navigation menu">
      <ifx-action-list-item item-title="Dashboard" description="View your main dashboard" value="dashboard" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
      <ifx-action-list-item item-title="Settings" value="settings" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
      <ifx-action-list-item item-title="Profile" description="Manage your profile information" value="profile" disabled="true" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
      <ifx-action-list-item item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality" description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics." value="analytics" item-aria-label="Navigation item">
        <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
      </ifx-action-list-item>
    </ifx-action-list>

Alert

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

View Code

<ifx-alert aria-live-text="assertive" variant="primary" icon="c-info-16" closable="true">Attention! This is an alert message — check it out!</ifx-alert>

AI Label

View Code

<ifx-ai-label divider="true" variant="label"></ifx-ai-label>

Button

View Code

<ifx-button type="button" aria-label-text="Button" variant="primary" size="m" target="_blank" theme="default" full-width="false" disabled="false" href="false">Button</ifx-button>

Card

Overline

Headline

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

View Code

<ifx-card direction="vertical" href="" target="_blank" aria-label="" aria-label-text="Card">
      <ifx-card-image position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="Coffee" slot="img"></ifx-card-image>
      <ifx-card-overline>Overline</ifx-card-overline>
      <ifx-card-headline>Headline</ifx-card-headline>
      <ifx-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</ifx-card-text>
      <ifx-card-links slot="buttons">
        <ifx-button variant="primary">Button</ifx-button>
        <ifx-button variant="secondary">Button</ifx-button>
      </ifx-card-links>
    </ifx-card>

Checkbox

Text

View Code

<ifx-checkbox error="false" disabled="false" checked="false" size="s" indeterminate="false" name="checkbox">Text</ifx-checkbox>

Checkbox Group

Option 0

Option 1

Option 2

View Code

<ifx-checkbox-group alignment="vertical" group-label-text="Group Label" caption-text="Caption text, description, error notification" size="m" show-group-label="false" show-caption="false" show-caption-icon="false" required="false">
      <ifx-checkbox value="0" size="m">Option 0</ifx-checkbox>
      <ifx-checkbox value="1" size="m">Option 1</ifx-checkbox>
      <ifx-checkbox value="2" size="m">Option 2</ifx-checkbox>
    </ifx-checkbox-group>

Chip

Item Label 1

Item Label 2

Item Label 3

Item Label 4

View Code

<ifx-chip placeholder="Label" size="medium" variant="single" theme="outlined" icon="" aria-label="Chip" read-only="false" value="Item Value" disabled="false">
      <ifx-chip-item value="Item Value 1">Item Label 1</ifx-chip-item>
      <ifx-chip-item value="Item Value 2">Item Label 2</ifx-chip-item>
      <ifx-chip-item value="Item Value 3">Item Label 3</ifx-chip-item>
      <ifx-chip-item value="Item Value 4">Item Label 4</ifx-chip-item>
    </ifx-chip>

Content Switcher

View Code

<ifx-content-switcher>
      <ifx-content-switcher-item value="item 1">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
      <ifx-content-switcher-item value="item 2">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
      <ifx-content-switcher-item value="item 3">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
      <ifx-content-switcher-item value="item 4">
        <ifx-icon icon="applications-16"></ifx-icon>
      </ifx-content-switcher-item>
    </ifx-content-switcher>

Date Picker

View Code

<ifx-date-picker name="date-picker" error="false" disabled="false" size="s" success="false" value="" max="" min="" label="Label Text" caption="Caption text, description, error notification." aria-label-text="Date Picker" required="false" autocomplete="on" type="date"></ifx-date-picker>

Dropdown

Menu Item

View Code

<ifx-dropdown placement="bottom-start" default-open="false" no-close-on-outside-click="false" no-close-on-menu-click="false" no-append-to-body="false" disabled="false">
      <ifx-dropdown-trigger-button variant="primary">Dropdown</ifx-dropdown-trigger-button>
      <ifx-dropdown-menu size="m">
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
        <ifx-dropdown-item icon="c-info-16" target="_self" href="" error="false">Menu Item</ifx-dropdown-item>
      </ifx-dropdown-menu>
    </ifx-dropdown>

Footer - Medium

Terms

Imprint

Privacy policy

Glossary

View Code

<ifx-footer copyright-text="© 1999 - 2026 Infineon Technologies AG">
      <div slot="socials">
        <ifx-link variant="title" href="http://facebook.com/infineon" aria-label="Follow us on Facebook">
          <ifx-icon icon="facebook"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://youtube.com/infineon" aria-label="Follow us on Youtube">
          <ifx-icon icon="youtube"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://instagram.com/infineon" aria-label="Follow us on Instagram">
          <ifx-icon icon="instagram"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://linkedin.com/infineon" aria-label="Follow us on LinkedIn">
          <ifx-icon icon="linkedin"></ifx-icon>
        </ifx-link>
        <ifx-link variant="title" href="http://xing.com/infineon" aria-label="Follow us on Xing">
          <ifx-icon icon="xing"></ifx-icon>
        </ifx-link>
      </div>
      <div slot="info">
        <ifx-link variant="menu" href="https://yourwebsite.com/terms" target="_blank">Terms</ifx-link>
        <ifx-link variant="menu" href="https://yourwebsite.com/imprint" target="_blank">Imprint</ifx-link>
        <ifx-link variant="menu" href="https://yourwebsite.com/privacy-policy" target="_blank">Privacy policy</ifx-link>
        <ifx-link variant="menu" href="https://yourwebsite.com/glossary" target="_blank">Glossary</ifx-link>
      </div>
    </ifx-footer>

Icon Button

View Code

<ifx-icon-button shape="round" variant="primary" icon="c-info-16" href="" target="_blank" size="m" aria-label-text="Icon Button" disabled="false"></ifx-icon-button>

Indicator

View Code

<ifx-indicator variant="number" number="1" inverted="false"></ifx-indicator>

Link

View Code

<ifx-link href="" aria-label="Link" target="_blank" size="m" variant="bold" download="" disabled="false">Link</ifx-link>

Navigation/Navbar

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 2 Item 1

Layer 2 Item 2

Layer 2 Item 3

Nested Item 3

Nested Item 4

Menu Item

Item1

Item2

View Code

<ifx-navbar show-logo-and-appname="true" application-name="Application name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
      <ifx-navbar-item icon="" slot="left-item" target="_self" href="" hide-on-mobile="true">
        <ifx-navbar-item icon="">
          <ifx-navbar-item>
            <ifx-navbar-item href="http://google.com" target="_blank">Link Layer 3 Nested Item 1</ifx-navbar-item>
            <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>
            <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>
            <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>
          </ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Nested Item 3</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>
          <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>
        </ifx-navbar-item>
        <ifx-navbar-item>Nested Item 3</ifx-navbar-item>
        <ifx-navbar-item>
          <ifx-navbar-item>Nested Item 4</ifx-navbar-item>
        </ifx-navbar-item>
      </ifx-navbar-item>
      <ifx-navbar-item href="" target="_self" slot="left-item" icon="" show-label="true">Menu Item</ifx-navbar-item>
      <ifx-navbar-item slot="left-item">
        <ifx-navbar-item>Item1</ifx-navbar-item>
        <ifx-navbar-item>Item2</ifx-navbar-item>
      </ifx-navbar-item>
      <ifx-search-bar slot="search-bar-left" is-open="false"></ifx-search-bar>
      <ifx-navbar-item number-indicator="" slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="" show-label="false" icon="image-16"></ifx-navbar-item>
      <ifx-navbar-item dot-indicator="false" slot="right-item" hide-on-mobile="" show-label="false" icon="image-16"></ifx-navbar-item>
      <ifx-navbar-profile user-name="" slot="right-item" image-url="" show-label="true" href="" target="_self" alt="profile image"></ifx-navbar-profile>
    </ifx-navbar>

Navigation/Sidebar

Menu Items

Menu Item

Sub menu item

Menu Item

Items group

Item 1

Item 2

View Code

<ifx-sidebar application-name="Application Name" collapsible="false" collapsed="false" show-header="true" show-footer="true" initial-collapse="true" terms-of-use="https://yourwebsite.com/terms" imprint="https://yourwebsite.com/imprint" privacy-policy="https://yourwebsite.com/privacy-policy" copyright-text="© 1999 - 2026 Infineon Technologies AG" position="left" hide-menu-label="Hide Menu">
      <ifx-sidebar-title>Menu Items</ifx-sidebar-title>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
      <ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item icon="image-16">
          <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
          <ifx-sidebar-item active="true">Sub menu item</ifx-sidebar-item>
          <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
        </ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
        <ifx-sidebar-item href="https://google.com" target="_blank">Menu Item</ifx-sidebar-item>
      </ifx-sidebar-item>
      <ifx-sidebar-title>Items group</ifx-sidebar-title>
      <ifx-sidebar-item href="https://google.com" target="_self" icon="image-16" number-indicator="" isactionitem="false" active="false">Item 1</ifx-sidebar-item>
      <ifx-sidebar-item href="https://google.com" target="_blank" icon="image-16">Item 2</ifx-sidebar-item>
    </ifx-sidebar>

Notification

Sample Notification

View Code

<ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com" link-target="_blank">Sample Notification</ifx-notification>

Pagination

View Code

<ifx-pagination total="50" current-page="1" show-items-per-page="" items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]' items-per-page-label="Result per Pages"></ifx-pagination>

Progress Bar

View Code

<ifx-progress-bar value="50" size="m" show-label="false"></ifx-progress-bar>

Radio Button

Text

View Code

<ifx-radio-button size="s" name="radio-button" value="radio" error="false" disabled="false" checked="false">Text</ifx-radio-button>

Radio Button Group

Option 0

Option 1

Option 2

View Code

<ifx-radio-button-group alignment="vertical" group-label-text="Group Label" caption-text="Caption text, description, error notification" size="m" show-group-label="false" show-caption="false" show-caption-icon="false" required="false">
      <ifx-radio-button value="0" size="m">Option 0</ifx-radio-button>
      <ifx-radio-button value="1" size="m">Option 1</ifx-radio-button>
      <ifx-radio-button value="2" size="m">Option 2</ifx-radio-button>
    </ifx-radio-button-group>

Search Bar

View Code

<ifx-search-bar is-open="true" disabled="false" value="" autocomplete="on"></ifx-search-bar>

Search Field

View Code

<ifx-search-field size="m" show-delete-icon="true" show-suggestions="false" enable-history="true" max-suggestions="10" max-history-items="5" history-key="ifx-search-history" history-header-text="Recent Searches" value="" autocomplete="on" placeholder="Search..." aria-label-text="Search field" delete-icon-aria-label="Clear search" history-delete-aria-label="Remove from history" dropdown-aria-label="Search suggestions and history" suggestion-aria-label="Search suggestion" history-item-aria-label="Search history item" disabled="false"></ifx-search-field>

Segmented Control

View Code

<ifx-segmented-control caption="Caption text to describe the controls" label="Group Label" size="regular" error="false" required="false">
      <ifx-segment value="Value1" icon="star-16"></ifx-segment>
      <ifx-segment value="Value2" icon="star-16"></ifx-segment>
      <ifx-segment value="Value3" icon="star-16"></ifx-segment>
      <ifx-segment value="Value4" icon="star-16"></ifx-segment>
      <ifx-segment value="Value5" icon="star-16"></ifx-segment>
    </ifx-segmented-control>

Select/Single Select

View Code

<ifx-select size="m" placeholder="true" show-clear-button="" show-search="" search-placeholder-value="Search..." required="" label="" caption="" placeholder-value="Placeholder" options='[{"value":"a","label":"option a","selected":false},{"value":"b","label":"option b","selected":false},{"value":"c","label":"option c","selected":false}]' error="false" disabled="false"></ifx-select>

Spinner

View Code

<ifx-spinner aria-label-text="" variant="default" size="m" inverted="false"></ifx-spinner>

Status

View Code

<ifx-status label="text" color="orange-500" border="true"></ifx-status>

Stepper

Step Label 1

Step Label 2

Step Label 3

Step Label 4

Step Label 5

View Code

<ifx-stepper active-step="2" aria-label-text="" aria-current-text="" show-step-number="false" variant="default" indicator-position="left">
      <ifx-step>Step Label 1</ifx-step>
      <ifx-step>Step Label 2</ifx-step>
      <ifx-step>Step Label 3</ifx-step>
      <ifx-step>Step Label 4</ifx-step>
      <ifx-step>Step Label 5</ifx-step>
    </ifx-stepper>

Stepper - Compact

Step Label 1

Step Label 2

Step Label 3

Step Label 4

Step Label 5

View Code

<ifx-stepper active-step="2" aria-label-text="" aria-current-text="" indicator-position="left" variant="compact" show-step-number="false">
      <ifx-step>Step Label 1</ifx-step>
      <ifx-step>Step Label 2</ifx-step>
      <ifx-step>Step Label 3</ifx-step>
      <ifx-step>Step Label 4</ifx-step>
      <ifx-step>Step Label 5</ifx-step>
    </ifx-stepper>

Switch

View Code

<ifx-switch name="switch" value="on" checked="false" disabled="false">Switch</ifx-switch>

Table (basic)

View Code

<ifx-basic-table cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]' rows='[{"id":1,"item":"Item 1","price":356,"date":"2025-05-11"},{"id":2,"item":"Item 2","price":55,"date":"2025-03-26"},{"id":3,"item":"Item 3","price":24},{"id":4,"item":"Item 4","price":874,"date":"2025-04-30"},{"id":5,"item":"Item 5","price":689,"date":"2025-09-14"},{"id":6,"item":"Item 6","price":46},{"id":7,"item":"Item 7","price":421,"date":"2026-07-25"},{"id":8,"item":"Item 8","price":17,"date":"2026-06-28"},{"id":9,"item":"Item 9","price":752},{"id":10,"item":"Item 10","price":73,"date":"2026-01-27"},{"id":11,"item":"Item 11","price":94,"date":"2026-10-31"},{"id":12,"item":"Item 12","price":846}]' table-height="auto" row-height="default" variant="default"></ifx-basic-table>

Table (advanced) - DefaultState

View Code

<ifx-table row-height="default" cols='[{"headerName":"ID","field":"id","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Item","field":"item","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Date","field":"date"}]' rows='[{"id":"1","item":"Item 1","price":356,"date":"2025-06-25"},{"id":"2","item":"Item 2","price":55,"date":"2025-03-26"},{"id":"3","item":"Item 3","price":24},{"id":"4","item":"x","price":874},{"id":"5","item":"x","price":689},{"id":"6","item":"x","price":46},{"id":"7","item":"Item 7","price":421},{"id":"8","item":"Item 8","price":17},{"id":"9","item":"x","price":752},{"id":"10","item":"Item 10","price":73},{"id":"11","item":"x","price":94}]' table-height="auto" pagination-items-per-page='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}, {"value":"all","selected":false}]' filter-orientation="none" variant="default" fit-column="false" column-min-width="200" column-width="100" headline="Matching results" headline-number="0" pagination="false" server-side-pagination="false" show-loading="false" enable-selection="false" fit-columns="false"></ifx-table>

Tabs

Content for Tab #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 Tab #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 Tab #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.

View Code

<ifx-tabs orientation="horizontal" active-tab-index="0" full-width="false" position-sticky="false" subline="" label="" number="0">
      <ifx-tab header="Tab 1" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #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.</ifx-tab>
      <ifx-tab header="Tab 2" disabled="false" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #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.</ifx-tab>
      <ifx-tab header="Tab 3" icon="" icon-position="left" subline="" label="" number="0">Content for Tab #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.</ifx-tab>
    </ifx-tabs>

Text Field

View Code

<ifx-text-field error="false" size="m" icon="" success="false" placeholder="Placeholder" read-only="false" caption="Caption" label="Label" required="true" name="text-field" show-delete-icon="false" value="" autocomplete="on" type="text" internal-id="text-field" aria-label="text field for user input" disabled="false" maxlength=""></ifx-text-field>

Textarea

View Code

<ifx-textarea caption="Caption text, description, error notification" cols="43" error="false" label="Label Text" name="textarea" placeholder="Placeholder" required="true" read-only="false" resize="both" rows="5" value="" wrap="soft" full-width="false" disabled="false"></ifx-textarea>

Tooltip

I'm the tooltip reference element - Please hover me

View Code

<ifx-tooltip text="Hi, I'm a tooltip" variant="compact" position="auto" icon="c-info-16" aria-label-text="Tooltip with important information" header="Tooltip headline">I'm the tooltip reference element - Please hover me</ifx-tooltip>

Modal (Manual Example)

View Code

<ifx-modal
  id="modal"
  caption="Modal Title"
  caption-aria-label="Additional information for caption"
  close-button-aria-label="Close modal"
  variant="default"
  close-on-overlay-click="false"
  show-close-button="true"
  size="s">
  <div slot="content">
    <span>Modal content</span>
  </div>
  <div slot="buttons">
    <ifx-button variant="secondary">Cancel</ifx-button>
    <ifx-button>OK</ifx-button>
  </div>
</ifx-modal>
<ifx-button id="open-modal">Open Modal</ifx-button>

<script>
  const modal = document.getElementById('modal');
  const openButton = document.getElementById('open-modal');
  
  openButton.addEventListener('click', () => {
    modal.opened = true;
  });
  
  modal.addEventListener('ifxOpen', (event) => {
    console.log('ifxOpen:', event.detail);
  });
  
  modal.addEventListener('ifxClose', (event) => {
    console.log('ifxClose:', event.detail);
  });
</script>