NTS Angular - Showroom

Typography

Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum metus sem, ut tincidunt arcu convallis ut. Etiam lacinia sem vestibulum sapien feugiat laoreet. Duis id sodales lacus. Nulla euismod mollis luctus. Pellentesque vel ligula euismod, aliquam turpis mattis, faucibus sem. Integer et rutrum lacus. Proin pulvinar ac odio sed interdum. Etiam iaculis dolor massa, sed commodo lectus malesuada non. Morbi vehicula ante facilisis dignissim sodales.

For highlighting a run of text due to its relevance in another context. Wrap the element in <mark>

For emphasizing a snippet of text with a heavier font-weight. Use the class .u-text-bold or wrap the element in <strong>

Ordered List <ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
Un-Ordered List <ul>
  • Life isn’t about getting and having...
  • Strive not to be a success...
  • Whatever the mind of man can...

Buttons

Default buttons
Just icon buttons
Icon and label buttons
Small buttons
Big buttons
Dropdown buttons
Clear Option Option Option Clear Option Option Option Clear Option Option Option Clear Option Option Option Clear Option Option Option Clear Option Option Option
Popup buttons
This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo.
Popup big buttons
This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo. This is a custom popup content
Ut tempor consectetur et aute adipisicing commodo.
Header buttons

Inputs

Single-line inputs
Multi-line inputs
Radio inputs
Checkbox inputs
Toggle inputs
Button toggle inputs
Date-time picker
Daterange picker
Select inputs
Color picker
Image picker

Charts

Datagrids

Simple datagrids
Cell formats
Custom cells
{{user.name}}

{{user.birth | formatDate : 'ddd DD MMM, YYYY'}}

 {{user.birth | formatDate : 'ddd DD MMM, YYYY'}}
Custom rows

{{i+1}}. {{user?.name}}

{{user?.birth | formatDate : 'ddd DD MMM, YYYY'}}
Selectable, pageable and filterable datagrids

Lists

Other

Badges
Chips
Progress bar
Faces
Tooltip
Toast
Modal
Paginator
Tabs
Carousel
1
2
3

Icons

user user-unfollow user-following user-follow people bell speech printer picture handbag folder-alt drawar trash tag logout list graph calendar chart clock doc cloud-download eye heart location-pin lock lock-open chevron-left chevron-right arrow-down arrow-left arrow-right arrow-up google board star-filled star-half star suitcase dollar caret search filled-circle minus-circle plus-circle square square-minus square-check circle circle-check delete drag more-v