PatternFly Elements - Home PatternFly Elements

Icon panel

Overview

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

This is icon panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more about PFElements

Installation

npm install @patternfly/pfe-icon-panel

Usage

<pfe-icon-panel icon="pfe-icon-server">
  <h3 slot="pfe-icon-panel--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="pfe-icon-panel--footer">
    <a href="https://pfelements.github.io">Learn more about PFElements</a>
  </pfe-cta>
</pfe-icon-panel>

Slots

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

Default slot (body)

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

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

Attributes

icon

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

Values

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

circled

Whether to draw a circular background behind the icon.

Methods

None

Events

None

Styling hooks

None