Information group

Small pieces of text based content arranged in columns at suitable viewport sizes.

Props

Name	Type	Default	Description
`items`	`ItemProps[]`		Group items.

ItemProps

Name	Type	Description
`heading`	`string`	Heading text.
`body`	`React.ReactNode`	Item body.
`actions`	`Action[]`	Actions to append.

Usage


<InformationGroup
  items={[
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    },
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    },
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    },
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    }
  ]}
/><InformationGroup
  items={[
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    },
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    },
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    },
    {
      heading: 'Travelling by ferry',
      body: (
        <Text>
          Ipsum lorem risus nibh aenean nibh tortor. In condimentum ipsum suscipit sit malesuada lorem orci sed est ut.
        </Text>
      ),
      actions: [
        {
          href: '/',
          label: 'More information'
        }
      ]
    }
  ]}
/>