Current Release

Designs

Base Layouts for designing the general Layout of a Screen

3 Column Base Layout for creating an App from the scratch

Block Layout with several Content Blocks and a Header Area

Container for positioning an element in the center of an application

The dynamic page is a skeleton structure that comes with empty content containers (page header, page content) and built-in responsive behavior.

Base Layout for arranging content in a grid structure

A simple splitter layout that contains two content areas.

Elements

Basic Elements like Buttons, Images, DatePickers etc.

A simple Button with Text and/or Icon

Button with several actions/button combined into one, act more like a switch

A element for presentation of images and other content like a slideshow

Bar Chart for visualizing data

Line Chart for visualizing data

Pie Chart for visualizing data

Simple Checkbox with a Label

DatePicker with a Popup Calendar

Date and Time Picker with a Popup Calendar

Popup Dialog for Displaying Messages or other content like forms

A dropdown field that allows selection of values

Display an Icon from the Icon Explorer

Display an Image from the Image Explorer / Assets or external Source

Display a larger Image in a separate dialog

Input Field for gathering data from user

Simple List for display multiple data records

A mobile-friendly and interactive map based on Leaflet

Represents a container with scroll functionality, that can be used for text and controls. The Panel does not layout the embedded controls.

Basic Dialog with a single Message and OK Button

A small, non-disruptive popup for messages that disappears automatically after a few seconds

RadioButton is a control similar to a checkbox, but it allows you to choose only one of the predefined set of options

A Element for Searching Values with additional Barcode Scan Button

An input field to search for a specific item

Slider to adjust a Value in a Number Range

A switch is an control that is used for change between binary state like on/off, true/false

Table for displaying multiple records, with filter and sorting functions – optimized for desktop scenarios

Table for displaying multiple records, with filter and sorting functions – optimized for responsive designs on mobile devices

Tabs represents a collection of tabs with associated content for navigating and structure content without switching screens

The Text control can be used for embedding longer text paragraphs, that need text wrapping, into your app

The text area is used to enter multiple lines of text. When empty, it can hold a placeholder similar to an input. You can define the height and width of the text area and also determine specific behavior when handling long texts.

Container Element that displays header, subheader, and a customizable main area in a tile format.

A simple, large-sized text with explicit header / title semantics

Footerbar of placing Action Buttons or Version Infos of an application

Header Bar for the Base Layout of an Application

Templates

Complete Screen Templates

Dashboard Layout for Charts, highly Responsive

A control that represents a container with a predefined header and content. The card is a container for grouping and displaying information.

A simple Form for Address Display

A simple contact form

Block Element for arranging different elements in a block to visualize a main menu or launch pad

Login Form for Username / Password Authentication

List Element for displaying records combined with detail view for displaying details for each selected record

Navigation Menu with Sandwich Button

Detail Layout for Displaying Detail Information

A control that represents a container with a predefined header and content. The card is a container for grouping and displaying information.

The SimpleForm provides an easy-to-use way to create simple forms. Inside a SimpleForm, a Form is created along with labels and inputs placed in a row