import React from 'react';
import { Row, Card } from '@btri-ui/base';

export default () => {
  const hoverStyle = {
    transform: 'translateY(-4px)',
  };
  return (
    <div>
      <Row autoMode={true}>
        <Card hoverable={true} title="标题" style={{ width: '400px' }}>
          <p>
            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。{' '}
          </p>
          <div>
            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。{' '}
          </div>
        </Card>
      </Row>
      <Row autoMode={true} style={{ paddingTop: '16px' }}>
        <Card
          hoverStyle={hoverStyle}
          hoverable={true}
          style={{ transition: 'transform 0.3s', width: '400px' }}
          title="标题"
        >
          <p>
            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。{' '}
          </p>
          <div>
            仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。{' '}
          </div>
        </Card>
      </Row>
    </div>
  );
};