Collection Heading

This is the <CollectionHeading /> component

Presentation

Ted's Terrific TitansCreated September 01, 2022

Source

@candy/kitkat/collection-heading

<CollectionHeadingactions={<Button appearance="secondary" colorScheme="white">Edit</Button>}dataTestId="collection-heading"assetUrls={['https://picsum.photos/id/237/200','https://picsum.photos/id/238/200','https://picsum.photos/id/239/200','https://picsum.photos/id/240/200', 'https://picsum.photos/id/239/200',]}title="Ted's Terrific Titans"description="Created September 01, 2022"/>

Basic Usage

import CollectionHeading from '@candy/kitkat/collection-heading'

export const MyComponent = () => {
  return (
    <CollectionHeading
      actions={
        <div style={{ display: 'flex', gap: '16px' }}>
          <Button appearance="secondary" colorScheme="white">
            Edit
          </Button>
          <Button appearance="secondary" colorScheme="white">
            Share
          </Button>
        </div>
      }
      dataTestId="collection-heading"
      assetUrls={[
        'https://picsum.photos/id/237/200',
        'https://picsum.photos/id/238/200',
        'https://picsum.photos/id/239/200',
        'https://picsum.photos/id/240/200',
        'https://picsum.photos/id/239/200',
      ]}
      title="Ted's Terrific Titans"
      description="Created September 01, 2022"
    />
  )
}

Component API

Name	Type	Default	Description
userName	string	-	name
size	sm, lg	-	Size of the Avatar
profileUrl	string	-	url