mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
34 lines
935 B
TypeScript
34 lines
935 B
TypeScript
|
import React from 'react';
|
||
|
import { Button, Card, Flex, Typography } from 'antd';
|
||
|
|
||
|
const cardStyle: React.CSSProperties = {
|
||
|
width: 620,
|
||
|
};
|
||
|
|
||
|
const imgStyle: React.CSSProperties = {
|
||
|
display: 'block',
|
||
|
width: 273,
|
||
|
};
|
||
|
|
||
|
const App: React.FC = () => (
|
||
|
<Card hoverable style={cardStyle} bodyStyle={{ padding: 0, overflow: 'hidden' }}>
|
||
|
<Flex justify="space-between">
|
||
|
<img
|
||
|
alt="avatar"
|
||
|
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||
|
style={imgStyle}
|
||
|
/>
|
||
|
<Flex vertical align="flex-end" justify="space-between" style={{ padding: 32 }}>
|
||
|
<Typography.Title level={3}>
|
||
|
“antd is an enterprise-class UI design language and React UI library.”
|
||
|
</Typography.Title>
|
||
|
<Button type="primary" href="https://ant.design" target="_blank">
|
||
|
Get Start
|
||
|
</Button>
|
||
|
</Flex>
|
||
|
</Flex>
|
||
|
</Card>
|
||
|
);
|
||
|
|
||
|
export default App;
|