Basic usage

import { Flex } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import Card from '@semcore/ui/card';
import SettingsM from '@semcore/ui/icon/Settings/m';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const tooltipContent =
  'When drawing comparisons between different classes of animals, an alternative unit is sometimes used for organisms: body length per second.';

const Demo = () => (
  <Card tag='section' aria-labelledby='card-title'>
    <Card.Header>
      <Flex justifyContent='space-between' alignItems='center'>
        <Card.Title
          innerHint={tooltipContent}
          innerHintAriaLabel='About fastest animals'
          tag='h3'
          id='card-title'
        >
          Fastest animals
        </Card.Title>
        <Button addonLeft={SettingsM} use='tertiary' theme='muted' aria-label='Settings' />
      </Flex>
      <Card.Description>
        This is a list of the fastest animals in the world, by types of animal.
      </Card.Description>
    </Card.Header>
    <Card.Body>
      <Text size={200}>
        The peregrine falcon is the fastest bird, and the fastest member of the animal kingdom, with
        a diving speed of over 300 km/h (190 mph). The fastest land animal is the cheetah.
      </Text>
    </Card.Body>
  </Card>
);

export default Demo;

Complex example

import { Flex } from '@semcore/ui/base-components';
import { LinkTrigger } from '@semcore/ui/base-trigger';
import Button from '@semcore/ui/button';
import Card from '@semcore/ui/card';
import Close from '@semcore/ui/icon/Close/m';
import Select from '@semcore/ui/select';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const tooltipContent = `Hey! Don't forget to place some useful information here.`;
const options = ['Mobile', 'Desktop', 'Tablet'].map((value) => ({
  value,
  children: value,
}));

const Demo = () => (
  <Card>
    <Card.Header>
      <Flex alignItems='center' justifyContent='space-between'>
        <Card.Title innerHint={tooltipContent} innerHintAriaLabel='About this card' tag='h3'>
          Card Title
        </Card.Title>
        <Flex alignItems='center' gap={2}>
          <Text size={200} color='text-secondary'>
            Updated: Tue, Jun 1, 2021
          </Text>
          <Button addonLeft={Close} use='tertiary' theme='muted' aria-label='Hide widget' />
        </Flex>
      </Flex>
      <Card.Description tag='div'>
        <Select
          tag={LinkTrigger}
          options={options}
          placeholder='Select device'
          aria-label='Device'
          mr={4}
        />
        This is an optional additional information or insights.
      </Card.Description>
    </Card.Header>
    <Card.Body>
      <Text size={200}>Your awesome card content is placed here.</Text>
    </Card.Body>
  </Card>
);

export default Demo;

Card layout for tables

When displaying a table in a card, set paddings to 0 0 --intergalactic-spacing-1x for Card.Body, and variant="card" for the table.

import Card from '@semcore/ui/card';
import type { DataTableProps } from '@semcore/ui/data-table';
import { DataTable } from '@semcore/ui/data-table';
import React from 'react';

export const tableInCardDefaultProps: TableInCardProps = {
  variant: 'card',
  use: undefined,
  compact: undefined,
};

const Demo = (props: TableInCardProps) => (
  <Card>
    <Card.Header>
      <Card.Title tag='h3'>Card Title</Card.Title>
    </Card.Header>
    <Card.Body pt={0} px={0} pb={1}>
      <DataTable
        data={data}
        aria-label='Table in card'
        variant={props.variant}
        use={props.use}
        compact={props.compact}
        columns={[
          { name: 'keyword', children: 'Keyword' },
          { name: 'kd', children: 'KD,%' },
          { name: 'cpc', children: 'CPC' },
          { name: 'vol', children: 'Vol.' },
        ]}
      />
    </Card.Body>
  </Card>
);

export type TableInCardProps = {
  variant?: DataTableProps<typeof data, any, any>['variant'];
  use?: DataTableProps<typeof data, any, any>['use'];
  compact?: DataTableProps<typeof data, any, any>['compact'];
};

Demo.defaultProps = tableInCardDefaultProps;

const data = [
  {
    keyword: 'ebay buy',
    kd: '77.8',
    cpc: '$1.25',
    vol: '32,500,000',
  },
  {
    keyword: 'www.ebay.com',
    kd: '11.2',
    cpc: '$3.4',
    vol: '65,457,920',
  },
  {
    keyword: 'www.ebay.com',
    kd: '10',
    cpc: '$0.65',
    vol: '47,354,640',
  },
  {
    keyword: 'ebay buy',
    kd: '-',
    cpc: '$0',
    vol: 'n/a',
  },
  {
    keyword: 'ebay buy',
    kd: '75.89',
    cpc: '$0',
    vol: '21,644,290',
  },
];

export default Demo;

Truncating text with ellipsis

import { Flex } from '@semcore/ui/base-components';
import Card from '@semcore/ui/card';
import Ellipsis from '@semcore/ui/ellipsis';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const tooltipContent = `Hey! Don't forget to place some useful information here.`;

const Demo = () => (
  <Card w='50%'>
    <Card.Header>
      <Flex alignItems='center' tag='h3' m={0}>
        <Card.Title
          tag={Ellipsis}
          hintAfter={tooltipContent}
          hintAfterAriaLabel='About this long text'
        >
          Long title which should show ellipsis when there isn't enough space.
        </Card.Title>
      </Flex>
      <Card.Description tag={Ellipsis}>
        Very long description which should show ellipsis when there isn't enough space.
      </Card.Description>
    </Card.Header>
    <Card.Body>
      <Text tag={Ellipsis} size={200}>
        Long body text which should show ellipsis when there isn't enough space.
      </Text>
    </Card.Body>
  </Card>
);
export default Demo;