InfoBox

To display some highlighted information on your page, you should use this component. The InputBox component adds a colored border around the content and emphasises it by displaying an icon next to the text.

Usage

If some icons do not have a circle around the icon we can use the IconCircle component and add a custom icon.

<InfoBox
  icon={
    <IconCircle color="brand">
      <DownloadIcon scale="huge" color="brand" />
    </IconCircle>
  }
>
  <Text textStyle="headline6" isUncropped priority="secondary">
    This is the title inside the info box.
  </Text>
  <Text textStyle="body">
    This is a description text in the info box. It can be either markdown or
    just normal text.
  </Text>
</InfoBox>

InfoBox Types

There are several supported InfoBox types. Here is a quick overview of the supported types.

Primary

Secondary

Info

Props