Card

React cards component provide a flexible and extensible container for displaying content. React cards are delivered with a bunch of variants and options.

Usage

Example

Header

Body.

Header

Title.

Subtitle.

Text text text text text text text text.

Script


  return (
    <CContainer fluid>
    <CRow>
      <CCol sm="6">
        <CCard>
          <CCardHeader>
            Header
          </CCardHeader>
          <CCardBody>
            Body.
          </CCardBody>
          <CCardFooter>
            Footer.
          </CCardFooter>
        </CCard>
      </CCol>
      <CCol sm="6">
        <CCard>
          <CCardHeader>
            Header
          </CCardHeader>
          <CCardBody>
            <CCardTitle>
              Title.
            </CCardTitle>
            <CCardSubtitle>
              Subtitle.
            </CCardSubtitle>
            <CCardText>
              Text text text text text text text text.
            </CCardText>
          </CCardBody>
          <CCardFooter>
            Footer.
          </CCardFooter>
        </CCard>
      </CCol>
    </CRow>
    </CContainer>
  )

# Features

Wrapper components covering bootstrap card components
Style components easily by props
Custom card-accents styling

# Card API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
accentColor	string
adds card accent, which is coloured top border

CardBody

# CardBody API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

CardFooter

# CardFooter API

Name	Type	Default Value
tag	any	footer
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

CardGroup

Component for card grouping.

# CardGroup API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
deck	boolean
deck type of the group
columns	boolean
columns type of the group

CardHeader

# CardHeader API

Name	Type	Default Value
tag	any	header
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

CardImg

Component for placing image in card. Component inherits functionality from the CImg component.

# CardImg API

Name	Required	Type	Default Value
variant		(top \| bottom \| full)	full
variant of the image card

CardImgOverlay

Wrapper component with 'card-img-overlay' class.

# CardImgOverlay API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

CardLink

CCardLink is CLink component with additional 'card-link' class.

CardTitle

Wrapper component with 'card-title' class.

# CardTitle API

Name	Type	Default Value
tag	any	h4
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

CardSubtitle

Wrapper component with 'card-subtitle' class.

# CardSubtitle API

Name	Type	Default Value
tag	any	h6
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

CardText

Wrapper component with 'card-text' class.

# CardText API

Name	Type	Default Value
tag	any	p
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag