Components

Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

actions

Button

Button

Buttons allow users to perform an action or to navigate to another page, with a single tap.

Button Group

Button Group

Button group component is a grouping of buttons gives users access to frequently performed, related to each other actions.

Close Button

Close Button

A close button used for dismissing content like modals and alerts.

data-display

Avatar

Avatar

Avatar component is a visual representation of an entity, such as a user or an organization.

Avatar Group

Avatar Group

Avatar group component displays a number of avatars grouped together in a stack.

Badge

Badge

Badge component is a visual indicator for numeric values such as tallies and scores.

Lozenge

Lozenge

Lozenge is a visual indicator used to highlight an item's status for quick recognition.

Table

Table

Tables are used to organize and display information.

Tag

Tag

Tags allow users to label, categorize or organize content to describe them.

feedback

Alerts

Alerts

Alerts is flash messages that shows contextual feedback messages for attracts the user's attention without interrupting the user's task.

Modal

Modal

Modals are overlays that display content in a layer above the page requires user interaction.

Placeholders

Placeholders

Placeholders used for loading placeholders for your content before the data gets loaded on the page.

Popover

Popover

Popovers are containers used to display transient content such as menus, options, additional actions, and more in an overlay.

Progress bar

Progress bar

Progress bar indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

Progress Indicator

Progress Indicator

Progress indicator shows the position of the current screen in a list of screens.

Progress Tracker

Progress Tracker

Progress tracker displays a user’s steps and progress through a set of steps.

Rating

Rating

Rating provides rating to an item or experience,and can allow the user to submit a rating of their own.

Spinner

Spinner

Spinner is an animated spinning icon that lets users know content is being loaded.

Toast

Toast

Toasts display brief, temporary notifications for users on the outcome of an action.

Tooltip

Tooltip

Tooltips is a floating, non-actionable label show contextual help or specific feature when a user hovers or focuses on an element.

Validation

Validation

Validation provide a valuable, actionable feedback to your users with HTML5 form validation.

inputs

Checkbox

Checkbox

Checkboxs allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Dropdown

Dropdown

Dropdown displays a list of actions or options allows the user to select one.

Floating Label

Floating Label

Floating label display the type of input in floating over an input fields.

Form

Form

Form element allows users to input information.

Input Group

Input Group

Input group allows users to grouping related form controls in a single input.

Radio

Radio

Radio group allows users to select only one option from a number of choices.

Range

Range

Range component lets users choose a numeric value from the given values on a slider.

Select Input

Select Input

Select input allows users to make a single selection or multiple selections from a list of options in a limited space.

Switch

Switch

Switches allow users to turn an individual option on or off.

Text field

Text field

Text fields allow users to input custom text entries with a keyboard.

misc

Layout

Layout

Layout are build page layouts with 2 columns.

navigation

Breadcrumb

Breadcrumb

Breadcrumbs component are a navigation system show hierarchy and navigational context for a user’s location within an app.

Menu

Menu

Menus allows users take one action from a list of options, configure settings, and more.

Navbar

Navbar

Navbars are allows users quickly navigate the entire content of a product or a section of the application.

Offcanvas

Offcanvas

Offcanvas is a hidden sidebar on the page used for navigation, shopping carts, etc.

Pagination

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Pills

Pills

Pills allows users navigate to another pages or switch to another content on the same page.

Scrollspy

Scrollspy

Scrollspy plugin allows automatically scroll into the particular element in the viewport.

Side Navigation

Side Navigation

Side navigation allows users navigate to another pages or sections on the left or right side of a page.

Stretched Link

Stretched Link

Stretched link allow users to navigate to a different location on overlay elements.

Tabs

Tabs

Tabs organize content into multiple sections on the same page and allow users to navigate between them.

surfaces

Accordion

Accordion

Accordion component allows the user to show and hide sections of related content on a page.

Blankslate

Blankslate

Blankslates are used as placeholders when there is a lack of content within a page or section.

Card

Card

Cards used to group similar information into flexible containers to let users to browse a collection of related items and actions.

Carousel

Carousel

Carousel are slideshow for cycling through multiple elements such as images, videos, or text.

Collapse

Collapse

Collapse are expansion panel allows users can expand or collapse the long sections of information.

List Group

List Group

List gorup used for displays a continuous group of text or images.