feat(card): promo variant

.changeset/fair-buttons-punch.md

@@ -0,0 +1,24 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-card>`: ✨ Added Inline Promo variant
+
+The Inline Promo card variant allows users to easily display text and optionally an image side by side. 
+
+```html
+<rh-card variant="inline-promo">
+  <svg slot="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 190">
+    <title>A placeholder image in rh-card in the "image" slot</title>
+    <rect x="0" y="0" width="320" height="190" fill="#e7f0f9"/>
+    <line x1="0" y1="0" x2="320" y2="190" stroke="#d6e7f5"/>
+    <line x1="320" y1="0" x2="0" y2="190" stroke="#d6e7f5"/>
+  </svg>
+
+  <h2>Featured: left aligned with image</h2>
+  <p>This is the default Inline Promo card. If you want, you can customize the shadow DOM by using the <code>::part</code> selector. Using this technique, you can have padding on any side, or none at all.</p>
+  <rh-cta>
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+```

elements/rh-card/demo/asset-pattern.html

@@ -0,0 +1,108 @@
+<section id="card-pattern-asset">
+  <rh-card>
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <pf-icon icon="info-circle"
+        size="md"
+        slot="header"></pf-icon>
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+  </rh-card>
+
+  <rh-card>
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="footer-asset">
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+    <svg class="sample" slot="footer" width="296" height="171"><rect/></svg>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <pf-icon icon="info-circle"
+        size="md"
+        slot="header"></pf-icon>
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter" class="footer-asset">
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+    <svg class="sample" slot="footer" width="296" height="171"><rect/></svg>
+  </rh-card>
+</section>
+
+<style>
+  svg.sample {
+    border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);
+    & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
+  }
+  #card-pattern-asset {
+    display: grid;
+    gap: var(--rh-space-md, 16px);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    & rh-card {
+      height: 100%;
+      & h2 { flex: 1 1 auto; }
+      & img { width: 100%; }
+      &::part(container) { height: 100%; }
+      &::part(header) {
+        display: flex;
+        align-items: center;
+        flex-flow: row;
+        font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+        font-size: var(--rh-font-size-body-text-md, 1rem);
+        font-weight: var(--rh-font-weight-heading-regular, 400);
+        text-transform: uppercase;
+      }
+      &::part(image) {
+        padding: var(--rh-space-2xl, 32px);
+        padding-block-end: 0;
+        background-color: var(--rh-color-surface-lighter, #f2f2f2);
+      }
+      &::part(body) {
+        margin-block-start: 0;
+        padding-block-start: var(--rh-space-lg, 16px);
+      }
+      &.footer-asset::part(footer) {
+        margin: 0;
+        margin-block-start: auto;
+        padding: var(--rh-space-2xl, 32px);
+        padding-block-end: 0;
+        background-color: var(--rh-color-surface-lighter, #f2f2f2);
+      }
+      &[color-palette="lighter"] {
+        &::part(image) {
+          background-color: var(--rh-color-surface-light, #e0e0e0);
+        }
+        &.footer-asset::part(footer) {
+          background-color: var(--rh-color-surface-light, #e0e0e0);
+        }
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>

elements/rh-card/demo/icon-pattern.html

@@ -0,0 +1,121 @@
+<section id="card-pattern-icon">
+  <rh-card>
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</section>
+
+<style>
+  svg.sample {
+    border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);
+    & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
+  }
+  #card-pattern-icon {
+    display: grid;
+    gap: var(--rh-space-md, 16px);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    & rh-card {
+      height: 100%;
+      &::part(container) {
+        height: 100%;
+      }
+      &::part(header) {
+        flex-flow: column;
+        gap: var(--rh-space-2xl, 32px);
+      }
+      &::part(body) {
+        margin-block-start: var(--rh-space-lg, 16px);
+      }
+      & > p {
+        margin-block: 0;
+      }
+      & h2 {
+        font-size: var(--rh-font-size-code-2xl, 1.5rem);
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>

elements/rh-card/demo/image-pattern.html

@@ -0,0 +1,110 @@
+<section id="card-pattern-image">
+  <rh-card>
+    <svg class="sample" slot="image"><rect></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <svg class="sample" slot="image"><rect></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image"><rect></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image"><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="image"><rect></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="image"><rect></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="image"><rect></svg>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="image"><rect></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
+      libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
+      elit. Donec id elit non mi porta gravida at eget metus.</p>
+    <rh-cta slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</section>
+
+<style>
+  svg.sample {
+    border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);
+    width: 100%;
+    aspect-ratio: 296/171;
+    & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
+  }
+  #card-pattern-image {
+    display: grid;
+    gap: var(--rh-space-md, 16px);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    & rh-card {
+      height: 100%;
+      &::part(container) {
+        height: 100%;
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>