CardTitle

With an Actions Menu

To display a menu of actions in CardTitle, pass a CardTitleMenu or Dropdown to the actions prop.

Note

To help with styling and using the correct Icon, Card provides a CardTitleMenu component, as used in the example below. In addition to accepting any prop accepted by Dropdown, it also accepts triggerTitle, which is used for the Icon's title. You can import it like so:

import { CardTitleMenu } from 'mineral-ui/Card';

Card Title

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

() => {
  const menuData = [
    { onClick: () => { console.log('Clicked 1') }, text: 'MenuItem 1' },
    { onClick: () => { console.log('Clicked 2') }, text: 'MenuItem 2' },
    { divider: true },
    { onClick: () => { console.log('Clicked 3') }, text: 'MenuItem 3' }
  ];

  return (
    <DemoLayout>
      <Card>
        <CardTitle actions={<CardTitleMenu data={menuData} />}>Card Title</CardTitle>
        <CardBlock>{loremIpsum}</CardBlock>
      </Card>
    </DemoLayout>
  );
}