Info group

An info group is used to show data in a simple way. It always has an icon, a title and a content field and often comes with multiple instances of itself to give a quick overview and summarize content. The textual content could be a link, otherwise it has no interactivity. The color of the icon is themeable. The width is defined by the space that is left.

´ Loading interactive demo...
<dt-info-group> <dt-info-group-icon><dt-icon name="agent"></dt-icon></dt-info-group-icon> <dt-info-group-title>5 min 30 s</dt-info-group-title> Session duration </dt-info-group> export class InfoGroupDefaultExample {} <dt-info-group> <dt-info-group-icon><dt-icon name="agent"></dt-icon></dt-info-group-icon> <dt-info-group-title>5 min 30 s</dt-info-group-title> Session duration </dt-info-group> export class InfoGroupDefaultExample {}

Info group in use

It can be used in a card and on the top of a page to show properties.

info-group-grid

Info groups are also used in the first column of a table or in a list. They can provide additional information without the use of a second column. A column with info groups is always sorted by the data in the first line.

info-group-table
info-group-list

<dt-info-group> is a visual container for combining an icon with two lines of text. It is often used inside a table cell.

Note: The info group is not interactive.

In addition to the custom content, the info-group can also hold some special sections (directives):

  • <dt-info-group-title> - The title of this info group.
  • <dt-info-group-content> - The text right below the title.
  • <dt-info-group-icon> - The icon on the left of the info group is themeable.
´ Loading interactive demo...
<dt-info-group> <dt-info-group-icon><dt-icon name="agent"></dt-icon></dt-info-group-icon> <dt-info-group-title>5 min 30 s</dt-info-group-title> Session duration </dt-info-group> export class InfoGroupDefaultExample {} <dt-info-group> <dt-info-group-icon><dt-icon name="agent"></dt-icon></dt-info-group-icon> <dt-info-group-title>5 min 30 s</dt-info-group-title> Session duration </dt-info-group> export class InfoGroupDefaultExample {}

Imports

You have to import the DtInfoGroupModule when you want to use the <dt-info-group>:

@NgModule({
  imports: [DtInfoGroupModule],
})
class MyModule {}