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 a Cute

granite-toggle-switch

granite-tooltip

See more...

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

Link Flat Button

granite-checkbox

granite-date-picker

Basic Date Picker

Date Range Picker

Date Picker with Min/Max dates

Change Week Start Day


granite-radio-button


granite-chips

Basic chips

BasicSelectedDisabledNon selectableRemovableWith iconCustom Style

Single select chips list

Option 1 Option 2 Option 3 Option 4

Multi select chips list

Option 1 Option 2 Option 3 Option 4

Input chips list

Item A Item B Invalid Item

granite-input-field with granite-label


0/20

granite-progress-bar

Basic progress bar with Legend


Exceeding progress bar with Legend


Stacked progress bar with Legend


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

avataravatar

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

avatar
AccessibilityAccessibile 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.

granite-card-list

Horizontal List

avatar
Alexdra Denenelssion had a call with martin
Incoming 1m
5s | 1/21/22, 7.31 AM
Call
avatar
Alexdra Denenelssion had a call with martin
Incoming 1m
5s | 1/21/22, 7.31 AM
Call
avatar
Alexdra Denenelssion had a call with martin
Incoming 1m
5s | 1/21/22, 7.31 AM
Call
avatar
Alexdra Denenelssion had a call with martin
Incoming 1m
5s | 1/21/22, 7.31 AM
Call

Vertical List

avatar
Alexdra Denenelssion had a call with martin
Incoming
1m 5s | 1/21/22, 7.31 AM
avatar
Alexdra Denenelssion had a call with martin
Incoming
1m 5s | 1/21/22, 7.31 AM
avatar
Alexdra Denenelssion had a call with martin
Incoming
1m 5s | 1/21/22, 7.31 AM
avatar
Alexdra Denenelssion had a call with martin
Incoming
1m 5s | 1/21/22, 7.31 AM

Horizontal List with Wrap and overlay close on scroll

High
Mobile App [FndMotOffline 1] Reprocess Failed Transactions
See More
5/22/23, 842 AM
Backgroung Job
High
Mobile App [FndMotOffline 1] Reprocess Failed Transactions
See More
5/22/23, 842 AM
Backgroung Job
High
Mobile App [FndMotOffline 1] Reprocess Failed Transactions
See More
5/22/23, 842 AM
Backgroung Job
High
Mobile App [FndMotOffline 1] Reprocess Failed Transactions
See More
5/22/23, 842 AM
Backgroung Job

granite-file-upload

Upload Files

Drop here or

granite-carousel