Simple Card

Calling the component

<SCard  title="This is the title" subtitle="This is the subtitle" image="image-path" />

This is the title

This is the subtitle

Props

Size

The size of the card, the component expects a string and if it is not passed, its default value is medium

Small

<SCard title="This is the title" subtitle="This is the subtitle"  size="small" text="This is the text" />

This is the title

This is the subtitle

This is the text

Medium

<SCard title="This is the title" subtitle="This is the subtitle"  size="medium" text="This is the text" />

This is the title

This is the subtitle

This is the text

Large

<SCard title="This is the title" subtitle="This is the subtitle"  size="large" text="This is the text" />

This is the title

This is the subtitle

This is the text

Variant

The type of card, the component expects one of three values, elevated, filled or outlined and if not passed, its value is set to filled

elevated

<SCard title="This is the title" subtitle="This is the subtitle"  variant="elevated" text="This is the text" />

This is the title

This is the subtitle

This is the text

filled

<SCard title="This is the title" subtitle="This is the subtitle"  variant="filled"  text="This is the text" />

This is the title

This is the subtitle

This is the text

outlined

<SCard title="This is the title" variant="outlined" subtitle="This is the subtitle"  borderColor="gray" text="This is the text" />

This is the title

This is the subtitle

This is the text

Title

The title of the card, the component expects a string and if it is not passed it will not be rendered

<SCard  title="This is the title" />

This is the title

Subtitle

The subtitle of the card, the component expects a string and if it is not passed it will not be rendered

<SCard  subtitle="This is the subtitle" />

This is the subtitle

Image

The image of the card, the component expects a string, representing the path to the image, and if it is not passed it will not be rendered

<SCard  image="image-path" />

Text

The text of the card, the component expects a string and if it is not passed it will not be rendered

<SCard title="This is the title" subtitle="This is the subtitle"  text="This is the text" />

This is the title

This is the subtitle

This is the text

Rounded

The rounded of the card, the component expects a boolean and if it is not passed, its default value is true

Rounded

<SCard title="This is the title" subtitle="This is the subtitle"  rounded={true} />

This is the title

This is the subtitle

Not Rounded

<SCard title="This is the title" subtitle="This is the subtitle"  rounded={false} />

This is the title

This is the subtitle

Hoverable

The hoverable of the card, the component expects a boolean and if it is not passed, its default value is true

Hoverable

<SCard title="This  card is hoverablee" subtitle="This card is hoverable"  hoverable={true} />

This card is hoverable

This card is hoverable

Not Hoverable

<SCard title="This card isn't hoverable" subtitle="This card isn't hoverable"  hoverable={false} />

This card isn't hoverable

This card isn't hoverable

Background Color

The background color of the card, the component expects a Color type prop and if it is not passed, its default value is black

Black

<SCard title="This is the title" subtitle="This is the subtitle"  backgroundColor="black" />

This is the title

This is the subtitle

Blue

<SCard title="This is the title" subtitle="This is the subtitle"  backgroundColor="blue" />

This is the title

This is the subtitle

Border Color

Caution

This prop only works if the variant prop is set to outlined

The border color of the card, the component expects a Color type prop and if it is not passed, its default value is black

white

<SCard title="This is the title" subtitle="This is the subtitle"  borderColor="white" variant="outlined"/>

This is the title

This is the subtitle

Blue

<SCard title="This is the title" subtitle="This is the subtitle"  borderColor="blue" variant="outlined"/>

This is the title

This is the subtitle

Shadow Color

Caution

This prop only works if the variant prop is set to elevated

The shadow color of the card, the component expects a Color type prop and if it is not passed, its default value is black

blue

<SCard title="This is the title" subtitle="This is the subtitle"  shadowColor="blue" variant="elevated"/>

This is the title

This is the subtitle

red

<SCard title="This is the title" subtitle="This is the subtitle"  shadowColor="red" variant="elevated"/>

This is the title

This is the subtitle

Text Color

The text color of the card, the component expects a string and if it is not passed, its default value is white

White

<SCard text="This text is white" textColor="white" />

This text is white

Red

<SCard text="This text is red" textColor="red" />

This text is red

Limit text

The limit text of the card, the component expects a number and if it is not passed, its default value is unlimited. This prop adds ... at the end of the text if its passed a number greater than 0.

Unlimited

<SCard text="This text is unlimited" limitText={0} />

This text is unlimited

Limited

<SCard text="This text is limited" limitText={10} />

This text ...