Info card

Info card is a wrapper component styling its content as an info box.

There are three info box types for different use cases: the default one, one for highlighting the content and one to display error or warning.

Here is a default info-card giving you more context about something else in the screen, discretely highlighted mostly by the box.

Here is some highlighted information using highlight type, giving you more context about something else in the screen, highlighted by the box and the colors.

Here is some warning which is important to read, highlighted with destructive color and the box.

Here is a default info-card giving you more context about something else in the screen, discretely highlighted mostly by the box.

Here is some highlighted information using highlight type, giving you more context about something else in the screen, highlighted by the box and the colors.

Here is some warning which is important to read, highlighted with destructive color and the box.

Inputs

icon: Name of the glyph to be displayed on the left of the info-card. (optional)
type: Info card type: default | highlight | warning . ( default by default)

{{code}}