InfoCard

Description

The InfoCard is used to give the user more information than we can give in a messagebox. It can also be used as to give useful tips.

Demos

InfoCard (default)

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
/>

InfoCard with a title

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
/>

InfoCard with Buttons

Two buttons

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
closeButtonText="Close"
onClose={() => {console.log("onClose")}}
acceptButtonText="Accept"
onAccept={() => {console.log("onAccept")}}
/>

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
centered
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
closeButtonText="Close"
onClose={() => {console.log("onClose")}}
acceptButtonText="Accept"
onAccept={() => {console.log("onAccept")}}
/>

Each button can be used independently

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
acceptButtonText="Accept"
onAccept={() => {console.log("onAccept")}}
/>

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
closeButtonText="Close"
onClose={() => {console.log("onClose")}}
/>

InfoCard accepts a custom icon

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
icon={Card}
/>

InfoCard centered content

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="Title of your info/tip"
centered={true}
/>

InfoCard custom image

Profile picture

This is the InfoCard with a custom image

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="This is the InfoCard with a custom image"
src="/images/avatars/1501870.jpg"
alt="Profile picture"
/>

InfoCard custom image centered

Profile picture

This is the InfoCard with a custom image

This is a description of some information or a tip that will inform the user of something that will help them.

<InfoCard
text="This is a description of some information or a tip that will inform the user of something that will help them."
title="This is the InfoCard with a custom image"
centered={true}
src="/images/avatars/1501870.jpg"
alt="Profile picture"
/>