Info Tip

Warning

This is a warning message.

Overview

This component is a component that provides tip boxes within docs. It allows images and other components to be used inside of it.

Details

Criteria	Component Meets Criteria
Has hover styles	No
Has light and dark mode	Yes
Has brand theming	No

Component Props

Prop Name	Type	Description
type	string	Optional. Specifies tab color.
children	ReactNode	Comprises any elements between component html tags.

Example Code

import InfoTip from '@site/src/elements/InfoTip';
import ExampleImage from '@site/static/images/graphics/wipTractor.png';

<div style={{ marginBottom: '20px' }}>
	<InfoTip type='warning'>
        <h4>Warning</h4>
        <div>This is a warning message.</div>
        <br />
        <div style={{backgroundColor: 'red', borderRadius: '8px', padding: '10px', display: 'flex', justifyContent: 'center'}}>
            <img src={ExampleImage} />
        </div>
    </InfoTip>
</div>