diff --git a/packages/v4/patternfly-docs/content/training/copyCodeBlock/copyCodeBlock.js b/packages/v4/patternfly-docs/content/training/copyCodeBlock/copyCodeBlock.js
new file mode 100644
index 0000000000..46d8d28fcb
--- /dev/null
+++ b/packages/v4/patternfly-docs/content/training/copyCodeBlock/copyCodeBlock.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton } from '@patternfly/react-core';
+
+export const CopyCodeBlock = ({
+ children
+}) => {
+ const [copied, setCopied] = React.useState(false);
+
+ const clipboardCopyFunc = (event, text) => {
+ navigator.clipboard.writeText(text.toString());
+ };
+
+ const onClick = (event, text) => {
+ clipboardCopyFunc(event, text);
+ setCopied(true);
+ };
+
+ const actions = (
+
+
+ onClick(e, children)}
+ exitDelay={copied ? 1500 : 600}
+ maxWidth="110px"
+ variant="plain"
+ onTooltipHidden={() => setCopied(false)}
+ >
+ {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+
+
+
+ );
+
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/v4/patternfly-docs/content/training/design.md b/packages/v4/patternfly-docs/content/training/design.md
index 252967746a..0430329ddd 100644
--- a/packages/v4/patternfly-docs/content/training/design.md
+++ b/packages/v4/patternfly-docs/content/training/design.md
@@ -15,7 +15,7 @@ import './design.css'
The Sketch design training is powered with a tool called Thinkific. You will need to create a free account in order to complete this training.
-
@@ -29,7 +29,7 @@ import './design.css'
level="beginner"
time="5 minutes"
description="Set up your design environment with Sketch."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12824668-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12824668-video"
/>
@@ -39,7 +39,7 @@ import './design.css'
level="beginner"
time="20 minutes"
description="Learn the types of mockup fidelity as well as pros and cons of each."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12854000-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12854000-video"
/>
@@ -49,7 +49,7 @@ import './design.css'
level="beginner"
time="5 minutes"
description="Learn what the PatternFly Library and the PatternFly Template are and highlight the connections between them."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12855027-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12855027-video"
/>
@@ -59,7 +59,7 @@ import './design.css'
level="beginner"
time="45 minutes"
description="Get up to speed with common Sketch shortcuts and skills."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12855102-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12855102-video"
/>
@@ -69,7 +69,7 @@ import './design.css'
level="intermediate"
time="20 minutes"
description="Learn about symbol overrides, what they are, and why they are important."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12855787-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12855787-video"
/>
@@ -79,7 +79,7 @@ import './design.css'
level="intermediate"
time="25 minutes"
description="Get familiar with the PatternFly spacing system and explain how it fits into the design kit."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12856030-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12856030-video"
/>
@@ -89,7 +89,7 @@ import './design.css'
level="advanced"
time="15 minutes"
description="Learn when designers should detach from symbols in the PatternFly library and how to retain PatternFly standards when doing so."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12856104-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12856104-video"
/>
@@ -99,7 +99,7 @@ import './design.css'
level="beginner"
time="10 minutes"
description="Learn how to stay up to date with design components, how to contribute, and where to ask questions."
- designUrl="https://patternflyt-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12856217-video"
+ designUrl="https://patternfly-training.thinkific.com/courses/take/pf-sketch-e-training/lessons/12856217-video"
/>
diff --git a/packages/v4/patternfly-docs/content/training/html-css/css-variables-and-overrides.md b/packages/v4/patternfly-docs/content/training/html-css/css-variables-and-overrides.md
new file mode 100644
index 0000000000..4e6c7808bb
--- /dev/null
+++ b/packages/v4/patternfly-docs/content/training/html-css/css-variables-and-overrides.md
@@ -0,0 +1,238 @@
+---
+id: HTML CSS variables and overrides training
+section: training
+hideNavItem: true
+---
+import { Button, ClipboardCopy, Divider, PageSection } from '@patternfly/react-core';
+
+
+# CSS variables and overrides
+PatternFly Core is based on the principles of Atomic Design and BEM (Block, Element, Modifier). BEM is a popular CSS methodology for building modular, scalable applications. It provides scope, avoids inheritance, and reduces CSS specificity and conflicts.
+
+BEM works perfectly with a modular design system, as each unique component can be represented as an independent block. Since a block is tied to a component, developers are able to develop, move around, and nest components without conflicts in their application’s CSS.
+PatternFly uses a modified version of BEM for its CSS architecture. PatternFly deviates from BEM in relation to modifiers.
+
+This tutorial covers how PatternFly uses BEM as a framework for its component library. You'll learn how to override and create both global and component-level custom properties and component elements.
+
+
+## Part 1: Overriding PatternFly component-level properties
+In PatternFly, component-level custom properties follow this general formula:
+`--pf-c-block[__element][--modifier][--state][--breakpoint][--pseudo-element]--PropertyCamelCase.`
+ - `--pf-c-block` refers to the block, usually the component or layout name (for example, `--pf-c-alert`).
+ - `__element` refers to the element inside of the block (for example, `__title`).
+ - `--modifier` refers to a modifier class such as `.pf-m-danger`, and is prefixed with `m-` in the component variable (for example`--m-danger`).
+ - `--state` is something like hover or active.
+ - `--breakpoint` is a media query breakpoint such as `sm` for `$pf-global--breakpoint--sm`.
+ - `--pseudo-element` is one of either `before` or `after`.
+ - `PropertyCamelCase` refers to the property that is being changed.
+
+To explore this concept, you can practice overriding the title color custom property in the success variation of the alert component using the provided CodeSandbox.
+
+
+
+### Step 1. Familiarize with `index.html`
+Note the alert component in the `` of `index.html`.
+
+### Step 2. Create custom property name and styles
+Write the CSS for the custom property name in the `style.css` file. Overriding the success variation’s title color means overriding its custom property.
+
+#### Step 2.1
+In the `style.css` file, in the `.pf-c-alert{}` block, write the custom property name.
+
+In reference to the formula described in Part 1, this should be: `--pf-c-alert`
+
+#### Step 2.2
+Add the modifier to the custom property name. As displayed in the CSS variables of PatternFly's alert component documentation, the success variation modifier class `pf-m-success` applies to `pf-c-alert`. Add that modifier to the custom property.
+
+The custom property name should now be: `--pf-c-alert--m-success`
+
+#### Step 2.3
+Add the element to the custom property name. The element that is being changed is the title of the alert.
+
+The custom property name should now be: `--pf-c-alert--m-success__title`
+
+#### Step 2.4
+Add the property that is being modified. In this case, modify the color property of the title in the alert component.
+
+The custom property name should now be: `--pf-c-alert--m-success__title--Color`
+
+#### Step 2.5
+Define the value of the component-level CSS variable. PatternFly's global danger color is: `--pf-global--danger-color--100`. You can reference PatternFly’s global colors documentation for more information.
+
+Assign the custom property name `(--pf-c-alert--m-success__title--Color)` that is already inside the `.pf-c-alert{}` block to the global danger color.
+
+It should look like this: `--pf-c-alert--m-success__title--Color: var(--pf-global--danger-color--100);`
+
+The resulting alert should match Figure 1.
+
+**Figure 1**
+
+
+
+
+## Part 2: Overriding PatternFly global properties
+In PatternFly, global properties follow this general formula:
+`--pf-global--concept--PropertyCamelCase--modifier--state`
+
+Global properties are prefixed with the word global.
+ - A `concept` is something like a spacer or main-title.
+ - A `PropertyCamelCase` is something like `BackgroundColor` or `FontSize`.
+ - A `modifier` is something like `sm`, or `lg`.
+ - A `state` is something like `hover` or `expanded`. They are concepts, never tied to an element or component. This is incorrect: `--pf-global--h1--FontSize`. This is correct: `--pf-global--FontSize--3xl`.
+
+To explore this concept, override the global link color by setting it to the custom property for danger using the provided CodeSandbox for part 2. The `index.html` file contains a button and expandable component to demonstrate how changing a global variable has an impact across components.
+
+
+
+### Step 1. Familiarize with `index.html`
+Note the button component and the expandable section component in the `` of the `index.html` file.
+
+### Step 2. Override a global custom property
+
+#### Step 2.1
+Write the prefix for the global custom property in the `:root` block in the `styles.css` file. Since global custom properties are prefixed with the word global, use that for the beginning of the custom property.
+
+It should look like this: `--pf-global`
+
+#### Step 2.2
+Add the concept to the global custom property. The concept for the link color is `link`.
+
+The global custom property should now look like this: `--pf-global--link`
+
+#### Step 2.3
+Add the property to the global custom property. As the color is being modified, add the color property as the next step.
+
+The global custom property should now look like: `--pf-global--link--Color`
+
+#### Step 2.4
+Define the value of the global variable. PatternFly's global danger color is: `--pf-global--danger-color--100`.
+Assign the custom property name `(--pf-global--link--Color)` that is already inside of the `:root` block to the global danger color.
+
+It should look like this: `--pf-global--link--Color: var(--pf-global--danger-color--100);`
+
+The resulting UI in the CodeSandbox should match Figure 2.
+
+**Note:** The links in the button component and expandable component both have inherited the new red link color.
+
+**Figure 2.**
+
+
+
+
+
+## Part 3: Create and use component level CSS variables to override PatternFly styles
+It is important to understand how BEM is used to create and override variables.
+
+To explore this concept, add a BEM element and custom styles with CSS custom properties to support a badge element in the label component using the provided CodeSandbox for part 3. Assume there is a common use case for adding a badge to the left of text in the label component. When adding the custom badge element to the label component, also apply a margin-right of 8px.
+
+
+
+### Step 1. Familiarize with `index.html`
+Note the label component in the `` of the `index.html`. This label contains a badge component and some text. The default PatternFly label component only styles the label itself and the text inside. Since there has been a badge component passed into the label, it is necessary to add space between the badge and the text beside it.
+
+To do this the BEM way, a BEM element class `(pf-c-label__badge)` has been applied to the badge.
+
+### Step 2. Style the badge
+**Note:** Never apply a global custom property as the value for a property in a component's CSS.
+
+#### Step 2.1
+Create a new variable to represent the badge's margin. Within style.css, in the `.pf-c-label{}` block, define the beginning of the custom property, which is the name of the component.
+
+It should look like: `--pf-c-label`
+
+#### Step 2.2
+Define the value of the new custom property. Add the element after the name of the component.
+
+The custom property should now be: `--pf-c-label__badge`
+
+#### Step 2.3
+Add the property being applied to the badge after the element.
+
+It should look like this: `--pf-c-label__badge--MarginRight`
+
+#### Step 2.4
+Define the value of the new custom CSS variable. PatternFly's global variable for 8px of space is `--pf-global--spacer--sm`. You can reference PatternFly’s documentation about spacers for more information.
+
+Assign the custom property name `--pf-c-label__badge--MarginRight` that is already inside of the `.pf-c-label{}` block to the global variable for 8px of space.
+
+It should look like this: `--pf-c-label__badge--MarginRight: var(--pf-global--spacer--sm);`
+
+#### Step 2.5
+Assign the new custom property name to the property that is being overridden. Add a margin-right declaration inside of `.pf-c-label__badge{}` and assign it to the new margin variable.
+
+It should look like this: `margin-right: var(--pf-c-label__badge--MarginRight);`
+
+**Note:** Once the preview reloads, there should be space to the right of the badge.
+
+
+
+## Part 4: Create and use global CSS variables to override PatternFly styles
+To explore this concept, create a new global custom property for a 5xl font size. Use this new global property to make a new variation of the title component using the provided CodeSandbox for part 4.
+
+Referencing PatternFly's typography design guidelines, the largest font size PatternFly offers is a "super hero heading" size. It is 36px represented by the global variable `pf-global--FontSize--4xl`. Assume that there is a need for a larger font size for the title component that is used across the entire application.
+
+
+
+### Step 1. Familiarize with `index.html`
+Note the title component in the `` of the `index.html` file. It has a modifier class applied to it which has no PatternFly styles defined for it thus far.
+
+### Step 2. Define a global custom property name
+Follow the existing convention for global font size custom properties.
+
+#### Step 2.1
+Add the new custom property for font size inside of the `:root{}` block. This applies it to the global scope of the application. It should look like this: `--pf-global--FontSize--5xl`
+
+#### Step 2.2
+Define the value of the new global variable. Assign the property name to the pixel value for the new font size.
+Update the line added in step 2.1 to be 42px.
+
+It should look like this: `--pf-global--FontSize--5xl: 42px;`
+
+### Step 3. Create a local component level custom property
+Create a local component level custom property in the `.pf-c-title{}` block in the styles.css file. Set its value to the newly defined global property.
+The local custom property should represent the 5xl variation's font size.
+
+#### Step 3.1
+Beginning with the component name, write the custom property and add it to the `.pf-c-title{}` block in the `style.css` file.
+
+It should look like this: `--pf-c-title`
+
+#### Step 3.2
+Add the new modifier to the custom property name.
+
+It should look like this: `--pf-c-title--m-5xl`
+
+#### Step 3.3
+Add the property that the custom property represents.
+
+It should look like this: `--pf-c-title--m-5xl--FontSize`
+
+#### Step 3.4
+Define the value of the component level custom property to be equal to the newly defined global variable.
+
+It should look like this: `--pf-c-title--m-5xl--FontSize: var(--pf-global--FontSize--5xl);`
+
+### Step 4. Define the styles for the new 5xl variation.
+
+#### Step 4.1 Chain selectors
+Knowing that the modifier `.pf-m-5xl` will apply to the title component, in the CSS, chain the selector to create `.pf-c-title.pf-m-5xl`
+Add this block inside of `.pf-c-title`, underneath the declaration from step 3.
+
+```noLive
+.pf-c-title.pf-m-5xl {
+ /* styles go here */
+}
+```
+
+#### Step 4.2
+Create a declaration within the modifier block for the font-size CSS rule using the new component level custom property.
+
+It should look like: `font-size: var(--pf-c-title--m-5xl--FontSize);` inside of `.pf-m-5xl{}`.
+
+
+
+### Compare your results.
+A fully constructed card can be viewed and modified in the CodeSandbox solution for part 4. Compare your work with the solution.
+
+
+
\ No newline at end of file
diff --git a/packages/v4/patternfly-docs/content/training/html-css/fundamentals.md b/packages/v4/patternfly-docs/content/training/html-css/fundamentals.md
new file mode 100644
index 0000000000..6fc47873cf
--- /dev/null
+++ b/packages/v4/patternfly-docs/content/training/html-css/fundamentals.md
@@ -0,0 +1,180 @@
+---
+id: HTML fundamentals training
+section: training
+hideNavItem: true
+---
+import { Button, ClipboardCopy, Divider, PageSection } from '@patternfly/react-core';
+import { CopyCodeBlock } from '../copyCodeBlock/copyCodeBlock';
+
+
+# Fundamentals
+
+PatternFly Core is based on the principles of Atomic Design and BEM (Block, Element, Modifier).
+
+Atomic Design is a methodology for creating design systems. Using Atomic Design, user interfaces are broken down into reusable components that can be reassembled to create reusable interaction patterns.
+PatternFly consists of isolated and modular structures that fall into three categories:
+- Components are modular and independent structures concerned with presentation.
+- Layouts allow for the organization and grouping of their immediate children on the page.
+- Demos illustrate how to assemble components and layouts into complex structures.
+
+## Components
+In PatternFly, components are the basic building blocks of user interfaces. They cannot be broken down into smaller parts. Examples include the button, label, and badge components. A CodeSandbox link has been provided to experiment with and follow the proceeding steps.
+
+
+
+
+
+### Step 1. Add a button component.
+Add a button element to the `` of the `index.html` file. To apply PatternFly styling to the button, add the class `pf-c-button`. To also apply ‘primary’ styling to the button and make it a bright blue color, add the `pf-m-primary` class.
+
+
+{``}
+
+
+**Note:** A simple component can be reused multiple times.
+
+
+{`\n`}
+
+
+### Step 2. Build more complex components
+Simple components can be combined to make more complex components that are still reusable.
+When simpler components are used within more complex components, the layout of the elements are defined in the stylesheet for the complex component.
+In this step, add a badge component to the chip component.
+
+#### Step 2.1
+To build a chip component, replace the contents of the `` in the index.html file with the following code snippet.
+
+
+{`
+
+ Chip
+
+\n
`}
+
+
+This is the default chip component that already has another component in it: the button. This is why the chip can be considered as a more complex component.
+
+#### Step 2.2
+Add the badge inside the chip. To do this, add this block of code between `pf-c-chip__text` and `pf-c-button`.
+
+
+{`
+7\n`}
+
+
+**Note:** Remember, this is a component and not a demo because the chip component includes styles that handle how the badge looks within the chip. For example, when the badge component is added to the chip, it receives styling that gives it a margin. You can see that the badge in a chip has its own CSS variable, `--pf-c-chip__c-badge--MarginLeft`, defined for the right margin under the CSS Variables section of the chip documentation.
+
+The resulting chip should match the following image.
+
+
+
+
+
+## Layouts
+
+In PatternFly, layouts allow for organizing and grouping elements. This tutorial covers just 1 of the 7 layouts.
+
+### Step 1
+Copy code into the `` of the `index.html` file.
+
+
+{`
+
+
+ Title
+
+
+ Body
+
+
+
\n
`}
+
+
+### Step 2
+Add the `pf-l-bullseye` class to the card. This will center the card horizontally and vertically on the page.
+Find the outermost `
` wrapper for the card and add the class `pf-l-bullseye`.
+It should look like: `
`
+
+**Note:** It’s important to follow the documentation for layouts because it demonstrates where to add the layout class. The documentation for bullseye specifies to add the class `pf-l-bullseye` to the parent container of its child.
+
+
+
+## Demos
+Demos show how PatternFly’s components and layouts are put together to build more complex structures. Demos have no additional styling; they are strictly made from components and layouts. If styling is needed for a certain demo, then instead create new components or layouts, or variants of the components or layouts.
+
+Create a form demo using components and layouts.
+
+### Step 1. Add five form components
+Copy and paste this block of code 5 times in the index.html file.
+
+
+{``}
+
+
+### Step 2. Apply a grid layout
+
+#### Step 2.1
+Add one `
` wrapper around all 5 form components with the `pf-l-grid` layout class. It should look like this:
+
+```noLive
+
+ /* 5 form components are here */
+
+```
+
+### Step 3.
+Wrap each form component in its own `pf-l-grid__item` layout class. To do this, look for each `pf-c-form` in `index.html` and wrap it in the `pf-l-grid__item` class.
+The wrapper should look like this:
+
+```noLive
+
+ /* code for individual form component */
+
+```
+
+### Step 4. Add the `pf-m-gutter` modifier class to the grid layout
+Adding the `pf-m-gutter` modifier class to the grid layout ensures there is equal spacing around all children.
+
+Add the class `pf-m-gutter` after `pf-l-grid` to the outermost wrapper, inside the quotation marks.
+It should look like: `
`
+**Note:** Learn how modifier classes work with layout classes by looking at PatternFly's grid documentation.
+
+### Step 5. Add modifier classes to the grid item classes.
+This step modifies the number of columns that a grid item spans. The maximum number of columns that a grid item can span is 12 (which is equivalent to 100%).
+#### Step 5.1
+Find each `pf-l-grid__item` that was added in step 3 and add the class `pf-m-[number from 1 - 12]`. The numbers across a row should add up to 12.
+
+#### Step 5.2
+Add `pf-m-6-col` to the first 2 grid items and add `pf-m-4-col` to the last 3 grid items.
+
+The first 2 grid items should look like: `
`
+The second 2 grid items should look like: `
`
+
+
+
+## Compare your results.
+
+A fully constructed demo can be viewed and modified in the provided CodeSandbox solution. Compare your work with the solution.
+
+
+
+
diff --git a/packages/v4/patternfly-docs/content/training/html.md b/packages/v4/patternfly-docs/content/training/html.md
index 4006a830b8..94dd9a9e33 100644
--- a/packages/v4/patternfly-docs/content/training/html.md
+++ b/packages/v4/patternfly-docs/content/training/html.md
@@ -16,47 +16,22 @@ import { TrainingCard } from './trainingCard/trainingCard';
level="beginner"
time="20 minutes"
description="Learn about components, layouts, and demos."
- katacodaId="the-building-blocks-of-patternfly"
- />
-
-
-
-
-
-
-
-
-
+
+
+## CSS Overrides
+
+
diff --git a/packages/v4/patternfly-docs/content/training/img/alert-red-title.png b/packages/v4/patternfly-docs/content/training/img/alert-red-title.png
new file mode 100644
index 0000000000..426226bd4d
Binary files /dev/null and b/packages/v4/patternfly-docs/content/training/img/alert-red-title.png differ
diff --git a/packages/v4/patternfly-docs/content/training/img/basic-card.png b/packages/v4/patternfly-docs/content/training/img/basic-card.png
new file mode 100644
index 0000000000..1ecac3f9a2
Binary files /dev/null and b/packages/v4/patternfly-docs/content/training/img/basic-card.png differ
diff --git a/packages/v4/patternfly-docs/content/training/img/card-layout.png b/packages/v4/patternfly-docs/content/training/img/card-layout.png
new file mode 100644
index 0000000000..e99b5ce355
Binary files /dev/null and b/packages/v4/patternfly-docs/content/training/img/card-layout.png differ
diff --git a/packages/v4/patternfly-docs/content/training/img/chip.png b/packages/v4/patternfly-docs/content/training/img/chip.png
new file mode 100644
index 0000000000..c5e323fb41
Binary files /dev/null and b/packages/v4/patternfly-docs/content/training/img/chip.png differ
diff --git a/packages/v4/patternfly-docs/content/training/img/global-link-color-red.png b/packages/v4/patternfly-docs/content/training/img/global-link-color-red.png
new file mode 100644
index 0000000000..c5e04c62be
Binary files /dev/null and b/packages/v4/patternfly-docs/content/training/img/global-link-color-red.png differ
diff --git a/packages/v4/patternfly-docs/content/training/react-charts.md b/packages/v4/patternfly-docs/content/training/react-charts.md
index ad76021a89..f025390c5a 100644
--- a/packages/v4/patternfly-docs/content/training/react-charts.md
+++ b/packages/v4/patternfly-docs/content/training/react-charts.md
@@ -1,6 +1,5 @@
---
id: React charts
-section: training
---
import { Gallery, GalleryItem } from '@patternfly/react-core';
diff --git a/packages/v4/patternfly-docs/content/training/react.md b/packages/v4/patternfly-docs/content/training/react.md
index 5754e2234b..de41efde61 100644
--- a/packages/v4/patternfly-docs/content/training/react.md
+++ b/packages/v4/patternfly-docs/content/training/react.md
@@ -14,53 +14,10 @@ import { TrainingCard } from './trainingCard/trainingCard';
trainingType="react"
title="PatternFly React basics"
level="beginner"
- time="10 minutes"
- description="Build your first PatternFly component."
- katacodaId="patternfly-react-basics"
- />
-
-
-
-## Components
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/v4/patternfly-docs/content/training/react/fundamentals.md b/packages/v4/patternfly-docs/content/training/react/fundamentals.md
new file mode 100644
index 0000000000..0491c680aa
--- /dev/null
+++ b/packages/v4/patternfly-docs/content/training/react/fundamentals.md
@@ -0,0 +1,159 @@
+---
+id: React fundamentals training
+section: training
+hideNavItem: true
+---
+
+import { Button, ClipboardCopy, Divider, PageSection } from '@patternfly/react-core';
+import { CopyCodeBlock } from '../copyCodeBlock/copyCodeBlock';
+
+
+# React fundamentals
+PatternFly React is made up of components, layouts, and demos. The PatternFly React library provides a collection of React components used to build interfaces with consistent markup, styling, and behavior.
+
+To become familiar with building UIs with PatternFly, you will build a PatternFly card. A card is a flexible element for containing any type of content. Cards are used on dashboards, in data displays, or for positioning content on a page.
+
+
+## Step 1. Consider and evaluate the design
+Consider the design in Figure 1 and evaluate which components and subcomponents compose the design.
+
+
+**Figure 1**
+
+
+Figure 1 is a design using PatternFly's card component. To learn more, read the documentation for a card's React implementation and the HTML structure.
+In PatternFly, subcomponents compose the various regions of a card so its structure is flexible enough to accommodate a range of designs. For example, a card can contain 1 or more of its various subcomponents such as `CardHeader`, `CardHeaderMain`, `CardActions`, or `CardTitle`.
+In this exercise, create a card to match the design in figure 1 with an image, close action, header, body, and footer.
+
+**Figure 2**
+
+
+
+The design in Figure 1 can be broken down into the card’s various subcomponents, as demonstrated in Figure 2. The React components used to construct this card can be arranged, as demonstrated in the card structure code snippet below. You can also view and modify this code in the provided CodeSandbox.
+
+
+
+
+
+**Card structure**
+
+
+{`
+
+
+
+
+
+
+\n`}
+
+
+
+
+
+## Step 2. Build out the `CardHeader`
+The `CardHeader` contains `CardHeaderMain` and `CardActions`.
+
+### Step 2.1
+Add a `brand` component to the `CardHeaderMain` component to place a product logotype on a screen. All that is needed is the source image or SVG and alt text. Here the PatternFly logo is used.
+
+
+{``}
+
+
+### Step 2.2
+Add a close button to the `CardActions` component. Buttons communicate and trigger actions a user can take in an application or website. They come in several variants, such as `primary`, `secondary`, `tertiary`, `danger`, `plain`, `link`, and `control`.
+Add a button using the `plain` variant.
+
+
+{`Button variant="plain"> `}
+
+
+### Step 2.3
+Add an icon inside the button. PatternFly React provides a variety of icons. They're easy to use and compile into SVG files. Use them inside buttons and other components.
+Add a `TimesIcon` so that the card can be closed.
+
+
+{``}
+
+
+
+
+## Step 3. Build out the `CardTitle`
+
+### Step 3.1
+Add the text component with a variant inside of the ``. The text component can wrap any static HTML content that is placed on the page to provide correct formatting when using standard HTML tags. The text component comes in several variations, such as `h1`, `p`, `a`, `small`, `blockquote`, and `pre`.
+Use the ‘p’ variation, which is specified with `component={TextVariants.p}`.
+Add the following code inside the `CardTitle` component:
+
+
+{`
+PatternFly\n`}
+
+
+### Step 3.2
+Add a subhead below the text added in Step 3.1. `TextContent` is used to wrap `Text` components and provides text with extra spacing and styling.
+Add the following code inside of the Text component that is inside of the `CardTitle`:
+
+
+{`
+
+ Provided by Red Hat
+\n`}
+
+
+
+
+## Step 4. Add content to the `CardBody` component
+Any filler text can be added as a child of the `CardBody` component.
+
+
+
+## Step 5. Add content and a layout to the `CardFooter`
+
+### Step 5.1
+Add a split layout to the `CardFooter` component.
+
+PatternFly offers several layout options, including grid, bullseye, and split layouts.
+Use a split layout to separate a pair of buttons in the footer of the card. The split layout is designed to position items horizontally. Add a `` component inside `` for each item in the layout.
+
+
+{`
+
+
+
+\n`}
+
+
+### Step 5.2
+Add a button to the first `SplitItem` component. Use the link variant of the button and add an `isInline` property so that the buttons are inline rather than block elements.
+
+
+{``}
+
+
+### Step 5.3
+Add a button to the second `SplitItem` component. Use the same variant and properties as Step 5.2.
+
+
+{``}
+
+
+### Step 5.4
+Add a `hasGutter` property to the `Split` component to add more spacing between the buttons. The `Split` component should look like this with the `hasGutter` property set.
+
+
+{``}
+
+
+
+
+## Compare your results
+
+A fully constructed card can be viewed and modified in the CodeSandbox solution. Compare your work with the solution.
+
+
+
+
\ No newline at end of file
diff --git a/packages/v4/patternfly-docs/content/training/trainingCard/trainingCard.js b/packages/v4/patternfly-docs/content/training/trainingCard/trainingCard.js
index 62b4ad01c0..8074a3beb1 100644
--- a/packages/v4/patternfly-docs/content/training/trainingCard/trainingCard.js
+++ b/packages/v4/patternfly-docs/content/training/trainingCard/trainingCard.js
@@ -32,7 +32,7 @@ export const TrainingCard = ({
time,
description,
subsection,
- katacodaId = null,
+ name = null,
designUrl = null
}) => (
@@ -56,8 +56,8 @@ export const TrainingCard = ({
{description}
- {katacodaId && (
-
+ {name && (
+
+
+
+
+
+Figure 1 is a design using PatternFly's card component. To learn more, read the documentation for a card's React implementation and the HTML structure.
+In PatternFly, subcomponents compose the various regions of a card so its structure is flexible enough to accommodate a range of designs. For example, a card can contain 1 or more of its various subcomponents such as `CardHeader`, `CardHeaderMain`, `CardActions`, or `CardTitle`.
+In this exercise, create a card to match the design in figure 1 with an image, close action, header, body, and footer.
+
+**Figure 2**
+
+
+
+The design in Figure 1 can be broken down into the card’s various subcomponents, as demonstrated in Figure 2. The React components used to construct this card can be arranged, as demonstrated in the card structure code snippet below. You can also view and modify this code in the provided CodeSandbox.
+
+
+
+