Info Box

Render a card with title, content, content blocks and background motif

• Import

  import { InfoBox } from '@smile/haring-react';
• Extends Paper
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
children	ReactElement	-	Content of the right section
collapse	Boolean	true	Active or not collapse function
content	ReactElement	-	Content at the bottom of the left section
contentItems	IContentItem[]	[]	Array of content blocks, main content of the left section
title	ReactElement	-	Title of the card
motif	ReactElement	Default Motif	Background motif of the card
leftContainerStyle	CSSProperties	-	CSS style of the left section
rightContainerStyle	CSSProperties	-	CSS style of the right section
...	-	-	extends Paper props

IContentItem

Represents a block of content inside the card.

Attribute	Type	Description
icon	ReactElement	ActionIcon of content
iconProps	Partial<ActionIconProps>	Props for the ActionIcon
label	string	text of content
onAction	(item: IContentItem) => void	Called when content is clicked