docs(card): explain element vs pattern

docs/_includes/layouts/pages/pattern.njk

@@ -0,0 +1,46 @@
+---
+layout: layouts/base.njk
+importElements:
+  - rh-cta
+  - rh-footer
+  - rh-alert
+  - rh-subnav
+  - rh-code-block
+---
+{% if hasToc %}
+  <link rel="stylesheet" href="{{ '/assets/javascript/elements/uxdot-toc-lightdom.css' | url }}">
+{% endif %}
+<link rel="stylesheet" href="{{ '/styles/pages/backpage.css' | url }}">
+
+<script type="module" src="{{ '/assets/javascript/elements/uxdot-feedback.js' | url }}"></script>
+<script type="module" src="{{ '/assets/javascript/elements/uxdot-pattern.js' | url }}"></script>
+{% if hasToc %}
+<script type="module" src="{{ '/assets/javascript/elements/uxdot-toc.js' | url }}"></script>
+{% endif %}
+{% if tokenSearch %}
+<script type="module" src="{{ '/assets/javascript/elements/uxdot-search.js' | url }}"></script>
+<script type="module" src="{{ '/assets/javascript/tokens.js' | url }}"></script>
+{% endif %}
+{% include 'partials/component/masthead.njk' %}
+{% include 'partials/component/sidenav.njk' %}
+
+<main id="main">
+  <article {% if hasToc and (content | toc).length > 0 %}class="has-toc"{% endif %}>
+
+  {% include 'partials/component/header.njk' %}
+  {% if hasToc and (content | toc).length > 0 %}
+    <aside>
+      <uxdot-toc summary="On this page">
+        {{ content | toc | safe }}
+      </uxdot-toc>
+    </aside>
+  {% endif %}
+
+  <div class="container">
+    {{ content | safe }}
+  </div>
+
+  </article>
+  {% include "partials/component/back-to-top.njk" %}
+</main>
+{% include 'partials/component/footer.njk' %}

docs/_includes/partials/component/feedback.html

@@ -10,6 +10,6 @@ <h2>Related elements or patterns</h2>
     </ul>
   {% else %}
     <h2>Other libraries</h2>
-    <p>To learn more about our other libraries, visit <a href="/get-started/">this page</a>.</p>
+    <p>To learn more about our other libraries, visit the <a href="/get-started/">getting started page</a>.</p>
   {% endif %}
 </uxdot-feedback>

docs/assets/javascript/elements/uxdot-pattern.js

@@ -0,0 +1,164 @@
+import { LitElement, css, html } from 'lit';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+
+import '@rhds/elements/rh-surface/rh-surface.js';
+import '@rhds/elements/rh-code-block/rh-code-block.js';
+import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+
+class UxdotPattern extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      container-name: host;
+      container-type: inline-size;
+      margin-block-end: var(--rh-space-2xl, 32px);
+    }
+
+    #container {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-areas: "controls" "example" "code";
+      column-gap: var(--rh-space-4xl, 64px);
+      row-gap: var(--rh-space-2xl, 32px);
+      padding: var(--rh-space-2xl, 32px);
+      border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
+      border-radius: var(--rh-border-radius-default, 3px);
+    }
+
+    #container.dark {
+      background-color: var(--_context-background-color);
+      color: var(--_context-text);
+      border-color: var(--rh-color-border-subtle-on-dark, #707070);
+    }
+
+    #container h3,
+    #container ::slotted(h2),
+    #container ::slotted(h3),
+    #container ::slotted(h4),
+    #container ::slotted(h5),
+    #container ::slotted(h6) {
+      margin-block-start: 0 !important;
+      margin-block-end: var(--rh-space-lg, 16px) !important;
+      font-size: var(--rh-font-size-body-text-lg, 1.125rem) !important;
+    }
+
+    #color-picker {
+      grid-area: controls;
+      justify-self: flex-end;
+      display: flex;
+      align-items: center;
+      gap: var(--rh-space-lg, 16px);
+    }
+
+    #example {
+      grid-area: example;
+    }
+
+    #example ::slotted(*) {
+      display: block;
+      max-width: 360px;
+    }
+
+    :host([stacked]) #example ::slotted(*) {
+      max-width: 100%;
+    }
+
+    #code {
+      grid-area: code;
+      display: flex;
+      flex-direction: column;
+      gap: var(--rh-space-lg, 16px);
+    }
+
+    :host([no-colorpicker]) #container {
+      grid-template-areas: "example" "code";
+    }
+
+    :host([no-colorpicker]) #color-picker {
+      display: none !important;
+    }
+
+    @container host (min-width: 992px) {
+      #container {
+        grid-template-columns: max-content 1fr;
+        grid-template-areas: "controls controls"
+                             "example code";
+      }
+
+      :host([no-colorpicker]) #container {
+        grid-template-areas: "example code";
+      }
+
+      :host([stacked]) #container {
+        grid-template-columns: 1fr;
+        grid-template-areas: "controls" "example" "code";
+      }
+
+      :host([stacked][no-colorpicker]) #container {
+        grid-template-areas: "example" "code";
+      }
+    }
+  `;
+
+  static properties = {
+    colorPalette: { type: String, reflect: true, attribute: 'color-palette' },
+    target: { type: String, reflect: true },
+    noColorPicker: { type: Boolean, reflect: true, attribute: 'no-colorpicker' },
+    stacked: { type: Boolean, reflect: true },
+    allow: { type: String, reflect: true },
+  };
+
+  #slots;
+
+  constructor() {
+    super();
+    this.colorPalette = 'lightest';
+    this.target = 'container';
+    this.noColorPicker = false;
+    this.stacked = false;
+    this.#slots = new SlotController(this, 'html', 'css', 'js');
+  }
+
+  render() {
+    const hasHtml = this.#slots.hasSlotted('html');
+    const hasCss = this.#slots.hasSlotted('css');
+    const hasJs = this.#slots.hasSlotted('js');
+    const allowed = this.allow ?? `lightest, lighter, light, dark, darker, darkest`;
+    return html`
+      <rh-surface id="container" part="container" @change="${this.#onMutation}">
+        <label id="color-picker">
+          Color palette
+          <rh-context-picker target="${this.target}" value="${this.colorPalette}" allow="${allowed}"></rh-context-picker>
+        </label>
+        <div id="example">
+          <slot name="heading"><h3>Example</h3></slot>
+          <slot></slot>
+        </div>
+        <div id="code">
+          ${hasHtml ? html`
+          <div id="html">
+            <slot name="html-heading"><h3>HTML</h3></slot>
+            <slot name="html"></slot>
+          </div>` : ``}
+          ${hasCss ? html`
+          <div id="css">
+            <slot name="css-heading"><h3>CSS</h3></slot>
+            <slot name="css"></slot>
+          </div>` : ``}
+          ${hasJs ? html`
+          <div id="js">
+            <slot name="js-heading"><h3>JS</h3></slot>
+            <slot name="js"></slot>
+          </div>` : ``}
+        </div>
+      </rh-surface>
+    `;
+  }
+
+  #onMutation(changed) {
+    this.colorPalette = changed.colorPalette;
+    this.requestUpdate();
+  }
+}
+
+customElements.define('uxdot-pattern', UxdotPattern);

docs/patterns/card/examples.md

@@ -0,0 +1,138 @@
+---
+title: Examples
+heading: Card
+sidenavTitle: Card
+layout: layouts/pages/pattern.njk
+hasToc: true
+order: 20
+tags:
+  - cardPatterns
+subnav:
+  collection: cardPatterns
+  order: 3
+importElements:
+  - rh-card
+  - rh-cta
+  - rh-surface
+  - rh-avatar
+  - rh-accordion
+  - rh-blockquote
+---
+
+<script type="module">
+  import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+</script>
+
+<link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css' | url }}">
+<link rel="stylesheet" href="{{ '/styles/samp.css' | url }}">
+
+<style>
+  rh-card {
+    display: block;
+    max-width: 360px;
+  }
+
+  [color-palette^="light"] :is(a):link {
+    color: var(--rh-color-interactive-blue-darker, #0066cc);
+  }
+
+  [color-palette^="light"] :is(a):hover {
+    color: var(--rh-color-interactive-blue-darkest, #003366);
+  }
+
+  [color-palette^="dark"] :is(a):link {
+    color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  }
+
+  [color-palette^="dark"] :is(a):hover {
+    color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  }
+</style>
+
+
+## Asset cards
+Use to display that an asset can be downloaded. An icon and label group or 
+text may be used to describe the asset.
+
+{% include './patterns/asset.html' %}
+
+
+## Avatars card
+
+Use to highlight a group of people who engage in an event. A label
+should be included, but including text is optional.
+
+Use the [`<rh-avatar>`](/elements/avatar/) element to element to present
+the list of users.
+
+{% include './patterns/avatars.html' %}
+
+
+## Fast facts card
+Use to display quick facts or short data points under a label. A Secondary 
+call to action may be used or not.
+
+{% include './patterns/fast-facts.html' %}
+
+
+## Icon card
+
+Use to add an icon to the basic style above the text. Secondary and Default 
+calls to action may be used.
+
+{% include './patterns/icon.html' %}
+
+## Image card
+
+Use to add an image to the basic style above the text.
+Secondary and Default calls to action may be used.
+
+{% include './patterns/image.html' %}
+
+
+## List cards
+Use to display a short amount of content using various list styles. 
+Secondary and Default calls to action may be used.
+
+
+{% include './patterns/list.html' %}
+
+
+## Logo cards
+Use to display a customer logo in a variety of arrangements. A call to 
+action is required, otherwise use a logo wall.
+
+{% include './patterns/logos.html' %}
+
+
+## Title bar card
+
+Use to add a small icon and a label group to the header section. A larger icon
+or a logo may be used.
+
+Alternative title bar styles can be achieved by selecting [card's `header` CSS
+Shadow Part](/elements/card/code/#parts).
+
+{% include './patterns/title-bar.html' %}
+
+
+## Quote cards
+
+Use to display a short quote with attribution text. Logos, images, and a 
+Secondary call to action may be used or not.
+
+{% include './patterns/quote.html' %}
+
+
+<!-- ## Video cards
+
+Use to trigger a video that will play in a [Modal dialog](/elements/dialog).
+Different layout configurations may be used.
+
+{% include './patterns/video.html' %} -->
+
+
+{% include 'partials/component/feedback.html' %}
+
+[element]: /elements/card
+[css-props]: /elements/card/code/#css-custom-properties