Skip to main content

PatternFly Components Demo

This page demonstrates PatternFly React components in Docusaurus.

Alert Component​

Success alert:Success alert

PatternFly components are successfully integrated with Docusaurus!


Info alert:Info alert

You can now use any PatternFly component in your markdown files.

Card Components​

Networking

Advanced OVN-based networking with VPC, subnets, floating IPs, and NAT capabilities for multi-tenant isolation.

Virtual Machines

Run VMs alongside containers using KubeVirt integration with support for various OS images and cloud-init.

Storage

Multiple storage backends including Longhorn, Rook-Ceph, and Piraeus with CSI integration and dynamic provisioning.

Security

Keycloak integration, RBAC, network policies, and comprehensive audit logging for enterprise security.

Buttons​

Page Section Example​

Light Section

This is a light-colored page section using PatternFly styling.

Dark Section

This is a dark-colored page section with contrasting text.

Usage in MDX​

To use PatternFly components in your MDX files:

---
sidebar_position: 1
---

import { Card, CardTitle, CardBody } from '@patternfly/react-core';

# My Page

<Card>
  <CardTitle>My Card</CardTitle>
  <CardBody>Card content goes here</CardBody>
</Card>

Next Steps​