Component library

The Insites web components are custom HTML tags that work on any page, with no build step. They are grouped below by what you use them for: actions, form fields, structure, data and feedback. Each page has a live demo, every attribute and every event.

New to the library? Start with Getting started to load it on a page. The icons the components use are on Font Icons.

Actions

Buttons, menus and controls that start an action or change what is shown.

• 
  Buttonsins-button
• 
  Button Groupins-button-group
• 
  Dropdownins-dropdown
• 
  Sortins-sort
• 
  Filtersins-filter
• 
  Filter Itemsins-filter-item

Form fields

Inputs, selects, pickers and editors that collect a value.

• 
  Card Selectins-card-select
• 
  Card Select Optionins-card-select-option
• 
  Checkbox Groupins-checkbox-group
• 
  Checkboxins-checkbox
• 
  Check Cardins-checkbox-card
• 
  Code Editorins-code-editor
• 
  Credit Cardins-credit-card
• 
  Date and Timeins-date-time
• 
  Image Pickerins-image-picker
• 
  Input Tableins-input-table
• 
  Inputins-input
• 
  Multiple Inputins-input-multiple
• 
  Markdown Editorins-markdown-editor
• 
  Phoneins-input-phone
• 
  Telins-input-tel
• 
  Radio Groupins-radio-group
• 
  Radioins-radio
• 
  Input Selectins-input-select
• 
  Input Select Optionins-input-select-option
• 
  Input Select Groupins-input-select-group
• 
  Sliderins-input-slider
• 
  Stepperins-input-stepper
• 
  Switchins-toggle-switch
• 
  Textareains-textarea
• 
  Uploadins-input-file
• 
  WYSIWYG Editorins-editor
• 
  Button Selectins-button-select
• 
  Button Select Optionins-button-select-option
• 
  Button Select Groupins-button-select-group
• 
  Input Searchins-input-search

Structure

Cards, tabs, headers, sidebars and other pieces that lay out a page.

• 
  Carouselins-carousel
• 
  Galleryins-gallery
• 
  Headingins-heading
• 
  WrappersLayout classes
• 
  Headerins-header
• 
  Header Userins-header-user
• 
  Sidebarins-sidebar
• 
  Sidebar Itemins-sidebar-item
• 
  Sidebar Footer Menuins-sidebar-footer
• 
  Sidebar Footer Buttonins-sidebar-footer-button
• 
  Stepsins-steps
• 
  Tabsins-tab
• 
  Tab Itemsins-tab-item
• 
  Accordionins-accordion
• 
  Cardins-card

Data

Tables, charts, tags and timelines that show records and numbers.

• 
  Kanban Boardins-kanban-board
• 
  Charts - Barins-bar-chart
• 
  Charts - Lineins-line-chart
• 
  Charts - Pieins-pie-chart
• 
  Charts - Sparklineins-sparkline
• 
  Markdownins-markdown
• 
  Progress Barins-progress-bar
• 
  Info Tableins-info-table
• 
  Tableins-table
• 
  Tagins-tag
• 
  Thumbnailsins-thumbnail
• 
  Timelineins-timeline
• 
  Timeline itemsins-timeline-item

Feedback

Modals, drawers, alerts, tooltips and loaders that respond to the reader.

• 
  Loaderins-loader
• 
  Alert Boxins-alert-box
• 
  Drawerins-drawer
• 
  Modalins-modal
• 
  Backdropins-backdrop
• 
  Tooltipins-tooltip

Reference only

These 22 components ship in the library but have no page of their own yet. Most of them are parts that you place inside a documented component, such as the items of an accordion or the cards of a Kanban board. Their attributes are listed in the library source.

• ins-accordion-item
• ins-accordion-link
• ins-breadcrumbs
• ins-chart
• ins-dropdown-item
• ins-gallery-image
• ins-input-search-option
• ins-input-tooltip
• ins-instances
• ins-instances-item
• ins-instances-sub-item
• ins-kanban-card
• ins-kanban-column
• ins-notifications
• ins-notifications-item
• ins-renderer
• ins-select
• ins-select-group
• ins-select-option
• ins-sidebar-footer-menu
• ins-step
• ins-styleguide

Seven more folders in the library source (ins-accordion-item-heading, ins-admin, ins-content, ins-page, ins-table-row, ins-table-td and ins-table-th) are internal parts that the website line does not load on their own.