Advantech UI Kit


The definitive guide to standardizing the design and code of UI kit is based on the Advantech website guidelines. You can use these components by copying and pasting to effortlessly build consistent user interfaces.

Watch Video
 

Components

Card list

Modal

Add dialogues to your website, whether it's for lightboxes, user notifications, or entirely custom content presentation.

Read More
Card list

Button

Buttons provide a clickable and let user take action.

Read More
Card list

Key Visual

Can simultaneously showcase text, background images, or videos in a section. With multiple assets, a carousel effect will be demonstrated.

Read More
accordion

Accordion

The accordion allows users to toggle the display of content sections

Read More
card

Card

The Card provides a flexible and extensible content container with multiple variants and options

Read More
Card list

List

Lists help combine cards and content playlists

Read More
table

Loading

Loading will be used while a page or component area is being loaded

Read More
Solution Portal Key Visual Guidelines

Navbar

The navbar will stick to the top when you reach its scroll position

Read More
table

Table

A table displays collections of data that are organized into rows

Read More
Solution Portal Key Visual Guidelines

Horizontal Tab

The tab component is used to hide content behind selectable tabs. These tabs are typically arranged horizontally at the top

Read More
Solution Portal Key Visual Guidelines

Vertical Tab

A component that shows groups of content, separated into tabs, and controlled by the tabs

Read More