Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Card components display content build of different elements with characteristic shadows, depth and hover effects.

Basic Examples

Basic Card example. Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

Basic

This is just a card text Get important notifications about you or activity you've missed

import React from "react";
import { CDBCard, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
            />
            <CDBCardBody>
              <CDBCardTitle>Basic</CDBCardTitle>
              <CDBCardText>This is just a card text Get important notifications about you or activity you've missed </CDBCardText>
              <CDBBtn>
                Button
                </CDBBtn>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Simple Cards

Heading

Paragraph

Heading

Paragraph

import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <div className="d-flex justify-content-center">
                <CDBBtn color="light" flat circle>
                  Button
                </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <CDBBtn color="light" flat block>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <CDBBtn color="light" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Bordered Cards

Heading

Paragraph

Heading

Paragraph

import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{ width: "25rem" }} border>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <div className="d-flex justify-content-center">
                <CDBBtn color="light" flat circle>
                  Button
                </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }} border>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <CDBBtn color="light" flat block>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <CDBBtn color="light" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Artwork Top Cards

Heading

Paragraph

Heading

Paragraph

import React from "react";
import { CDBCard, CDBCardBody, CDBCardImage, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
            />
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <div className="d-flex justify-content-center">
                <CDBBtn color="light" flat block circle>
                  Button
                </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }} border>
            <CDBCardImage
              className="img-fluid"
              src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
            />
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
              <CDBBtn color="light" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Artwork Middle Cards

Heading

Paragraph

Heading

Paragraph

import React from "react";
import { CDBCard, CDBCardBody, CDBView, CDBIframe, CDBCardTitle, CDBCardText, CDBBtn, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
            </CDBCardBody>
            <CDBView>
              <CDBIframe src="https://www.youtube.com/embed/xnczyP2jSR0"/>
            </CDBView>
            <CDBCardBody>
              <CDBBtn color="light" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }} border>
            <CDBCardBody>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
            </CDBCardBody>
            <CDBView>
              <CDBIframe src="https://www.youtube.com/embed/xnczyP2jSR0"/>
            </CDBView>
            <CDBCardBody>
              <CDBBtn color="light" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Widget Cards

Pro Component

Total Downloads

1,057,891

Oct 1 - Dec 31, Worldwide

import React from "react";
import { CDBCard, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{width: "25rem"}}>
            <CDBCardBody>
              <CDBCardTitle className="lead">Total Downloads</CDBCardTitle>
              <CDBCardTitle tag="h2">1,057,891</CDBCardTitle>
              <CDBCardText className="small text-muted">Oct 1 - Dec 31,<CDBIcon fas icon="globe"/> Worldwide</CDBCardText>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Profile Display Card

Sam Russo

Senior Software Developer

Detroit, USA

