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.
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.
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.
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.
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.
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.
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.
Tab component
Wind variant
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.
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.
Content 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Earth variant
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.
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.
Content 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Wind variant + vertical
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.
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.
Content 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Earth variant + vertical
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.
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.
Content 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Modal component
A modal component pops open a window on a click event.
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.
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.
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.
Heading 2
Heading 3
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.
Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.
Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.
Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.
Scelerisque eu eget consectetur vestibulum ullamcorper eros odio convallis eget suspendisse consectetur tristique.
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.
