Add code to the workspace
Before we get started, let's add some code to the workspace that we can modify.
1) Copy code into the index.html file.
Click the Copy to Editor button below to add html for a card to the index.html
file.
<div class="pf-c-card pf-m-hoverable"> <div class="pf-c-card__head"> <img class="pf-c-brand" src="https://pf4.patternfly.org/assets/images/pf-logo-small.svg" alt="PatternFly Logo"> <div class="pf-c-card__actions"> <button class="pf-c-button pf-m-plain"> <i class="fas fa-times"></i> </button> </div> </div> <div class="pf-c-card__header pf-c-title pf-m-md"> <p>PatternFly</p> <div class="pf-c-content"> <small>Provided by Red Hat</small> </div> </div> <div class="pf-c-card__body"> PatternFly is an open source design system created to enable consistency and usability across a wide range of applications and use cases. PatternFly provides clear standards, guidance, and tools that help designers and developers work together more efficiently and build better user experiences. </div> <div class="pf-c-card__footer pf-l-flex"> <button class="pf-c-button pf-m-inline pf-m-link"> Link to PatternFly </button> <button class="pf-c-button pf-m-inline pf-m-link"> Link to home </button> </div> </div>
2) Set up your new styles file for overriding styles in the card component. There are two blocks in this file: :root
targets styles across the entire application and .pf-c-card
targets styles specifically in the card component.
Click the Copy to Editor button below to add code for the card component to the myapp.scss file.
:root { // Add global variables here } .pf-c-card { // Add Card component variables here }
When the server reloads, you should see something like this: