Card

tsx

import React from 'react';
import Card from 'intergalactic/card';
import { Text } from 'intergalactic/typography';
import SettingsM from 'intergalactic/icon/Settings/m';

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

const Demo = () => (
  <Card>
    <Card.Header>
      <Card.Title innerHint={tooltipContent} tag='h4' inline my={0}>
        Card Title
      </Card.Title>
      <SettingsM
        style={{ float: 'right' }}
        mt={1}
        color='icon-secondary-neutral'
        interactive
        aria-label='Open settings'
      />
      <Card.Description my={0}>
        This is a description with 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;

import React from 'react';
import Card from 'intergalactic/card';
import { Text } from 'intergalactic/typography';
import SettingsM from 'intergalactic/icon/Settings/m';

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

const Demo = () => (
  <Card>
    <Card.Header>
      <Card.Title innerHint={tooltipContent} tag='h4' inline my={0}>
        Card Title
      </Card.Title>
      <SettingsM
        style={{ float: 'right' }}
        mt={1}
        color='icon-secondary-neutral'
        interactive
        aria-label='Open settings'
      />
      <Card.Description my={0}>
        This is a description with 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;

tsx

import React from 'react';
import Card from 'intergalactic/card';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
import Close from 'intergalactic/icon/Close/m';
import Select from 'intergalactic/select';
import { LinkTrigger } from 'intergalactic/base-trigger';

const tooltipContent = `Hey! Don't forget to place some useful information here.`;
const options = Array(6)
  .fill('')
  .map((_, index) => ({
    value: index,
    label: `Label ${index}`,
    children: `Option ${index}`,
  }));

const Demo = () => (
  <Card>
    <Card.Header>
      <Flex alignItems='center' justifyContent='space-between'>
        <Flex alignItems='center' tag='h4'>
          <Card.Title innerHint={tooltipContent}>Card Title</Card.Title>
        </Flex>
        <Flex alignItems='center'>
          <Text size={200} color='text-secondary' mr={2}>
            Optional info about data
          </Text>
          <Close color='icon-secondary-neutral' ml='auto' interactive aria-label='Close card' />
        </Flex>
      </Flex>
      <Card.Description tag='div'>
        <Select tag={LinkTrigger} options={options} placeholder='Select' 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;

import React from 'react';
import Card from 'intergalactic/card';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
import Close from 'intergalactic/icon/Close/m';
import Select from 'intergalactic/select';
import { LinkTrigger } from 'intergalactic/base-trigger';

const tooltipContent = `Hey! Don't forget to place some useful information here.`;
const options = Array(6)
  .fill('')
  .map((_, index) => ({
    value: index,
    label: `Label ${index}`,
    children: `Option ${index}`,
  }));

const Demo = () => (
  <Card>
    <Card.Header>
      <Flex alignItems='center' justifyContent='space-between'>
        <Flex alignItems='center' tag='h4'>
          <Card.Title innerHint={tooltipContent}>Card Title</Card.Title>
        </Flex>
        <Flex alignItems='center'>
          <Text size={200} color='text-secondary' mr={2}>
            Optional info about data
          </Text>
          <Close color='icon-secondary-neutral' ml='auto' interactive aria-label='Close card' />
        </Flex>
      </Flex>
      <Card.Description tag='div'>
        <Select tag={LinkTrigger} options={options} placeholder='Select' 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;

tsx

import React from 'react';
import Card from 'intergalactic/card';
import { Text } from 'intergalactic/typography';
import Ellipsis from 'intergalactic/ellipsis';
import { Flex } from 'intergalactic/flex-box';

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

const Demo = () => (
  <Card w={'50%'}>
    <Card.Header>
      <Flex alignItems='center' tag='h4'>
        <Card.Title tag={Ellipsis} hintAfter={tooltipContent}>
          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 tag={Ellipsis}>
      <Text size={200}>
        Long body text which should show ellipsis when there isn't enough space.
      </Text>
    </Card.Body>
  </Card>
);
export default Demo;

import React from 'react';
import Card from 'intergalactic/card';
import { Text } from 'intergalactic/typography';
import Ellipsis from 'intergalactic/ellipsis';
import { Flex } from 'intergalactic/flex-box';

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

const Demo = () => (
  <Card w={'50%'}>
    <Card.Header>
      <Flex alignItems='center' tag='h4'>
        <Card.Title tag={Ellipsis} hintAfter={tooltipContent}>
          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 tag={Ellipsis}>
      <Text size={200}>
        Long body text which should show ellipsis when there isn't enough space.
      </Text>
    </Card.Body>
  </Card>
);
export default Demo;