Search...
graphql
react

Card

React Bootstrap 5 Card

A React Bootstrap 5 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.

React Bootstrap 5 Card example

We are going to create some react boostrap card example which are avaliable in Contrast.

Importing the React Bootstrap Card Component

You begin by importing CDBCard into your project to use the Contrast React Bootstrap Card component.

js
import { CDBCard } from "cdbreact";

Default Card:

React Bootstrap cards use the least of markup and styles possible while yet providing a lot of control and customization.

The CDBCardImage component is used to hold images in our card, the CDBCardBody component is used to build the card's body, the CDBCardTitle component is used to write titles, and the CDBCardText component is used to generate the text in our card.

Contrast React Bootstrap Card component
Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac massa gravida, fermentum odio a, tristique lorem. Fusce hendrerit blandit aliquam. Vivamus finibus libero tincidunt leo venenatis malesuada. Ut mollis finibus molestie. Phasellus id felis nec arcu rhoncus maximus. Quisque luctus nisi posuere velit porttitor, eu porttitor est mattis. Integer semper quis quam ut mollis. Vivamus congue molestie fermentum. Etiam diam quam, iaculis vel felis vitae, vulputate egestas diam.
js
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="/img/cardbg.png" alt="Contrast React Bootstrap Card component"
            />
            <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

Heading

Paragraph

js
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

Heading

Paragraph

js
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

Contrast React Bootstrap Card component

Heading

Paragraph

Contrast React Bootstrap Card component

Heading

Paragraph

js
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

Contrast React Bootstrap Card component

Heading

Paragraph

Contrast React Bootstrap Card component
js
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

Nesting our CDBIcon in our CDBCard component allows us to have icons in our cards.

Total Downloads

1,057,891

Oct 1 - Dec 31, Worldwide

js
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

js
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="ms-3" size="small" color="warning"> Send Message </CDBBtn>
              </div>
            </CDBCardBody>
          </CDBCard>
    </CDBContainer>
  );
};

Artwork Full Cards

Pro Component

Heading

Paragraph

Heading

Paragraph

Chukwudi Mezue

Product Designer

Enugu, Nigeria

Mac Xenon

Product Designer

Enugu, Nigeria

js
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

js
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="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
            />
            <CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
              className="mx-auto border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
            <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 me-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="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
            />
            <CDBCardBody className="d-flex justify-content-between">
              <CDBPaneImage style={{ marginTop: "-6rem", borderStyle: "solid", borderWidth: "4px" }}
                className="border-white" width="130px" src="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
              <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 me-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="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
            <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="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" />
            <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="https://images.unsplash.com/photo-1623184663110-89ba5b565eb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80"
            />
            <CDBPaneImage style={{ marginTop: "-5rem", borderStyle: "solid", borderWidth: "4px" }}
              classN