> For the complete documentation index, see [llms.txt](https://wigxel.gitbook.io/react-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wigxel.gitbook.io/react-components/components/card.md).

# Card

Using the Card Component.

### Importing

```jsx
import { Card } from '@wigxel/react-components/lib/cards';


const App = () => {
    return (
        <Card
            clickable={true} // Changes the cursor to a pointer 
            static={true}  // Removes shadow effect
            shadow={false} // Toggles shadow
        />
    )
}

```

### Extending

{% hint style="info" %}
Card components are extensive. So you could create mutliple card styles from the base component, utilizing the power of StyledComponents. See below.
{% endhint %}

{% code title="src/components/Card.js" %}

```jsx
import styled from 'styled-components';
import { Card } from '@wigxel/react-components/lib/cards';

export const InfoCard = styled(Card)`
    background-color: indigo;
`

export const ActiveCard = styled(Card)`
    background-color: green;
    text-white;
    border-radius: 22px;
`

export default { ActiveCard, InfoCard }
```

{% endcode %}

### Customizing

Add and tweak the Properties.

{% code title="Theme.js" %}

```bash
{
		...,
		
		card: {
				bgColor: "#fff",
				dividerColor: "whitesmoke",
		}
}
```

{% endcode %}