Breadcrumb

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

<rh-breadcrumb>
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Red Hat OpenShift on AWS</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Introduction to ROSA</a></li>
    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
  </ol>
</rh-breadcrumb>

<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

.subtle-heading {
  margin-block-start: var(--rh-space-6xl, 96px);
}

<rh-context-demo>
  <rh-breadcrumb>
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Red Hat OpenShift on AWS</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">Introduction to ROSA</a></li>
      <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
    </ol>
  </rh-breadcrumb>

  <h2 class="subtle-heading">Subtle:</h2>

  <rh-breadcrumb variant="subtle">
    <ol>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Red Hat OpenShift on AWS</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">Introduction to ROSA</a></li>
      <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
    </ol>
  </rh-breadcrumb>
</rh-context-demo>

<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

<rh-breadcrumb accessible-label="Breadcrumb Navigation">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Red Hat OpenShift on AWS</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Introduction to ROSA</a></li>
    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
  </ol>
</rh-breadcrumb>

<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

.subtle-heading {
  margin-block-start: var(--rh-space-6xl, 96px);
}

<rh-breadcrumb>
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Red Hat OpenShift on AWS</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Introduction to ROSA</a></li>
    <li>Chapter 1. Understanding ROSA</li>
  </ol>
</rh-breadcrumb>

<h2 class="subtle-heading">Subtle:</h2>

<rh-breadcrumb variant="subtle">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Red Hat OpenShift on AWS</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Introduction to ROSA</a></li>
    <li>Chapter 1. Understanding ROSA</li>
  </ol>
</rh-breadcrumb>

<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">

import '@rhds/elements/rh-breadcrumb/rh-breadcrumb.js';

<rh-breadcrumb variant="subtle">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Red Hat OpenShift on AWS</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Introduction to ROSA</a></li>
    <li><a href="#" aria-current="page">Chapter 1. Understanding ROSA</a></li>
  </ol>
</rh-breadcrumb>

<link rel="stylesheet" href="../rh-breadcrumb-lightdom.css">