Granite Component Library Demo

Here is where we show off the amazing capabilities of the components library in all its shining glory outside the Aurena Framework.

The goal is to turn this into something more resembling a real application, but for now we just list stuff.

IFS Icons

Glyph icon examples:

Ligature icon examples: aviation

Theme variables

This text is always drawn using the text hint color
This text uses the shell top background color of whatever theme is currently selected

granite-arrange-grid

Top left

Top middle

Right

Bottom left

Bottom middle + right

granite-grid

Kitten

What

Cute

granite-toggle-switch

granite-tooltip

granite-badge

Normal

Heading 1

Heading 2

Heading 3

Primary

Pill style

With icon

granite-button

Secondary Button

Primary Button

Flat Button

Toolbar Button

Link Button

Default Disabled

Link Flat Button

Default Disabled

granite-checkbox

Default checkbox

Default checked

Read only

Read only checked

Disabled

Disabled checked

granite-date-picker

Basic Date Picker

Date Range Picker

Date Picker with Min/Max dates

Selectable dates: Between 1/1/2025 to 12/31/2025

Change Week Start Day

Week Start Day :

Sunday

Monday

granite-radio-button

Slytherin

Ravenclaw

Hufflepuff

Gryffindor

granite-chips

Basic chips

Single select chips list

Multi select chips list

Input chips list

granite-input-field with granite-label

*First Name

*E-Mail

*Password

Sample Dropdown

Enter your favourite type of Rocks (Igneous, Metamorphic, Sedimentary)

Enter your name of rock

0/20

How many rock samples do you need?

Why do you need the above rock samples?

granite-progress-bar

Basic progress bar with Legend

Exceeding progress bar with Legend

115%

+15%

Stacked progress bar with Legend

50%

20%

granite-table

Order No	Site	The Objstate
ORD67	SITE56	Opened
ORD68	SITE9	Opened
ORD69	SITE25	Opened
ORD70	SITE96	Opened
ORD71	SITE161	Opened
ORD72	SITE56	Opened
ORD73	SITE32	Opened
ORD74	SITE35	Opened
ORD75	SITE176	Opened
ORD76	SITE297	Opened
ORD77	SITE135	Opened
ORD78	SITE82	Opened
ORD79	SITE67	Opened
ORD80	SITE149	Opened
ORD81	SITE182	Opened
ORD82	SITE26	Opened
ORD83	SITE138	Opened
ORD84	SITE51	Opened
ORD85	SITE43	Opened
ORD86	SITE41	Opened
ORD87	SITE38	Opened
ORD88	SITE70	Opened
ORD89	SITE96	Opened
ORD90	SITE259	Opened
ORD91	SITE16	Opened

granite-contacts

granite-contacts with Avatar full name

granite-avatar

granite-collapsible-group

Granite Design system

Design systems have come a long way from the early days of static Style Guides which included color, typography, spacing, etc. into fully interactive design systems running live on web pages, with downloadable code libraries and assets. Static style guides don't quite address the growing needs of complex software at scale

Static style guides don't quite address the growing needs of complex software at scale

granite-card

Accessibility

Accessibile Components

Components available in the Granite Components library contain many accessibility features included by default (e.g.- keyboard navigation, ARIA attributes, etc). We recommend using these components in your Angular applications whenever possible.

Please refer to https://material.angular.io/cdk/categories learn more.