Icon Panel

Overview

Icon panel provides a way to present text with an accompanying icon.

Installation

npm install @patternfly/pfe-icon-panel

Usage

  <pfe-icon-panel icon="pfe-icon-server">
    <h3 slot="header">This is pfe-icon-panel</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <pfe-cta slot="footer">
      <a href="https://pfelements.github.io">Learn more about PFElements</a>
    </pfe-cta>
  </pfe-icon-panel>

Slots

header

The header of the icon panel. Assign content to this region using slot="header.

Default Slot

Any content that is not designated for the header or footer slot, will go to this slot.

footer

Use this slot for anything that you want in the footer of the icon panel. Assign content to this region using slot="footer.

Attributes

icon

For example, rh-leaf loads a leaf icon from an icon set named "rh". Values:

• ${iconSet}-${iconName}

DOM Property

icon

Type

string | undefined

Default

unknown

color

The color variant to use. This draws from your theming layer to color the icon. This will set icon color or background color (if circled is true).

Values:

• base
• lightest
• lighter
• darker
• darkest
• complement
• accent
• critical
• important
• moderate
• success
• info
• default

DOM Property

color

Type

IconColor

Default

'darker'

circled

Whether to draw a circular background behind the icon.

DOM Property

circled

Type

boolean

Default

false

stacked

Stacked

DOM Property

stacked

Type

boolean

Default

false

centered

Centered

DOM Property

centered

Type

boolean

Default

false

DOM Properties

Methods

Events

CSS Custom Properties

CSS Shadow Parts

icon

the icon element

content

the container for slotted content