Icon Card

1
import {IconCard} from '@coveord/plasma-react';
2
import {CloudSize24Px, DatabaseSize24Px, CrawlingBotSize24Px} from '@coveord/plasma-react-icons';
3

4
const Demo = () => (
5
    <IconCard
6
        title="Web"
7
        description="Enter a starting URL and automatically index all the pages of this site."
8
        icon={<img src="https://placeholder.pics/svg/72x72/DEDEDE/FFFFFF-FFFFFF" />}
9
        choices={[
10
            {value: 'cloud', label: 'Cloud', icon: CloudSize24Px},
11
            {value: 'on-prem', label: 'On-Premise', icon: DatabaseSize24Px},
12
            {value: 'crodule', label: 'Crawling Module', icon: CrawlingBotSize24Px, disabled: true},
13
        ]}
14
        onClick={(choice) => alert(choice)}
15
    />
16
);
17
export default Demo;

1
import {IconCard} from '@coveord/plasma-react';
2
import {CloudSize24Px, DatabaseSize24Px, CrawlingBotSize24Px} from '@coveord/plasma-react-icons';
3

4
const Demo = () => (
5
    <IconCard
6
        small
7
        title="Web"
8
        icon={<img src="https://placeholder.pics/svg/40x40/DEDEDE/FFFFFF-FFFFFF" />}
9
        choices={[
10
            {value: 'cloud', label: 'Cloud', icon: CloudSize24Px},
11
            {value: 'on-prem', label: 'On-Premise', icon: DatabaseSize24Px},
12
            {value: 'crodule', label: 'Crawling Module', icon: CrawlingBotSize24Px, disabled: true},
13
        ]}
14
        onClick={(choice) => alert(choice)}
15
        style={{width: '368px'}}
16
    />
17
);
18
export default Demo;

1
import {BadgeIconPlacement, IconCard} from '@coveord/plasma-react';
2
import {LockSize16Px} from '@coveord/plasma-react-icons';
3

4
const Demo = () => (
5
    <IconCard
6
        small
7
        title="Web"
8
        icon={<img src="https://placeholder.pics/svg/40x40/DEDEDE/FFFFFF-FFFFFF" />}
9
        disabled
10
        badges={[{icon: LockSize16Px, iconPlacement: BadgeIconPlacement.Left, isSmall: true}]}
11
        tooltip={{title: 'This source is not included in your license'}}
12
        style={{width: '368px'}}
13
    />
14
);
15
export default Demo;

1
import {IconCard, BadgeType} from '@coveord/plasma-react';
2

3
const Demo = () => (
4
    <IconCard
5
        title="Simple builder"
6
        description="For lightweight usage, prototyping, and testing the search experience. Hosted by Coveo."
7
        icon={
8
            <img
9
                style={{width: '112px', height: '112px'}}
10
                src="https://placeholder.pics/svg/112x112/DEDEDE/FFFFFF-FFFFFF"
11
            />
12
        }
13
        customIconSize
14
        placeBadgesAbove
15
        badges={[{label: 'Recommended', isSmall: true, type: BadgeType.Default}]}
16
        animateOnHover
17
        onClick={() => alert('You clicked the card')}
18
    />
19
);
20
export default Demo;