Storybook showcase

TextBox

When to use it ?

Please describe the use

Parameters

datas: content to display in the box (title & text content)
hoverAnimation: On mouse over, the content becomes more visible

Examples

DEFAULT

📅 Top of mind

A quick run-down of key dates to come that are strategic opportunities for your nonprofit.

💡 Tip of the week

Every week, you will receive a detailed tip on a key action to help grow your nonprofit in a sustainable way. Our promise: you will only receive expert tips that are strictly relevant to the unique challenges nonprofits face, and that are simple to put into place.

🔍 News to note

We select the top three news stories of the week so you can stay up to date with sector news.

        
          <TextBox
              datas={[
                {
                  title: '📅 Top of mind',
                  text: 'A quick run-down of key dates to come that are strategic opportunities for your nonprofit.',
                },
                {
                  title: '💡 Tip of the week',
                  text: 'Every week, you will receive a detailed tip on a key action to help grow your nonprofit in a sustainable way. Our promise: you will only receive expert tips that are strictly relevant to the unique challenges nonprofits face, and that are simple to put into place. ',
                },
                {
                  title: '🔍 News to note',
                  text: 'We select the top three news stories of the week so you can stay up to date with sector news.',
                },
              ]}
          />

DEFAULT

📅 Top of mind

A quick run-down of key dates to come that are strategic opportunities for your nonprofit.

💡 Tip of the week

Every week, you will receive a detailed tip on a key action to help grow your nonprofit in a sustainable way. Our promise: you will only receive expert tips that are strictly relevant to the unique challenges nonprofits face, and that are simple to put into place.

🔍 News to note

We select the top three news stories of the week so you can stay up to date with sector news.

        
          <TextBox
              hoverAnimation
              datas={[
                {
                  title: '📅 Top of mind',
                  text: 'A quick run-down of key dates to come that are strategic opportunities for your nonprofit.',
                },
                {
                  title: '💡 Tip of the week',
                  text: 'Every week, you will receive a detailed tip on a key action to help grow your nonprofit in a sustainable way. Our promise: you will only receive expert tips that are strictly relevant to the unique challenges nonprofits face, and that are simple to put into place. ',
                },
                {
                  title: '🔍 News to note',
                  text: 'We select the top three news stories of the week so you can stay up to date with sector news.',
                },
              ]}
          />