import React from "react";
import { CDBCard, CDBPaneImage, CDBCardImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
            />
            <CDBPaneImage style={{marginTop:"-5rem"}} className="mx-auto border" width="130px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU" />
            <CDBCardBody className="d-flex flex-column align-items-center mb-4">
              <CDBCardTitle>Sam Russo</CDBCardTitle>
              <CDBCardText>Senior Software Developer</CDBCardText>
              <CDBCardText className="text-muted">Detroit, USA</CDBCardText>
              <div>
                <CDBBtn size="small" color="dark"><CDBIcon fas icon="user-plus"/> Connect</CDBBtn>
                <CDBBtn className="ml-3" size="small" color="warning"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Profile List Card

Pro Component

Team Members

Warren Briggs

Online

Lu Chen

In a meeting

Lilah Loselev

Not Available

Danny

Offline

import React from "react";
import { CDBCard, CDBPane, CDBPaneImage, CDBBtn, CDBCardBody, CDBCardTitle, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{width: "25rem"}}>
            <CDBCardTitle className="lead p-3 border-bottom">Team Members</CDBCardTitle>
            <CDBCardBody className="py-0">
              <CDBPane className="mt-2">
                <CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
                <div className="ml-3">
                  <CDBCardTitle className="my-0 h6" >Warren Briggs</CDBCardTitle>
                  <p className="small m-0"><CDBIcon fas className="small p-0 mr-1 text-success" icon="circle"/>Online</p>
                </div>
                <CDBBtn style={{width:"45px"}} size="small" className="ml-auto" color="success" flat>Add</CDBBtn>
              </CDBPane>
              <CDBPane className="mt-4">
                <CDBPaneImage size="md" src="/img/pane/pane1.png" />
                <div className="ml-3">
                  <CDBCardTitle className="my-0 h6" >Lu Chen</CDBCardTitle>
                  <p className="small m-0"><CDBIcon fas className="small p-0 mr-1 text-warning" icon="circle"/>In a meeting</p>
                </div>
                <CDBBtn style={{width:"45px"}} size="small" className="ml-auto" color="success" flat>Add</CDBBtn>
              </CDBPane>
              <CDBPane className="mt-4">
                <CDBPaneImage size="md" src="/img/pane/pane2.png" />
                <div className="ml-3">
                  <CDBCardTitle className="my-0 h6" >Lilah Loselev</CDBCardTitle>
                  <p className="small m-0"><CDBIcon fas className="small p-0 mr-1 text-muted" icon="circle"/>Not Available</p>
                </div>
                <CDBBtn style={{width:"45px"}} size="small" className="ml-auto" color="success" flat>Add</CDBBtn>
              </CDBPane>
              <CDBPane className="my-4">
                <CDBPaneImage size="md" src="/img/pane/pane.png" />
                <div className="ml-3">
                  <CDBCardTitle className="my-0 h6" >Danny</CDBCardTitle>
                  <p className="small m-0"><CDBIcon fas className="small p-0 mr-1 text-danger" icon="circle"/>Offline</p>
                </div>
                <CDBBtn style={{width:"45px"}} size="small" className="ml-auto" color="success" flat>Add</CDBBtn>
              </CDBPane>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Artwork Full Cards

Pro Component

Heading

Paragraph

Heading

Paragraph

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

import React from "react";
import { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard
            style={{
              width: "25rem",
              backgroundImage:
                "url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg')",
            }}
          >
            <CDBCardBody style={{ color: "white" }}>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
            </CDBCardBody>
            <CDBCardBody>
              <CDBBtn color="white" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard
            style={{
              width: "25rem",
              backgroundImage:
                "url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg')",
            }}
            border
          >
            <CDBCardBody style={{ color: "white" }}>
              <CDBCardTitle>Heading</CDBCardTitle>
              <CDBCardText>Paragraph</CDBCardText>
            </CDBCardBody>
            <CDBCardBody>
              <CDBBtn color="white" flat circle>
                Button
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
            <CDBCard style={{ position: "relative", width: "25rem", height: "33rem", padding: "25px", backgroundImage: "url('img/rectangle.png')", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
              <CDBCardBody style={{backgroundColor:"white", width: "calc(100% - 50px)",textAlign: "center", align: "center", position: "absolute", bottom: "25px"}}>
                <CDBCardTitle style={{color: "#333333"}} className="font-weight-normal">Chukwudi Mezue</CDBCardTitle>
                <CDBCardText style={{color: "#333333", fontSize: "0.9rem"}} className="font-weight-lighter" >Product Designer</CDBCardText>
                <CDBCardText style={{color: "#333333"}} className="font-weight-light">Enugu, Nigeria</CDBCardText>
                <CDBCardBody style={{
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "0 50px",
                  margin: "20px 0"
                }}>
                  <CDBIcon size="lg" fab icon="facebook-f" style={{color: "#333333"}} />
                  <CDBIcon size="lg" fab icon="twitter"    style={{color: "#333333"}} />
                  <CDBIcon size="lg" fab icon="instagram"  style={{color: "#333333"}} />
                </CDBCardBody>
                  <CDBBtn color="dark" block>
                    Add User
                  </CDBBtn>
              </CDBCardBody>
            </CDBCard>
        <CDBCard style={{ position: "relative", width: "25rem", height: "33rem", backgroundImage: "url('img/rectangle.png')", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
          <CDBCardBody style={{backgroundColor:"white", width: "calc(100% - 50px)",textAlign: "left", align: "center", position: "absolute", bottom: 0}}>
            <CDBCardTitle style={{color: "#333333"}} className="font-weight-normal">Chukwudi Mezue</CDBCardTitle>
            <CDBCardText style={{color: "#333333", fontSize: "0.9rem"}} className="font-weight-lighter" >Product Designer</CDBCardText>
            <CDBCardText style={{color: "#333333"}} className="font-weight-light">Enugu, Nigeria</CDBCardText>
            <CDBBtn color="dark" block>
              Send Message
            </CDBBtn>
          </CDBCardBody>
        </CDBCard>
    </CDBContainer>
  );
};

Profile Cards

Pro Component

Mac Xenon

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Creating High Quality Resources and tools to Aid developers during the developement of their projects

Chukwudi Mezue

Product Designer

Creating High Quality Resources and tools to Aid developers during the developement of their projects

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Creating High Quality Resources and tools to Aid developers during the developement of their projects

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Creating High Quality Resources and tools to Aid developers during the developement of their projects

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Creating High Quality Resources and tools to Aid developers during the developement of their projects

import React from "react";
import { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBCardImage, CDBPaneImage, CDBContainer } from "cdbreact";
export const Card = () => {
  return (
    <CDBContainer>
          <CDBCard style={{
            position: "relative",
            width: "25rem",
            height: "33rem",
            padding: "25px",
            backgroundImage: "url('img/rectangle.png')",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center"
          }}>
            <CDBCardBody style={{
              backgroundColor: "white",
              width: "calc(100% - 50px)",
              textAlign: "center",
              align: "center",
              position: "absolute",
              bottom: "25px"
            }}>
              <CDBCardTitle style={{ color: "#333333" }} className="font-weight-normal">Mac Xenon</CDBCardTitle>
              <CDBCardText style={{ color: "#333333", fontSize: "0.9rem" }} className="font-weight-lighter">Product Designer</CDBCardText>
              <CDBCardText style={{ color: "#333333" }} className="font-weight-light">Enugu, Nigeria</CDBCardText>
              <CDBCardBody style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "0 50px",
                margin: "20px 0"
              }}>
                <CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
                <CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
                <CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
              </CDBCardBody>
              <CDBBtn color="dark" block>
                Add User
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{
            position: "relative",
            width: "25rem",
            height: "33rem",
            backgroundImage: "url('img/rectangle.png')",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center"
          }}>
            <CDBCardBody style={{
              backgroundColor: "white",
              width: "calc(100% - 50px)",
              textAlign: "left",
              align: "center",
              position: "absolute",
              bottom: 0
            }}>
              <CDBCardTitle style={{ color: "#333333" }} className="font-weight-normal">Mac Xenon</CDBCardTitle>
              <CDBCardText style={{ color: "#333333", fontSize: "0.9rem" }} className="font-weight-lighter">Product Designe</CDBCardText>
              <CDBCardText style={{ color: "#333333" }} className="font-weight-light">Enugu, Nigeria</CDBCardText>
              <CDBBtn color="dark" block>
                Send Message
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{
            position: "relative",
            width: "25rem",
            height: "33rem",
            backgroundImage: "url('img/rectangle.png')",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center"
          }}>
            <CDBCardBody style={{
              backgroundColor: "white",
              width: "100%",
              textAlign: "center",
              align: "center",
              position: "absolute",
              bottom: 0
            }}>
              <CDBCardTitle style={{ color: "#333333" }} className="font-weight-normal">Mac Xenon</CDBCardTitle>
              <CDBCardText style={{ color: "#333333", fontSize: "0.9rem" }} className="font-weight-lighter">Product Designer</CDBCardText>
              <CDBCardText style={{ color: "#333333" }} className="font-weight-light">Enugu, Nigeria</CDBCardText>
              <CDBBtn color="dark" block>
                Send Message
              </CDBBtn>
              <CDBCardBody style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "0 50px",
                margin: "20px 0"
              }}>
                <CDBBtn outline flat color="dark">
                  <CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
                </CDBBtn>
                <CDBBtn outline flat color="dark">
                  <CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
                </CDBBtn>
                <CDBBtn outline flat color="dark">
                  <CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
                </CDBBtn>
              </CDBCardBody>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="./img/uber.png"
            />
            <CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
              className="mx-auto border-white" width="130px" src="./img/ellipse.png" />
            <CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
              <CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
              <CDBCardText className="text-muted">Product Designer</CDBCardText>
              <CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
              <CDBCardText style={{ color: "#333333" }}>
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </CDBCardText>
              <div className="d-flex justify-content-between w-100">
                <CDBBtn className="w-100 mr-4" color="dark">Add User</CDBBtn>
                <CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="./img/uber.png"
            />
            <CDBCardBody className="d-flex justify-content-between">
              <CDBPaneImage style={{ marginTop: "-6rem", borderStyle: "solid", borderWidth: "4px" }}
                className="border-white" width="130px" src="./img/ellipse.png" />
              <div className="align-items-left pt-1 pb-0">
                <CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
                <CDBCardText className="text-muted">Product Designer</CDBCardText>
              </div>
            </CDBCardBody>
            <CDBCardBody className="d-flex flex-column align-items-center mb-2">
              <CDBCardText style={{ color: "#333333" }}>
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </CDBCardText>
              <div className="d-flex justify-content-between w-100">
                <CDBBtn className="w-100 mr-4" color="dark">Add User</CDBBtn>
                <CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
            <CDBCardBody style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "0 50px",
              margin: "0 0 20px"
            }}>
              <CDBBtn outline flat color="dark">
                <CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
              </CDBBtn>
              <CDBBtn outline flat color="dark">
                <CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
              </CDBBtn>
              <CDBBtn outline flat color="dark">
                <CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
              </CDBBtn>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBPaneImage style={{ marginTop: "2rem", borderStyle: "solid", borderWidth: "4px" }}
              className="mx-auto border-white" width="130px" src="./img/ellipse.png" />
            <CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
              <CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
              <CDBCardText className="text-muted">Product Designer</CDBCardText>
              <CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
              <CDBCardText style={{ color: "#333333" }}>
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </CDBCardText>
              <div className="w-100">
                <CDBBtn className="w-100 mb-3" color="dark">Send Message</CDBBtn>
                <CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="./img/uber.png"
            />
            <CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
              className="mx-auto border-white" width="130px" src="./img/ellipse.png" />
            <CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
              <CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
              <CDBCardText className="text-muted">Product Designer</CDBCardText>
              <CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
              <CDBCardBody style={{
                width: "100%",
                display: "flex",
                justifyContent: "space-between",
                padding: "0 70px",
                margin: "10px 0 30px"
              }}>
                <CDBIcon size="lg" fab icon="facebook-f" style={{ color: "#333333" }} />
                <CDBIcon size="lg" fab icon="twitter" style={{ color: "#333333" }} />
                <CDBIcon size="lg" fab icon="instagram" style={{ color: "#333333" }} />
              </CDBCardBody>
              <div className="w-100">
                <CDBBtn className="w-100 mb-3" color="dark">Add User</CDBBtn>
                <CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBCardImage
              className="img-fluid"
              src="./img/uber.png"
            />
            <CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
              className="mx-auto border-white" width="130px" src="./img/ellipse.png" />
            <CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
              <CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
              <CDBCardText className="text-muted">Product Designer</CDBCardText>
              <CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
              <CDBCardText style={{ color: "#333333", margin: "20px 0 30px" }}>
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </CDBCardText>
              <div className="w-100">
                <CDBBtn className="w-100 mb-0" color="dark">Send Message</CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
          <CDBCard style={{ width: "25rem" }}>
            <CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
              className="mx-auto border-white" width="130px" src="./img/ellipse.png" />
            <CDBCardBody className="d-flex flex-column align-items-center mb-4 pt-1">
              <CDBCardTitle>Chukwudi Mezue</CDBCardTitle>
              <CDBCardText className="text-muted">Product Designer</CDBCardText>
              <CDBCardText style={{ fontSize: 16, color: "#333333" }}>Enugu, Nigeria</CDBCardText>
              <CDBCardText style={{ color: "#333333" }}>
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </CDBCardText>
              <div className="w-100">
                <CDBBtn className="w-100 mb-3" color="dark">Send Message</CDBBtn>
                <CDBBtn className="w-100" outline color="dark"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Card component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Card Import Statement

