There is now a card on the page. Customize the styles applied to it.

1) Add a new color variable to use in the card.

Make the links in the card purple. In PatternFly, all of the CSS values used are first assigned to variables. It is recommended doing the same when making customizations in the application.

In myapp.scss inside of the :root{} block, make a new variable name called --my-app-card-theme--Color, and assign it to be purple: #6200EE.

Hint:

--my-app-card-theme--Color: #6200EE;

2) Override the global link color.

In the current example of the card, the buttons in the card footer use the global link color. Reassign the global link color variable to use the new custom color variable. This way, all properties that use the global link color variable in the card will now use this color.

Inside of the .pf-c-card block of myapp.scss, set the global variable --pf-global--link--Color to use the value defined in the custom variable --my-app-card-theme--Color.

Hint:

--pf-global--link--Color: var(--my-app-card-theme--Color);

Note: Variable definitions declared for a component .pf-c-[component name] class selector are scoped to that component. So even though a new value is being assigned to the global variable, that value will only apply to the card component and not other components.

3) Change the font size of the title in the card header.

Not all changes require custom CSS. Many components include modifier classes that customize the component. For this update, use a modifier class for the title component.

4) Search for the title component and update the modifier class.

In index.html search for <div class="pf-c-card__header pf-c-title pf-m-md"> and replace pf-m-md with pf-m-xl.

Hint: <div class="pf-c-card__header pf-c-title pf-m-xl">

When the preview reloads, it should look like this:

Now practice extending PatternFly's system to create a new element in the card. Add the separator element to the card.

1) Add the html markup.

In the index.html file add the html markup for the separator element.

Prefix the variable name with my-app so that it can be easily distinguished from the PatternFly codebase.

The class name should look like this:

<div class="my-app-c-card__separator">
</div>

Place it in index.html twice so that both separators are siblings to the pf-c-card__body element. Add this new code between pf-c-card__header and pf-c-card__body and pf-c-card__body and pf-c-card__footer.

Note: There will be no visible changes at this step.

2) Add variables to style the separator element.

In the myapp.scss file, add new styles for my-app-c-card__separator.

a) Add a variable for height.

It should use PatternFly's global variable for small border width. Add it under the variable declarations inside the .pf-c-card block.

The declaration should look like this:

--my-app-c-card__separator--Height: var(--pf-global--BorderWidth--sm);

b) Add a variable for background color.

It should use PatternFly's global variable for border color. Add it under the variable declarations inside the .pf-c-card block.

The declaration should look like this:

--my-app-c-card__separator--BackgroundColor: var(--pf-global--BorderColor--100);

c) Add a variable for the margin.

It should use PatternFly's global variable for spacing. Add it under the variable declarations inside the .pf-c-card block.

The declaration should this:

--my-app-c-card__separator--Margin: var(--pf-global--spacer--lg);

3) Assign the variables for the separator element.

In order to assign the variables that were declared above, scope the variables to the class that was added in step 1.

a) Add a new block underneath .pf-c-card.

In myapp.scss add the following block. It should look like this:

.my-app-c-card__separator {
  // Add in variables here
}

b) Assign all of the variables that were added in steps 2a, 2b, and 2c.

Inside of the block created in step 3a, add the properties for background-color, height, margin-right, margin-bottom and margin-left.

.my-app-c-card__separator {
  background-color: var(--my-app-c-card__separator--BackgroundColor);
  height: var(--my-app-c-card__separator--Height);
  margin-right: var(--my-app-c-card__separator--Margin);
  margin-bottom: var(--my-app-c-card__separator--Margin);
  margin-left: var(--my-app-c-card__separator--Margin);
}