Skip to content
Home

InfoCard

Info
Demos
Properties
Events

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

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"

/>