CardTitle

With an Avatar

To help communicate ownership or categorization of a Card, add an avatar to CardTitle. The Avatar will automatically size itself correctly whether a subtitle is also provided or not.

Alt text

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Alt text

Card Title

Card Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
() => {
  const avatar = (
    <Avatar>
      <img src="/images/avatar.svg" alt="Alt text" />
    </Avatar>
  );

  return (
    <DemoLayout>
      <Card>
        <CardTitle avatar={avatar}>Card Title</CardTitle>
        <CardBlock>{loremIpsum}</CardBlock>
      </Card>

      <Card>
        <CardTitle
          avatar={avatar}
          subtitle="Card Subtitle">
          Card Title
        </CardTitle>
        <CardBlock>{loremIpsum}</CardBlock>
      </Card>
    </DemoLayout>
  );
}