Panel

Panels are useful to draw attention or contain certain text on a page. They are simple containers, which can be used to help guide users through the visual hierarchy of your design.

Import Syntax

xxxxxxxxxx
 
import Panel, {
  PanelTitle,
  PanelText
} from 'calcite-react/Panel'

Basic Usage

This is a panel.

Panels set background-color and frame content.

 
<Panel>
  <PanelTitle>This is a panel.</PanelTitle>
  <PanelText>
    Panels set <code>background-color</code> and frame content.
  </PanelText>
</Panel>

Color & Style

This is a panel.

Panels set background-color and frame content.

dark

This is a panel.

Panels set background-color and frame content.

black

This is a panel.

Panels set background-color and frame content.

white

This is a panel.

Panels set background-color and frame content.

lightBlue

This is a panel.

Panels set background-color and frame content.

blue

This is a panel.

Panels set background-color and frame content.

darkBlue

This is a panel.

Panels set background-color and frame content.

noBorder

This is a panel.

Panels set background-color and frame content.

noPadding

 
<GuideExample label="dark">
  <Panel dark>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="black">
  <Panel black>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="white">
  <Panel white>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="lightBlue">
  <Panel lightBlue>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="blue">
  <Panel blue>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="darkBlue">
  <Panel darkBlue>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="noBorder">
  <Panel noBorder>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>
<GuideExample label="noPadding">
  <Panel noPadding>
    <PanelTitle>This is a panel.</PanelTitle>
    <PanelText>
      Panels set <code>background-color</code> and frame content.
    </PanelText>
  </Panel>
</GuideExample>

Props

Panel `default`

Property	Type	Required	Default	Description
children	Node	false	-	Content of the Panel.
noBorder	Bool	false	-	Hide the border of the Panel.
noPadding	Bool	false	-	Remove the padding from the Panel.
dark	Bool	false	-	Dark style Panel.
black	Bool	false	-	Black style Panel.
white	Bool	false	-	White style Panel.
lightBlue	Bool	false	-	Light Blue style Panel.
blue	Bool	false	-	Blue style Panel.
darkBlue	Bool	false	-	Dark Blue style Panel.

PanelTitle

Property	Type	Required	Default	Description
children	Node	false	-	Content of the PanelTitle.

PanelText

Property	Type	Required	Default	Description
children	Node	false	-	Content of the PanelText.

Calcite React

Panel

Import Syntax

Basic Usage

This is a panel.

Color & Style

This is a panel.

This is a panel.

This is a panel.

This is a panel.

This is a panel.

This is a panel.

This is a panel.

This is a panel.

Props

Panel default

PanelTitle

PanelText

Panel `default`