From 9b4ad74968bb4665fdd6406034cc3b350bbef4fe Mon Sep 17 00:00:00 2001
From: Mark Caron <markcaron@users.noreply.github.com>
Date: Fri, 1 Nov 2024 09:50:55 -0400
Subject: [PATCH] docs(cards): Add `<rh-card>` accented pattern (#2024)

* docs(card-patterns): added accented card

* docs(card-patterns): added accented card to tiles under guidelines
---
 docs/patterns/card/examples.md            |  7 +++++
 docs/patterns/card/patterns/accented.html | 31 +++++++++++++++++++++++
 elements/rh-card/docs/20-guidelines.md    |  7 +++++
 3 files changed, 45 insertions(+)
 create mode 100644 docs/patterns/card/patterns/accented.html

diff --git a/docs/patterns/card/examples.md b/docs/patterns/card/examples.md
index fef6d64e6e..852f085b99 100644
--- a/docs/patterns/card/examples.md
+++ b/docs/patterns/card/examples.md
@@ -24,7 +24,14 @@ subnav:
 <link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
 <link rel="stylesheet" data-helmet href="/styles/samp.css">
 
+## Accented cards
+
+Use to highlight a single card or set of cards in a group or row.
+
+<uxdot-pattern src="./patterns/accented.html"></uxdot-pattern>
+
 ## 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.
 
diff --git a/docs/patterns/card/patterns/accented.html b/docs/patterns/card/patterns/accented.html
new file mode 100644
index 0000000000..bea530a668
--- /dev/null
+++ b/docs/patterns/card/patterns/accented.html
@@ -0,0 +1,31 @@
+<rh-card class="example-accented-card">
+  <h2 slot="header">Card</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Nullam eleifend elit sed est egestas, a sollicitudin mauris
+     tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
+     felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
+  <rh-cta slot="footer" priority="primary">
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+
+<style>
+  .example-accented-card {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: 2;
+      display: block;
+      inset-block-start: 0;
+      inset-inline: 0;
+      width: calc(100% + var(--rh-border-width-sm));
+      border-block-start-color: var(--rh-color-brand-red);
+      border-block-start-width: var(--rh-border-width-lg);
+      border-block-start-style: solid;
+      border-start-start-radius: var(--rh-border-radius-default);
+      border-start-end-radius: var(--rh-border-radius-default);
+      pointer-events: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md
index c0a395159a..7092846704 100644
--- a/elements/rh-card/docs/20-guidelines.md
+++ b/elements/rh-card/docs/20-guidelines.md
@@ -26,6 +26,13 @@ There are several card patterns that can be used for a variety of use cases. To
 
 <nav class="grid xs-two-columns sm-three-columns" aria-label="card patterns">
 
+  <rh-tile>
+    <h4 slot="headline"><a href="/patterns/card/examples/#accented-cards">Accented</a></h4>
+    <p>
+      Use to highlight a single card or set of cards in a group or row.
+    </p>
+  </rh-tile>
+
   <rh-tile>
     <h4 slot="headline"><a href="/patterns/card/examples/#asset-cards">Asset</a></h4>
     <p>