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

Movatterモバイル変換