en-US

Example of a card using an image to reinforce the content.

zh-CN

该示例使用图像来增强内容的卡片。

import { EditOutlined, DeleteOutlined, EllipsisOutlined } from '@react-devui/icons';
import { DCard } from '@react-devui/ui';

export default function Demo() {
  return (
    <DCard style={{ width: 300 }}>
      <div style={{ margin: '-1px -1px 0 -1px' }}>
        <img
          style={{ width: '100%', borderRadius: 'var(--rd-border-radius) var(--rd-border-radius) 0 0' }}
          src="/assets/imgs/bg-1.png"
          alt="bg-1"
        />
      </div>
      <DCard.Content>
        <div className="app-demo-text-container">
          <div>Some contents...</div>
          <div>Some contents...</div>
          <div>Some contents...</div>
        </div>
      </DCard.Content>
      <DCard.Actions
        dActions={[
          <DCard.Action title="edit">
            <EditOutlined />
          </DCard.Action>,
          <DCard.Action title="delete">
            <DeleteOutlined />
          </DCard.Action>,
          <DCard.Action title="more">
            <EllipsisOutlined />
          </DCard.Action>,
        ]}
      ></DCard.Actions>
    </DCard>
  );
}