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.
Illustration of coming component.An illustrated coming component representing coming component card.Illustration of coming component.An illustrated coming component representing coming component card.
Button bar

The Button bar provides a organized way to present buttons side by side.

Illustration of button component.An illustrated button component representing button component card.Illustration of button component.An illustrated button component representing button component card.
Button

Buttons let users make choices and take action.

Illustration of coming component.An illustrated coming component representing coming component card.Illustration of coming component.An illustrated coming component representing coming component card.
Toggle button

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.

Feedback & status

Components that communicate the states of the system to the user.
Illustration of the badge component.An illustrated badge component representing badge component card. Illustration of the badge component.An illustrated badge component representing badge component card.
Badge

A badge is a non-interactive visual indicator used to communicate status.

Illustration of the inline message component.An illustrated inline message component representing inline message component card. Illustration of the inline message component.An illustrated inline message component representing inline message component card.
Inline message

Inline messages communicate contextual information.

Illustration of coming component.An illustrated coming component representing coming component card. Illustration of coming component.An illustrated coming component representing coming component card.
Progress bar

The progress bar is a visual indicator that shows how much of a task or process has been completed.

Illustration of the skeleton component.An illustrated skeleton component representing skeleton component card. Illustration of the skeleton component.An illustrated skeleton component representing skeleton component card.
Skeleton

Skeletons are used to provide a low fidelity representation of content before it appears in a view.

Illustration of the spinner component.An illustrated spinner component representing spinner component card. Illustration of the spinner component.An illustrated spinner component representing -component- component card.
Spinner

Spinner is used as a loading indicator.

Illustration of coming component.An illustrated coming component representing coming component card. Illustration of coming component.An illustrated coming component representing coming component card.
Tag

Tags represent a set of keywords that help label, categorize, and organize objects.

Form

Components that are crucial for capturing and processing user input.
Illustration of the checkbox component.An illustrated checkbox component representing checkbox component card. Illustration of the checkbox component.An illustrated checkbox component representing checkbox component card.
Checkbox

Checkboxes allow user to make yes or no decisions.

Illustration of the form field component.An illustrated form field component representing form field component card. Illustration of the form field component.An illustrated form field component representing form field component card.
Form field

Wrapper component for forms

Illustration of the form component.An illustrated form component representing form component card. Illustration of the form component.An illustrated form component representing form component card.
Form

Wrapper component for forms

Illustration of the radio button component.An illustrated radio button component representing radio group component card. Illustration of the radio button component.An illustrated radio button component representing radio group component card.
Radio group

Component used to make single choice.

Illustration of coming component.An illustrated coming component representing coming component card. Illustration of coming component.An illustrated coming component representing coming component card.
Search field

A search field lets users specify a word or phrase to filter relevant content within a specific page section.

Illustration of select component.An illustrated select component representing select component card. Illustration of select component.An illustrated select component representing select component card.
Select

A select component allows users to choose from a predefined list of options.

Illustration of switch component.An illustrated switch component representing switch component card. Illustration of switch component.An illustrated switch component representing switch component card.
Switch

With switches you can choose between enabled or disabled states.

Illustration of textarea component.An illustrated textarea component representing textarea component card. Illustration of textarea component.An illustrated textarea component representing textarea component card.
Text area

Text areas allow users to enter and edit multi-line text.

Illustration of text field component.An illustrated text field component representing text field component card. Illustration of text field component.An illustrated text field component representing text field component card.
Text field

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.
Illustration of the accordion component.An illustrated accordion component representing accordion component card. Illustration of the accordion component.An illustrated accordion component representing accordion component card.
Accordion

An accordion consists of a vertically stacked list of headers.

Illustration of the card component.An illustrated card component representing card component card. Illustration of the card component.An illustrated card component representing card component card.
Card

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.
Illustration of the avatar component.An illustrated avatar component representing avatar component card. Illustration of the avatar component.An illustrated avatar component representing avatar component card.
Avatar

An avatar is a visual representation of a user or entity.

Illustration of the icon component.An illustrated icon component representing icon card. Illustration of the icon component.An illustrated icon component representing icon card.
Icon

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.
Illustration of coming component.An illustrated coming component representing coming component card. Illustration of coming component.An illustrated coming component representing coming component card.
Breadcrumbs

Breadcrumbs are a navigation element used to show a user's location in a digital product.

Illustration of the tabs component.An illustrated tabs component representing tabs component card. Illustration of the tabs component.An illustrated tabs component representing tabs component card.
Tabs

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.
Illustration of the dialog component.An illustrated dialog component representing dialog component card. Illustration of the dialog component.An illustrated dialog component representing dialog component card.
Dialog

A dialog serves as a container for in-page contextual information or actions.

Illustration of coming component.An illustrated coming component representing coming component card. Illustration of coming component.An illustrated coming component representing coming component card.
Menu

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.

Illustration of coming component.An illustrated coming component representing coming component card. Illustration of coming component.An illustrated coming component representing coming component card.
Message dialog

A dialog for displaying messages to the user.

Illustration of the popover component.An illustrated popover component representing popover component card. Illustration of the popover component.An illustrated popover component representing popover component card.
Popover

A popover is a layer that pops up over all other elements on a page.

Illustration of the tooltip component.An illustrated tooltip component representing tooltip component card. Illustration of the tooltip component.An illustrated tooltip component representing tooltip component card.
Tooltip

A tooltip is a small, contextual overlay that provides additional information.