Info group

Info group details

This component is themable.

Tagged with icon info infobyte

Related topics: Icon component, Card

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 DefaultInfoGroupExampleComponent { } 5 min 30 s Session duration export class DefaultInfoGroupExampleComponent { }

Info group in use

info-group-grid

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

info-group-table
info-group-list

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.

´ 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 DefaultInfoGroupExampleComponent { } 5 min 30 s Session duration export class DefaultInfoGroupExampleComponent { }

Imports

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

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

Initialization

<dt-info-group> is a visual container for combining an icon with two lines of text. The info group is not interactive.

  • <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.