@workday/canvas-kit-docs/dist/mdx/react/information-highlight/InformationHighlight.mdx

Documentation components of Canvas Kit components

import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
import Basic from './examples/Basic';
import Body from './examples/Body';
import Heading from './examples/Heading';
import Informational from './examples/Informational';
import Caution from './examples/Caution';
import Critical from './examples/Critical';
import IconCritical from './examples/CustomIconCritical';
import RTL from './examples/RTL';


# Canvas Kit Information Highlight

A container to call out important information on a page or a section of a page that the user should
be aware of.

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

<ExampleCodeBlock code={Basic} />

### Variants

`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.

Variants: `informational`, `caution`, `critical`

Emphasis: `low`, `high`

The variants have different icons and colors to convey severity and the emphasis changes the
background color to have a lower or higher contrast. If no `variant` or `emphasis` is selected the
layout will default to `Variant: informational, Emphasis: low`.

The following examples will show the `low` and `high` emphasis of the three variants. `low` Emphasis
will be shown first and should be used when there is other more important information on the page.
`high` Emphasis will be shown second, and should be used when the highlight is not competing with
other, more important information.

#### Informational

The informational variant is for _nice to have_ information, such as related features or
opportunities.

<ExampleCodeBlock code={Informational} />

#### Caution

The caution variant is for _important to know_ information, such as the potential consequences of
specific actions.

<ExampleCodeBlock code={Caution} />

#### Critical

The critical variant is for _must know_ information that could otherwise cause failure if the user
is unaware.

<ExampleCodeBlock code={Critical} />

### RTL Example

Information Highlight also supports RTL Languages. To enable RTL, set the `dir` attribute on the
parent dom element that renders your application.

<ExampleCodeBlock code={RTL} />

### Partial and Custom Information Highlights

`InformationHighlight` can use custom icons or be designed to only use some of its components.

#### Custom Icon: Critical

<ExampleCodeBlock code={IconCritical} />

#### Body Only Example

<ExampleCodeBlock code={Body} />

#### Heading Only Example

<ExampleCodeBlock code={Heading} />

## Component API

<SymbolDoc name="InformationHighlight" fileName="/react/" />

## Specifications

<Specifications file="./cypress/component/InformationHighlight.spec.tsx" name="InformationHighlight" />