You need to import the proper components first before using it.

import { CDBCard, CDBBtn, CDBCardBody, CDBCardTitle, CDBCardText, CDBIcon, CDBCardImage, CDBPane, CDBPaneImage, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBDropDownItem, CDBContainer } from "cdbreact";

API Reference: Contrast Card Properties

The table below shows the configuration options of the CDBCard component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCard className="myClass" ... />
tag	String	div	Changes default input tag	<CDBCard tag="div" ... />
color	String		Sets background color	<CDBCard color="dark" .../>
border	Boolean	false	Gives border	<CDBCard border .../>

API Reference: Contrast Card Body Properties

The table below shows the configuration options of the CDBCardBody component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardBody className="myClass" ... />
tag	function or String	div	Changes default `html` tag	<CDBCardBody tag="div" ... />
cascade	Boolean	false	Switches the CardBody to cascade style mode	<CDBCardBody cascade .../>

API Reference: Contrast Card Image Properties

The table below shows the configuration options of the CDBCardImage component.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBCardImage className="myClass" ... />
tag	function or String	img	Changes default `html` tag	<CDBCardImage tag="div" ... />
cascade	Boolean	false	Switches the CardBody to cascade style mode	<CDBCardImage cascade .../>
hover	Boolean	false	Switches on hover behaviour	<CDBCardImage hover .../>
overlay	String	white-light	Sets the color of hover overlay	<CDBCardImage overlay="white-light" ... />
src	String		Source of the image	<CDBCardImage src="image_src" ... />
top	Boolean	false	Makes image fluid	<CDBCardImage top .../>

API Reference: Contrast Card Text Properties

The table below shows the configuration options of the CDBCardText component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardText className="myClass" ... />
tag	function or String	p	Changes default `html` tag	<CDBCardText tag="p" ... />
muted	Boolean	false	Mutes the text color	<CDBCardText muted .../>
small	Boolean	false	Uses html `small` as component's tag	<CDBCardText small .../>

API Reference: Contrast Card Title Properties

The table below shows the configuration options of the CDBCardTitle component.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardTitle className="myClass" ... />
tag	function or String	h4	Changes default `html` tag	<CDBCardTitle tag="h1" ... />
sub	Boolean	false	Styles title as subtitle	<CDBCardTitle sub .../>

Iframe

Footer