This is a CPCard. Its primary function is for displaying a piece of content from the HCMS.
```js
const cardData = {
   title: 'Title Here',
   description: 'Description goes here and stuff.',
   date: 1505754913187,
   contentType: 'FAQ',
   thumbnail: { url: 'https://www.fillmurray.com/300/300', alt: 'Bill Murray' }
};

<div style={{"width":"450px"}}><CPCard data={cardData} selectionType="checkbox" hasActionMenu /></div>
```

It adapts based on the content its given. Here, it has no thumbnail.
```js
const cardData2 = {
   title: 'No Thumbnail',
   description: 'Description goes here and stuff.',
   date: 1505754913187,
   contentType: 'FAQ'
};

<div style={{"width":"450px"}}><CPCard data={cardData2} selectionType="checkbox" hasActionMenu /></div>
```

It can also be used to display a condensed list of items, and can be customized to include varying selection types and actions.
```js

const cardData3 = {
   title: 'No Thumbnail',
   description: 'Description goes here and stuff.',
   date: 1505754913187,
   contentType: 'FAQ'
};

const cardData4 = {
   title: 'Title Here',
   description: 'Description goes here and stuff.',
   date: 1505754913187,
   contentType: 'FAQ',
   thumbnail: { url: 'https://www.fillmurray.com/300/300', alt: 'Bill Murray' }
};

<div style={{"width":"450px", "margin": "0 0 1rem"}}>
    <CPCard data={cardData3} />
    <CPCard data={cardData4} selectionType="radiobutton" hasActionMenu />

    <CPCard data={cardData3} selectionType="radiobutton" hasActionMenu single />
    <CPCard data={cardData4} selectionType="checkbox" single />
    <CPCard data={cardData3} hasActionMenu single />
</div>
```