Accedi / Registrati Account

PatternFly Elements

Web components demo

patternflyelements.com

Jump to section

Accordion component

Components are contextually aware so if you place an accordion inside a dark context, it will flip the text and accent colors used to meet our accessibility standards automatically.

Nested panel example

Panel with multiple paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Panel with links

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

Panel with CTA

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Call-to-action

Nested panel example

Panel with multiple paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Panel with links

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

Panel with CTA

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Call-to-action

Nested panel example

Panel with multiple paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Panel with links

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

Panel with CTA

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Call-to-action

Band component

Band components offer a variety of background color options, all of which will automatically flip the text for you for readability.

Bands offer several regions (or slots) in which to put content, including header, body, footer, and aside. The aside region can be adjusted to fill the full band height or just the body content height and can be moved right or left of the body region. It can also be placed at top or bottom of the body content on mobile. All of this is done using a few attributes on the pfe-band component. The final gem is an option to turn on an automatic CSS grid using the use-grid attribute which allows you to set a standard grid layout with just a few CSS properties. Check out the link below for details on attribute naming.

Full-height aside

You can assign any mark-up to the aside region of a band component and with the aside-height="full" attribute on pfe-band, let that element fill the height of the entire band.

Call-to-action component
More examples

Card component

The card component offers a variety of background settings along with border and padding.

Card component

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

More examples

Card heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

More examples

This is a custom card background, but the text color is still dynamic via the context attribute.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna ipsum dolor sit amet.

More examples

Tab component

Wind variant

Tab 1

Content 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 2

Content 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3

Content 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Earth variant

Tab 1

Content 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 2

Content 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3

Content 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wind variant + vertical

Tab 1

Content 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 2

Content 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3

Content 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Earth variant + vertical

Tab 1

Content 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tab 2

Content 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab 3

Content 3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call-to-action component

The call-to-action component offers a set of priority options - primary, secondary, and default - along with color configurations.

Modal component

A modal component pops open a window on a click event.

Open modal using a standard link

Modal with a header

Lorem ipsum dolor sit amet, inline link elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call-to-action link
Open modal with a CTA

Modal with a header

Lorem ipsum dolor sit amet, inline link elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call-to-action link

Content set component

The content set component leverages the experience of tabs when space allows, but converts content into an accordion if the window gets too small.  This is a big accessibility win for users.

Heading 1

The content set component can support nested web components like accordions.


Nested panel example

Panel with multiple paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Panel with links

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

Panel with CTA

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Call-to-action

Default CTA

Heading 2

Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.

Heading 3

Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

PatternFly Elements Classes

.pfe-title--6xl

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--5xl

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--4xl

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--3xl

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--2xl

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--xl

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--lg

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--md

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--sm

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.

.pfe-title--xs

Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.


.pfe-text--xl: Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique. Gravida odio mi tristique a eu litora adipiscing sem justo sodales accumsan parturient adipiscing pretium gravida tortor eleifend.

.pfe-text--lg: Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique. Gravida odio mi tristique a eu litora adipiscing sem justo sodales accumsan parturient adipiscing pretium gravida tortor eleifend.

.pfe-text--md: Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique. Gravida odio mi tristique a eu litora adipiscing sem justo sodales accumsan parturient adipiscing pretium gravida tortor eleifend.

.pfe-text--sm: Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique. Gravida odio mi tristique a eu litora adipiscing sem justo sodales accumsan parturient adipiscing pretium gravida tortor eleifend.

.pfe-text--xs: Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique. Gravida odio mi tristique a eu litora adipiscing sem justo sodales accumsan parturient adipiscing pretium gravida tortor eleifend.

Deprecated Red Hat Theme classes

These are helper classes connected with the design system standards.

Headline using class pfe-headline-xxl

Headline using class pfe-headline-xl

Headline using class pfe-headline-alpha

Headline using class pfe-headline-beta

Headline using class pfe-headline-gamma

Headline using class pfe-headline-delta

Headline using class pfe-headline-epsilon

Headline using class pfe-headline-zeta

Text using class pfe-text-lg. This is a good option for summary text because it will span 20px on desktop and 18px on screen less than 768px.

Text using class pfe-text. This is the class being applied to the majority of the copy on redhat.com. It is 18px on desktop and renders 16px on screens less than 768px.

Text using class pfe-text-sm. This is the class to use when you want the text to render 16px. This class does not have mobile styles. It will always render 16px.

Text using class pfe-text-xs. This is the class to use when you want the text to render 14px. This class does not have mobile styles. It will always render 14px.