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

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.