CODEWITHSUNDEEP
reactjsresponsiveantdcard
groot
groot

Reputation: 77

Add Icon and Title on the card header in antd

I am trying to add header and an icon in antd responsive cards, but not able to add and find any solution to it, can any one help me with this since, i am very new to this i am not able to figure it out

const data = [
{
title: 'Title 1',
},
{
title:  <SearchOutlined />'Title 2',
},
];

ReactDOM.render(
<List
grid={{
gutter: 16,
xs: 1,
sm: 2,
md: 4,
lg: 4,
xl: 6,
xxl: 3,
}}
dataSource={data}
renderItem={item => (
<List.Item>
<Card title={item.title}>Card content</Card>
</List.Item>
)}
/>,
document.getElementById('container'),
);

Upvotes: 2

Views: 4956

Answers (2)

krishnA tiwari
krishnA tiwari

Reputation: 187

you can simply add the icon as like this

<Card
        title={
          <span>
            <MdOutlineMarkEmailUnread  /> 
//This is the title we want to add at title of the card
            <span>Email me for jobs</span>
          </span>
        }
        bordered={false}></Card>

Upvotes: 0

Chanandrei
Chanandrei

Reputation: 2421

You are close. Just enclose the title content with react fragment

const data = [
  {
    title: "Title 1",
    content: (
      <div>Content 1</div>
    )
  },
  {
    title: (
      <>
        <SearchOutlined /> Title 2
      </>
    ),
    content: (
       <div>Content 2</div>
    )
  }
];

<List
    dataSource={data}
    renderItem={item => (
        <List.Item>
           <Card title={item.title}>{item.content}</Card>
        </List.Item>
     )}
/>

Upvotes: 2

Related Questions