Pane with Location Marker

Warren Briggs

Australia

300m

import React from "react";
import { CDBPanel, CDBPane, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";
export const Pane = () => {
  return (
    <CDBContainer>
            <CDBPanel style={{width:"400px"}}>
              <CDBPane>
                <CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
                <div className="ml-3">
                  <CDBPanelTitle>Warren Briggs</CDBPanelTitle>
                  <CDBPanelText small>Australia</CDBPanelText>
                </div>
                <p className="ml-auto mb-0 text-danger">300m <CDBIcon fas icon="map-marker-alt" /></p>
              </CDBPane>
            </CDBPanel>
    </CDBContainer>
  );
};

Pane with Dropdown

Warren Briggs

Breafast

• Edit Profile
• Action
• Action 2

import React from "react";
import { CDBPane, CDBDropDownItem, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBPanel, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";
export const Pane = () => {
  return (
    <CDBContainer>
            <CDBPanel style={{width:"400px", padding:"10px"}}>
              <CDBPane>
                <CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
                <div className="ml-3">
                  <CDBPanelTitle>Warren Briggs</CDBPanelTitle>
                  <CDBPanelText small>Breakfast</CDBPanelText>
                </div>
                <CDBDropDown className="ml-auto">
                  <CDBDropDownToggle color="white"><CDBIcon className="text-muted" fas icon="ellipsis-h"/></CDBDropDownToggle>
                  <CDBDropDownMenu>
                    <CDBDropDownItem disabled>Edit Profile</CDBDropDownItem>
                    <CDBDropDownItem divider />
                    <CDBDropDownItem>Action 1</CDBDropDownItem>
                    <CDBDropDownItem>Action 2</CDBDropDownItem>
                  </CDBDropDownMenu>
                </CDBDropDown>
              </CDBPane>
            </CDBPanel>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Pane 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 Pane Import Statement

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

import { CDBPane, CDBDropDownItem, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBPanel, CDBPanelTitle, CDBPanelText, CDBPaneImage, Icon, CDBContainer } from "cdbreact";

API Reference: Contrast Pane Properties

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