Documentation

2 Nova Design System uses a color system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.

Elevation is the relative distance between two surfaces along the z-axis.

Icons are visual representations of commands, devices, directories, or common actions. Nova icons are simple and informative. Each icon builds on the visual language of the design system.

Just like your color scale, working from a defined spacing system allows you to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork whilst designing and developing because you're designing with a limited set of options..

Nova Design System’s parts are themable using CSS Custom Properties. We ship pre-made themes for dark and light mode while trying to meet accessibility standards for color contrast.

Picking the perfect font is never easy. When choosing the right font for a user interface poses some unique challenges, here’s what to look for in a font for your UI: a font that performs well across contexts and devices. A face that looks just as pretty set at 72px as it does at 10px.

A alert displays an important, succinct message, and provides actions for users to address (or dismiss the alert).

The avatar component is typically used to display circular (or square) user profile pictures or capital letters.

Badges are used to inform users of the status of an object or of an action that’s been taken. Use badges to label, categorize, or organize items using keywords that describe them.

The Block component is the simplest component who inherits from NVBaseComponent. It will render a tag (div by default).

Button communicates the action that will occur when the user touches them. The buttons component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.

A button group component is a visual group of buttons used to create a logical set of actions.

The Col component is a "column". Usually used inside a Row component or in a Nova component with the Row parameter set to true.

The Container component is a "containing block" used to fix the width to the current breakpoint.

Dropdowns are small panels that open on demand. They let users access additional content and actions without cluttering the page.

Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

Date pickers allow users to select a single or a range of dates and times.

The fields number components are used for collecting user provided number information.

Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.

The FieldRadioGroup is the parent component used to control a bunch of FieldRadio.

The select component allows users to choose one option from a list. It is used in forms for users to submit data.

The fields text components are used for collecting user provided information. They typically reside in forms but can appear in other places, like dialog boxes and search.

Textarea components are used for collecting large amounts of textual data.

The x-axis and y-axis are shown by default in all charts containing data series with a cartesian coordinate system.

A pie chart is a circular chart divided into sectors which is proportional to the quantity it represents.

The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features.

The Heading component has a specific mission: rendering titles.

Icons are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

Layout is a component which let you compose an application's page layout.

Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

The lists component is used to display information. List present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

In an application, it is important to inform the user that his interaction has worked. The Loader component show to the user that now the application is waiting for a result from a backend or a service.

Modals are overlays that prevent users from interacting with the rest of the application until a specific action is taken.

The navs component includes a list of links that users use to move between sections of the application. They are often used in the app bar of your application or in your sidebar.

The pagination component is used to switch between pages. <br />When there are multiple items.

The panel component is the baseline for numerous components such as modals, card, notifications, and more. Panel containers hold all sort of elements, and their size is determined by the space those elements occupy.

The Row component is a "row" containing columns. It usually contains Col Components or components with the parameter ColSize defined on it.

The Sidebar component is used to contain navigation, or groups of navigations.

The stack component is useful to divide your block content into horizontal areas, which can contain almost any other elements such as title, a button, a text input, or just simple text.

The Table component is used to display a list of structured information. Each line represent an item in the list, and a cell represent a property/piece of information of this item.

The NVTableTemplate component is used to display a list of structured information. Each line represent an item in the list, and a cell represent a property/piece of information of this item.

Use tabs to allow users to navigate easily between views within the same context.

The Text component has a specific mission: rendering paragraphs.

The AppStateService provide methods to read or edit the Common AppState such as the sidebar visibility and the header color.

The NVBaseComponent class is the Base class inherited by almost every components of Elia Design.

This Service save overlays configuration and control the display of an Overlay Component within the Overlays Component.

The OverlayServiceConfig is used to configure an Overlay Component controlled by the OverlayService.