`<Card>` Component

<Card> is a content container, with optional header and footer.

Here the demo:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Installing `<Card>` Component

There are 2 ways to install <Card> component into your react app project:

Install the Specific Package of <Card> Component
Install the Whole Reusable-UI Component Pack, including the <Card> Component

Variant Properties

The alternative appearances of the <Card> layout without changing the <Card>'s functionality.

`cardStyle` Property

Sets the alternative appearances of the <Card>.

The possible values are:

undefined
'regular'
'flat'
'flush'
'joined'

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`orientation` Property

Sets the orientation of the <Card>.

The possible values are:

undefined
'inline'
'block'

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`size` Property

Defines the alternative size of the <Card>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`theme` Property

Defines the contextual theme of the <Card>.

The possible values are:

undefined
'primary'
'secondary'
'success'
'info'
'warning'
'danger'
'light'
'dark'

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`gradient` Property

Activates a 3D mode of the <Card>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`outlined` Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Card>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`mild` Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Card>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

State Properties

The conditions of the <Card> behavior or functionality.

`enabled` Property

Defines the enabled/disabled state of the <Card>.

The possible values are:

undefined
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`inheritEnabled` Property

Influences the <Card>'s disabled state by <ancestor enabled={false}>.

The possible values are:

undefined
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`active` Property

Defines the current active state of the <Card>.

The possible values are:

undefined
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

`inheritActive` Property

Influences the <Card>'s active state by <ancestor active={true}>.

The possible values are:

undefined
true
false

Here the preview:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Inherited Properties

Because <Card> is made from <Indicator>, so all properties from <Indicator> are inherited.

You can see the documentation of <Indicator> here.

Variables

There are several variables of <Card> you can customize. Changing the variables affects all <Card> instance and other components that depend on <Card>.

Here the exposed variables:

Backgrounds, Foregrounds, Borders, & Rings
Animations
Sizes
Typos
Captions

The example of accessing, modifying, & adding variables:

Show code

<Card> Component

Installing <Card> Component

Variant Properties

cardStyle Property

orientation Property

size Property

theme Property

gradient Property

outlined Property

mild Property

State Properties

enabled Property

inheritEnabled Property

active Property

inheritActive Property

Inherited Properties

Variables

`<Card>` Component

Installing `<Card>` Component

`cardStyle` Property

`orientation` Property

`size` Property

`theme` Property

`gradient` Property

`outlined` Property

`mild` Property

`enabled` Property

`inheritEnabled` Property

`active` Property

`inheritActive` Property