Card

Using the Card Component.

Importing

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

Card components are extensive. So you could create mutliple card styles from the base component, utilizing the power of StyledComponents. See below.

src/components/Card.js

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 }

Customizing

Add and tweak the Properties.

Theme.js

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