Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="dark centered component rich-text pf-c-content">
  <div class="pf-l-grid pf-m-gutter">
    <div class="pf-l-grid__item">
      <div class="rich-text-content">
        <h2 class="pf-c-title"> Thank you for downloading from Red Hat Developer
        </h2>
        <p>Your download should start automatically. If you experience any problems with the download, please <a href="https://docs.google.com/forms/d/e/1FAIpQLSdQNnUB6XBEB0brumzDCDKJ6846WOIELxcoYRq0Tr8OA4ZS9w/viewform">let us know</a>.</p>
      </div>
    </div>
  </div>
</div>

<div style="display: flex; flex-grow: 1;">
  <div class="additional-downloads" style="display: flex; flex-direction: column; flex-shrink: 1; overflow: none; padding-top: 8px;">
    <div class="rhd-c-card-grid pf-c-content">
      <div class="component-limit-width">
        <div class="pf-l-flex">
          <a class="pf-c-title pf-m-2xl pf-m-link" href="https://developers.redhat.com/ebooks" alt="Link to ebooks page">Ebooks</a>
        </div>
        <div class="rhd-c-card-grid__wrapper" style="overflow-x: auto; white-space: nowrap; max-width: 1140px; display: inline-flex;">
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-book"></i>
              Ebook
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Kubernetes Operators eBook</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">
                  Jason Dobies and Joshua Wood
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cover-image/2020-04/Screen%20Shot%202020-04-22%20at%201.26.29%20PM.png?itok=st1p5Hi9" alt="Kubernetes Operators" width="366" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="/books/kubernetes-operators/old" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-book"></i>
              Ebook
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Knative Cookbook</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Burr Sutter &amp; Kamesh Sampath
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cover-image/2020-04/knative-cookbook.png?itok=lhRWnDGK" alt="Knative Cookbook cover" typeof="foaf:Image" width="365" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="/books/knative-cookbook/old" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div role="article" class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-book"></i>
              Ebook
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Practising Quarkus</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Antonio Goncalves
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cover-image/2020-11/RHD_Practising_Quarkus_cover.png?itok=na6QyY_r" alt="RHD Practising Quarkus cover" typeof="foaf:Image" width="319" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="/books/practising-quarkus" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-book"></i>
              Ebook
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image">Understanding Quarkus</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Antonio Goncalves
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cover-image/2020-11/RHD_Understanding_Quarkus_cover.png?itok=fa805lIb" alt="RHD Understanding Quarkus cover" typeof="foaf:Image" width="319" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="/books/understanding-quarkus" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Cheat Sheets -->
    <div class="rhd-c-card-grid pf-c-content" style="margin-top: 24px;">
      <div class="component-limit-width">
        <div class="pf-l-flex">
          <a class="pf-c-title pf-m-2xl pf-m-link" href="https://developers.redhat.com/cheatsheets" alt="Link to cheat sheets page">Cheat sheets</a>
        </div>
        <div class="rhd-c-card-grid__wrapper" style="overflow-x: auto; white-space: nowrap; max-width: 1140px; display: inline-flex;">
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-file-code"></i>
              Cheat Sheet
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Debezium on OpenShift Cheat Sheet</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Abdellatif BOUCHAMA
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/RHD_Debezium_CheatSheetCover_0.png?itok=fxw9zmV8" alt="Debezium OpenShift Cheat Sheet cover" width="366" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/cheat-sheets/debezium-openshift-cheat-sheet" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-file-code"></i>
              Cheat Sheet
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Linux Commands Cheat Sheet</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Burr Sutter
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cheat-sheet-cover-linux-commands.png?itok=yoY8vHlr" alt="Linux Commands Cheat Sheet cover" typeof="foaf:Image" width="365" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/cheat-sheets/linux-commands-cheat-sheet/old" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-file-code"></i>
              Cheat Sheet
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Red Hat OpenShift Container Platform Cheat Sheet</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Ben Pritchett
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cheat-sheet-cover-openshift.png?itok=CYbdCYMJ" alt="Red Hat OpenShift Container Platform Cheat Sheet cover" typeof="foaf:Image" width="319" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/cheat-sheets/red-hat-openshift-container-platform/old" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-file-code"></i>
              Cheat Sheet
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">.NET Core 2.0 on Red Hat Enterprise Linux Cheat Sheet</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Don Schenck
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/cheat-sheet-cover-dot-net-core.png?itok=HU0cNURq" alt=".Net Core 2.0 on RHEL Cheat Sheet cover" typeof="foaf:Image" width="319" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/cheat-sheets/net-core-red-hat-enterprise-linux/old" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-file-code"></i>
              Cheat Sheet
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image">Advanced Linux Commands Cheat Sheet</h3>
              <div class="rhd-c-card__footer">
                <div class="rhd-c-card__footer--author">Maxim Burgerhout
                </div>
              </div>
              <picture>
                <img class="rhd-c-card__image-body image-style-large" src="https://developers.redhat.com/sites/default/files/styles/large/public/advandced-linux-commands-cheat-sheet-cover.png?itok=0fq1i6YV" alt="Advanced Linux Commands Cheat Sheet cover" typeof="foaf:Image" width="319" height="480">
              </picture>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/cheat-sheets/advanced-linux-commands/old" class="rhd-m-link">
                  Download <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Interactive tutorials -->
    <div class="rhd-c-card-grid pf-c-content" style="margin-top: 24px;">
      <div class="component-limit-width">
        <div class="pf-l-flex">
          <a class="pf-c-title pf-m-2xl pf-m-link" href="https://developers.redhat.com/courses">Interactive tutorials</a>
        </div>
        <div class="rhd-c-card-grid__wrapper" style="overflow-x: auto; white-space: nowrap; max-width: 1140px; display: inline-flex;">
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-terminal"></i> Course
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Get started with Red Hat Enterprise Linux</h3>
              <div class="rhd-c-card__subtitle">4 lessons | 35 minutes</div>
              <p class="rhd-c-card__body" style="white-space: normal;">Learn the basics of Red Hat Enterprise Linux, and how to leverage it with tools like podman, buildah, and SQL.</p>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/courses/red-hat-enterprise-linux" class="rhd-m-link" alt="Start the Red Hat Enterprise Linux interactive tutorial">
                  Start <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-terminal"></i> Course
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Foundations of OpenShift</h3>
              <div class="rhd-c-card__subtitle">11 lessons | 195 minutes</div>
              <p class="rhd-c-card__body" style="white-space: normal;">Learn about the fundamentals of using OpenShift and the various methods and tools to use to build and deploy applications.</p>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/courses/foundations" class="rhd-m-link" alt="Start the foundations of OpenShift interactive tutorial">
                  Start <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-terminal"></i> Course
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Exploring of OpenShift</h3>
              <div class="rhd-c-card__subtitle">3 lessons | 180 minutes</div>
              <p class="rhd-c-card__body" style="white-space: normal;">Poke around the OpenShift web console or command line interfaces at your own speed in a freeform sandbox environment.</p>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/courses/explore-openshift" class="rhd-m-link" alt="Start the exploring OpenShift interactive tutorial">
                  Start <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-terminal"></i> Course
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Understanding subsystems</h3>
              <div class="rhd-c-card__subtitle">7 lessons | 200 minutes</div>
              <p class="rhd-c-card__body" style="white-space: normal;">Get up to speed with the underlying structures that make up a container architecture. You'll strengthen your understanding of container building, tagging, organization and orchestration, as well as get a high level overview of OCI compliant tools.</p>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/courses/subsystems" class="rhd-m-link" alt="Start the understanding subsystems interactive tutorial">
                  Start <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="pf-c-card rhd-c-card" style="margin-right: 14px; min-width: 280px; width: 280px;">
            <div class="rhd-c-card__tag">
              <i class="fas fa-terminal"></i> Course
            </div>
            <div class="rhd-c-card-content">
              <h3 class="rhd-c-card__title rhd-m-card-title__no-image" style="white-space: normal;">Developing with PatternFly React</h3>
              <div class="rhd-c-card__subtitle">14 lessons | 214 minutes</div>
              <p class="rhd-c-card__body" style="white-space: normal;">Learn how to implement a variety of the most common components in the PatternFly react component library.</p>
              <div class="rhd-c-card__footer">
                <a href="https://developers.redhat.com/courses/patternfly-react" class="rhd-m-link" alt="Start the developing with PatternFly React interactive tutorial">
                  Start <i class="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Slideout Menu -->
  <div class="slideout-menu" style="
  padding: 8px 24px 24px 24px;
  background-color: #fafafa;
  box-shadow: 0 10px 8px 5px #d7d7d7;
  position: relative;
  order: 1;
  max-height: none;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: auto;
  width: 300px;
  height: 1550px;
  overflow-y: overlay">
    <div class="upcoming-events" style="display: contents;">
      <h3>Upcoming events</h3>
      <div class="pf-c-card rhd-c-card" style="background-color: #fff; height: auto;">
        <img src="https://developers.redhat.com/sites/default/files/styles/static_item/public/devnation%20holiday%20hiatus.png?itok=AlGgydRY" class="rhd-c-card__image">
        <div class="rhd-c-card__tag">
          <i class="fas fa-calendar" aria-hidden="true"></i> Event
        </div>
        <div class="rhd-c-card-content">
          <h3 class="rhd-c-card__title">
            <a href="https://developers.redhat.com/devnation" class="rhd-m-link">DevNation Holiday Hiatus</a>
          </h3>
          <div class="rhd-c-card__subtitle">16 December 2020</div>
        </div>
      </div>
    </div>
    <a href="https://developers.redhat.com/events" class="pf-c-button pf-m-secondary" style="align-self: flex-start; margin-top: 24px; margin-bottom: 32px;">View all events</a>
    <div class="rhd-c-dynamic-content-list-compact" style="padding: 0; margin: 0; display: contents;">
      <h3>Recent posts</h3>
      <div class="pf-c-card rhd-c-card__list" style="background-color: #fafafa; height: 75px;">
        <div class="rhd-c-card-content">
          <h3 class="rhd-c-card__title" style="margin-bottom: 0 !important;">
            <a href="https://developers.redhat.com/blog/2020/11/03/argo-cd-and-tekton-match-made-in-kubernetes-heaven/" class="rhd-m-link">Argo CD and Tekton: Match made in Kubernetes heaven</a>
          </h3>
        </div>
      </div>
      <div class="pf-c-card rhd-c-card__list" style="background-color: #fafafa; height: 75px;">
        <div class="rhd-c-card-content">
          <h3 class="rhd-c-card__title" style="margin-bottom: 0 !important;">
            <a href="https://developers.redhat.com/blog/2020/10/30/whats-new-in-fabric8-kubernetes-java-client-4-12-0/" class="rhd-m-link">What's new in Fabric8 Kubernetes Java client 4.12.0</a>
          </h3>
        </div>
      </div>
      <a href="https://developers.redhat.com/blog/" class="pf-c-button pf-m-secondary" style="align-self: flex-start; margin-bottom: 32px;">View all articles</a>
    </div>
  </div>
</div>
              
            
!

CSS

              
                .wrapper {
  max-width: 1400px;
}
.slideout-menu {
  // position: absolute;
  // right: 0;
  // top: 0;
  // max-width: 375px;
  // z-index: 1000;
  // margin-top: 32px;
  // padding: 24px 48px 72px 24px;
  // background-color: #fafafa;
  // box-shadow: 0 10px 8px 5px #d7d7d7;
  // .pf-c-card.rhd-c-card {
  //   background-color: #fff;
  //   margin-bottom: 24px;
  // }
  // .pf-c-card.rhd-c-card__list {
  //   background-color: #fafafa;
  // }
}
.component {
  margin: 0;
}
.pf-c-button.pf-m-secondary {
  // background-color: transparent;
}

              
            
!

JS

              
                // Ebook images are from Red Hat Developers
// developers.redhat.com

// Event images are from Unsplash
// https://unsplash.com/photos/Tjbk79TARiE
// https://unsplash.com/photos/5Xwaj9gaR0g
// https://unsplash.com/photos/uf2nnANWa8Q

              
            
!
999px

Console