Card and card header

To fit the new design, we’ll need to update Cards to look like the above figure.

Proposed API

Card Layout with Columns

const MyAction = () => <>You can eat sushi like this. <a href="#">Learn more</a></>
// or...
const MyOtherAction = () => <Link to="/heaven"><Button>Hello</Button></Link>

<Card
  title="Bundle Information"
  action={MyAction}
>
  <CardColumn title="Contributors">
   <AvatarGroup collaborators={[]} />
  </CardColumn>
  <CardColumn title="Tags">
    <Chip>agent-view</Chip>
    <Chip>agent-view</Chip>
  </CardColumn>
</Card>

Card Layout without Columns

const MyAction = () => <>You can eat sushi like this. <a href="#">Learn more</a></>
// or...
const MyOtherAction = () => <Link to="/heaven"><Button>Hello</Button></Link>

<Card
  title="Bundle Information"
  action={MyAction}
>
  <CardTitle>Contributors</CardTitle>
   <AvatarGroup collaborators={[]} />

  <CardTitle>Members</CardTitle>
   <AvatarGroup members={[]} />
</Card>

[ImogenF]

@TejasQ I put this in and then took it out again after a discussion with @fabien0102.

Summary:

• plural doesn’t make sense, since it might not always be plural
• adding a Components suffix is inconsistent with how other components are named

So it’s staying as action until/unless we can figure out something better 😉

[ImogenF]

@TejasQ how about keeping it simple and going with actionComponents?

And the CardColumns structure is exactly what I’ve been playing around with.