Components
Explore our multi-brand web components, which seamlessly integrate with any JavaScript framework. Whether you're a developer or designer, these components provide the flexibility and compatibility required to develop your educational product with ease.
Actions
Components that can be used to trigger an action.The Button bar provides a organized way to present buttons side by side.
Buttons let users make choices and take action.
A toggle button is a button that changes its state between "on" and "off" using an icon to represent its current state. It consists of just an icon (without any text) that changes visually to indicate the toggle state.
A toggle group lets users control related actions with clear visual feedback in a compact UI element.
Feedback & status
Components that communicate the states of the system to the user.A badge is a non-interactive visual indicator used to communicate status.
Inline messages communicate contextual information.
The progress bar is a visual indicator that shows how much of a task or process has been completed.
Skeletons are used to provide a low fidelity representation of content before it appears in a view.
Spinner is used as a loading indicator.
Tags represent a set of keywords that help label, categorize, and organize objects.
Form
Components that are crucial for capturing and processing user input.Checkboxes allow user to make yes or no decisions.
Wrapper component for forms
Wrapper component for forms
Component used to make single choice.
A search field lets users specify a word or phrase to filter relevant content within a specific page section.
A select component allows users to choose from a predefined list of options.
With switches you can choose between enabled or disabled states.
Text areas allow users to enter and edit multi-line text.
A text field component allows users to enter and edit single-line textual input.
Layout
Components that can be used to organize and structure page content.An accordion consists of a vertically stacked list of headers.
Cards display content or actions related to a single subject.
Media
These components show users, actions, or items, making your app look better and easier to understand.An avatar is a visual representation of a user or entity.
Icons communicate messages, enhance interactivity, and highlight critical information.
Navigation
Components that help users find their way around your app easily and understand its structure.Breadcrumbs are a navigation element used to show a user's location in a digital product.
Tabs let users switch between views within the same context.
Overlay
Components that add a bit of extra screen real estate. Or will focus the attention of the user in a specific, smaller area of the screen.A dialog serves as a container for in-page contextual information or actions.
A menu provides relevant actions based on the user's current selection, enhancing usability by offering quick access to necessary options and reducing cognitive load.
A dialog for displaying messages to the user.
A popover is a layer that pops up over all other elements on a page.
A tooltip is a small, contextual overlay that provides additional information.