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

@@ -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.
 

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>

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>