Web Components Overview

Last updated on August 02, 2024.

Insites allows you to create world class web applications using elements through a complete design and development eco-system.

Insites Components provide a simple solution to creating web systems with a unified look on all platforms. These components reduce complexity and inconsistency by providing you with a complete design and development eco-system that work across the web, mobile and desktop. Through these components, the overall creation process can be sped up and done effectively. No more worries about additional design costs and revisions for your system. Our components work harmoniously and beautifully together, giving you the ability to create a greater whole.

Installation

Start using Insites on your projects by simply importing these files on your template.

CDN

Add these to your <head> tag.

Code Snippet

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>

Using the Latest Version

Using this version will keep your project up to date with the latest release of Insites Components.

Code Snippet

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>

Specific Version

You can put specific version of Insites Components in your project to avoid breaking change or unexpected changes when we release an update.

Code Snippet

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2.14.2/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2.14.2/css/insites.css" />
<script type="module" src="https://components.insites.io/v2.14.2/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2.14.2/insites.js"></script>

Using Specific CSS

You can choose which styles you only need for your page with specific CSS resource.

Code Snippet

<!-- Data Display -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-data-display.css" />

<!-- Data Display -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-data-display.css" />

<!-- Data Entry -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-data-entry.css" />

<!-- Feedback -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-feedback.css" />

<!-- Other -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-other.css" />

<!-- Shell -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-shell.css" />

<!-- Table -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-table.css" />

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.