Card

rh-card {
  & h2 {
    font-size: initial;
  }
}
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
```

<rh-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>
```

rh-context-demo::part(demo) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--rh-space-lg);
}

rh-card {
  &.full {
    &::part(header) { margin: 0; }
    & :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
      padding-inline: var(--rh-space-xl);
    }
    & img {
      display: block;
      min-width: 100%;
      height: auto;
    }
  }
  &.bar {
    --rh-card-header-background-on-light: var(--rh-color-surface-light);
    --rh-card-header-background-on-dark: var(--rh-color-surface-dark);
    &::part(header) {
      margin: 0;
      padding: var(--rh-space-lg) var(--rh-space-2xl);
      flex-direction: row;
      gap: var(--rh-space-lg);
      font-weight: var(--rh-font-weight-heading-regular);
      font-size: var(--rh-font-size-body-text-md);
      font-family: var(--rh-font-family-body-text);
    }
  }
}

label[for="picker"] {
  display: block;
}
```

import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
```

<rh-context-demo>
  <rh-card>
    <h2 slot="header">Default card, slotted content and footer</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card id="custom">
    <h2 slot="header">Slotted title, content, and footer</h2>
    <label for="picker">Change this card's color-palette</label>
    <rh-context-picker id="picker" target="custom" allow="darkest, lighter, lightest"></rh-context-picker>
    <rh-cta variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="full">
    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
      <title>A placeholder image in a card header slot</title>
      <rect x="0" y="0" width="320" height="120" fill="light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838))"></rect>
      <line x1="0" y1="0" x2="320" y2="120" stroke="var(--rh-color-border-subtle)"></line>
      <line x1="320" y1="0" x2="0" y2="120" stroke="var(--rh-color-border-subtle)"></line>
    </svg>
    <h2 slot="header">Card with slotted image header. Full width image.</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="bar">
    <h2 slot="header">Custom header</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="bar">
    <h2 slot="header">Custom header</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

</rh-context-demo>
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
```

#card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--rh-space-lg, 16px);
  max-width: 1058px;
}
```

<div id="card-grid">
  <rh-card>
    <h2 slot="header">Grid Card</h2>
    <p>In a grid, cards will fill all the available vertical space.</p>
    <rh-cta variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card>
    <h2 slot="header">Longer Content</h2>
    <p>
      In such a case, all of the grid card's footers should be
      vertically aligned. Meaning, they should always rest in
      the bottom of their card. Even when one card has much more
      content than its neighbour, and thus fill more vertical space
      in it's body, the footers should still be aligned.
    </p>
    <rh-cta variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card>
    <h2 slot="header">Grid Card</h2>
    <p>
      These kinds of situations should best be avoided. See the
      guidelines for more information.
    </p>
    <rh-cta variant="primary" slot="footer">
      <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
    </rh-cta>
  </rh-card>

  <rh-card>
    <p>This card has no header and short body content.</p>
    <rh-cta variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card>
    <h2 slot="header">No footer, More Content</h2>
    <p>
      In such a case, all of the grid card's footers should be
      vertically aligned. Meaning, they should always rest in
      the bottom of their card. Even when one card has much more
      content than its neighbour, and thus fill more vertical space
      in it's body, the footers should still be aligned.
    </p>
  </rh-card>

  <rh-card>
    <h2 slot="header">No body</h2>
    <rh-cta variant="primary" slot="footer">
      <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
    </rh-cta>
  </rh-card>
</div>
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
```

#full-width {
  background-color: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
  container: full-width / inline-size;
  display: grid;
  gap: var(--rh-space-lg, 16px);
  grid-auto-rows: max-content;
}

@container full-width (min-width: 768px) {
  .reverse::part(container) {
    grid-template-columns: 1fr 2fr;
  }
  .reverse::part(image) {
    justify-self: start;
    order: -10;
  }
}
```

<div id="full-width">
  <rh-card variant="promo" full-width="">
    <svg slot="image" role="img" aria-label="sample image" width="1920" height="158">
      <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect></svg>
    <h2 slot="header">Full Width Promo</h2>
    <p>Promos which span the entire viewport do not have a border.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <rh-card variant="promo" full-width="" color-palette="darkest">
    <svg slot="image" role="img" aria-label="sample image" width="1920" height="158">
      <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect></svg>
    <h2 slot="header">Full Width Promo Dark</h2>
    <p>Promos can have a dark color palette too. You can add the <code>color-palette</code> attribute or wrap them with <code>rh-surface</code>.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <rh-card variant="promo" full-width="" class="reverse">
    <svg slot="image" role="img" aria-label="sample image" width="1920" height="158">
      <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect></svg>
    <h2 slot="header">Full Width Promo - reverse</h2>
    <p>Using the <code>container</code> and <code>image</code> parts to reverse and style the Promo.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <rh-card variant="promo" full-width="">
    <h2 slot="header">Full Width Promo - No Image</h2>
    <p>This Promo is just like the last version, except this version doesn't have an
       image in the <code>image</code> slot. Without an image, this turns into a single column component.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>
</div>
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
```

#narrow {
  width: 296px;
  display: flex;
  flex-flow: column;
  gap: var(--rh-space-xl, 24px);
}
```

<section id="narrow">
  <rh-card variant="promo">
    <svg slot="image" role="img" aria-label="sample image" width="360" height="158">
      <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect></svg>
    <h2 slot="header">Narrow Promo</h2>
    <p>Promos narrower than 296px prioritize text by moving the image to the end.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <rh-card variant="promo">
    <h2 slot="header">Narrow Promo</h2>
    <p>A promo can optionally omit the image.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <rh-card variant="promo">
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
    <p>The ”standard“ Promo. It has a paragraph and a CTA in the ”image“ slot.</p>
  </rh-card>

  <rh-card variant="promo" color-palette="darkest">
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
    <p>A ”standard“ Promo with a <code>color-palette</code> attribute added to the <code>&lt;rh-card&gt;</code> tag.</p>
  </rh-card>
</section>
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
```

#standard {
  container-type: inline-size;
  container-name: standard;
  display: flex;
  flex-flow: column;
  gap: var(--rh-space-xl, 24px);
  margin: var(--rh-space-lg, 16px);
}

@container standard (min-width: 768px) {
  .reverse::part(footer) {
    order: -10;
  }
}
```

<section id="standard">
  <rh-card variant="promo" color-palette="lighter">
    <p>The ”standard“ Promo. It has a paragraph in the default slot and a CTA in the footer slot.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <rh-card variant="promo" color-palette="darker" class="reverse">
    <p>In this ”standard“ Promo, the slots can be reversed using a class and the <code>::part()</code> selector.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>
</section>
```

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
```

main {
  padding: var(--rh-space-lg, 16px);
}

rh-card[variant="promo"] {
  container-name: promo;
  container-type: inline-size;
  margin-block-end: var(--rh-space-3xl, 48px);
}

@container promo (min-width: 768px) {
  .reverse::part(container) {
    grid-template-columns: 1fr 2fr;
  }

  .reverse::part(image) {
    justify-self: start;
    order: -10;
  }
}
```

<rh-card variant="promo">
  <svg slot="image" width="1920" height="250" role="img" aria-label="sample image">
    <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
  </rect></svg>
  <h2 slot="header">Promo</h2>
  <p>Featured promo card has an image in the <code>image</code> slot,
    a heading in the <code>header</code> slot, and a <abbr title="call to action">CTA</abbr>
    in the <code>footer</code> slot, and body content.</p>
  <rh-cta slot="footer" href="#">Call to action</rh-cta>
</rh-card>

<rh-card variant="promo" class="reverse">
  <svg slot="image" width="1920" height="250" role="img" aria-label="sample image">
    <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
  </rect></svg>
  <h2 slot="header">Promo reversed</h2>
  <p>By selecting the <code>image</code>and <code>body</code> CSS Shadow Parts, you can reverse the <code>image</code> and <code>body</code> shadow parts and adjust column widths.</p>
  <rh-cta slot="footer" href="#">Call to action</rh-cta>
</rh-card>

<rh-card variant="promo">
  <h2 slot="header">Featured: no image is okay too</h2>
  <p>Sometimes, you may not have an image to go with your card. By omitting the slotted image,
    the promo reverts to a single column.</p>
  <rh-cta slot="footer" href="#">Call to action</rh-cta>
</rh-card>

<rh-card variant="promo" color-palette="dark">
  <svg slot="image" width="1920" height="250" role="img" aria-label="sample image">
    <rect fill="var(--rh-color-border-interactive)" fill-opacity="0.1" stroke="var(--rh-color-border-interactive)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
  </rect></svg>
  <h2 slot="header">Promo Dark</h2>
  <p>Promos can have a dark color palette too. You can add the <code>color-palette</code> attribute or wrap them with <code>rh-surface</code>.</p>
  <rh-cta slot="footer" href="#">Call to action</rh-cta>
</rh-card>
```

#card-pattern-sticky {
  display: grid;
  gap: var(--rh-space-md);
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  & rh-card {
    &::part(header) {
      gap: var(--rh-space-xl);
      flex-flow: column;
    }
    & .title {
      font-family: var(--rh-font-family-body-text);
      font-size: var(--rh-font-size-body-text-md);
    }
    & > p {
      margin-block: 0;
    }
  }
}
```

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-card/rh-card.js';
```

<section id="card-pattern-sticky">

  <rh-card>
    <rh-button slot="header" variant="close">Close</rh-button>
    <h2 slot="header" class="title">Title, lg</h2>
    <h2 slot="header">Heading, xs</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.
       Pellentesque vel dapibus risus.</p>
    <rh-cta slot="footer"><a href="#">Call to action</a></rh-cta>
  </rh-card>

  <rh-card color-palette="lighter">
    <rh-button slot="header" variant="close">Close</rh-button>
    <h2 slot="header" class="title">Title, lg</h2>
    <h2 slot="header">Heading, xs</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.
       Pellentesque vel dapibus risus.</p>
    <rh-cta slot="footer"><a href="#">Call to action</a></rh-cta>
  </rh-card>

</section>
```

svg.sample {
  border: 1px dashed var(--rh-color-border-interactive);
  & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
}
#card-pattern-title {
  display: grid;
  gap: var(--rh-space-md, 16px);
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  & rh-card,
  &::part(container) {
    height: 100%;
    &::part(header) {
      margin: 0;
      padding:
        var(--rh-space-lg, 16px)
        var(--rh-space-2xl, 32px);
      background-color: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
    }
    &::part(body) {
      display: flex;
      flex-flow: column;
    }
    & h2 {
      font-family: var(--rh-font-family-body-text);
      font-size: var(--rh-font-size-body-text-md);
      font-weight: var(--rh-font-weight-body-text-regular);
    }
    & svg {
      align-self: center;
      margin-block-end: var(--rh-space-2xl);
    }
  }
}
```

import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
```

<section id="card-pattern-title">

  <rh-card>
    <h2 slot="header">Title, lg</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.
       Pellentesque vel dapibus risus.</p>
    <rh-cta><a href="#">Call to action</a></rh-cta>
  </rh-card>

  <rh-card>
    <h2 slot="header">Title, lg</h2>
    <svg class="sample" width="160" height="80"><rect></rect></svg>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.
       Pellentesque vel dapibus risus.</p>
    <rh-cta><a href="#">Call to action</a></rh-cta>
  </rh-card>

  <rh-card color-palette="lighter">
    <h2 slot="header">Title, lg</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.
       Pellentesque vel dapibus risus.</p>
    <rh-cta><a href="#">Call to action</a></rh-cta>
  </rh-card>

  <rh-card color-palette="lighter">
    <h2 slot="header">Title, lg</h2>
    <svg class="sample" width="160" height="80"><rect></rect></svg>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.
       Pellentesque vel dapibus risus.</p>
    <rh-cta><a href="#">Call to action</a></rh-cta>
  </rh-card>

</section>
```

import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
```

#card-patterns {
  padding: 0.5em;
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-auto-columns: 1fr;
}

rh-card {
  height: max-content;
}

rh-card.bar {
  --rh-card-heading-font-family: var(--rh-font-family-body-text);
  --rh-card-heading-font-weight: var(--rh-font-weight-body-text-regular);
  --rh-card-heading-font-size: var(--rh-font-size-body-text-md);
  &::part(header) {
    margin: 0;
    padding: var(--rh-space-lg) var(--rh-space-xl);
    background-color: var(--_header-bg, var(--rh-color-surface-light));
  }
}

rh-card.image {
  --rh-card-heading-font-weight: var(--rh-font-weight-heading-medium);
  --rh-card-heading-font-size: var(--rh-font-size-heading-md);
  &::part(header) {
    margin: 0;
  }

  & img {
    display: block;
    min-width: 100%;
    height: auto;
  }

  &.heading {
    & h2 {
      margin-block-start: 0;
      margin-block-end: var(--rh-space-lg);
    }
  }
}

rh-card.center::part(body),
rh-card.center::part(footer) {
  justify-content: center;
  text-align: center;
}

rh-card.end::part(body),
rh-card.end::part(footer) {
  justify-content: end;
  text-align: end;
}
```

<section id="card-patterns">
  <rh-card>
    <h2 slot="header">Default card, slotted content and footer</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card>
    <h2 slot="header">Slotted title, content, and footer</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card color-palette="lighter">
    <h2 slot="header">Lighter color palette</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card color-palette="lighter" class="bar">
    <h2 slot="header">Lighter color palette and custom header</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="bar">
    <h2 slot="header">Custom header</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="center">
    <h2 slot="header">Center aligned content, footer</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="end">
    <h2 slot="header">End aligned content, footer</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="image">
    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
        <title>A placeholder image in a card header slot</title>
        <rect x="0" y="0" width="320" height="120" fill="light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838))"></rect>
        <line x1="0" y1="0" x2="320" y2="120" stroke="var(--rh-color-border-subtle)"></line>
        <line x1="320" y1="0" x2="0" y2="120" stroke="var(--rh-color-border-subtle)"></line>
      </svg>
    <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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="image">
    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
        <title>A placeholder image in a card header slot</title>
        <rect x="0" y="0" width="320" height="120" fill="light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838))"></rect>
        <line x1="0" y1="0" x2="320" y2="120" stroke="var(--rh-color-border-subtle)"></line>
        <line x1="320" y1="0" x2="0" y2="120" stroke="var(--rh-color-border-subtle)"></line>
      </svg>
    <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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

  <rh-card class="image heading">
    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
      <title>A placeholder image in a card header slot</title>
      <rect x="0" y="0" width="320" height="120" fill="light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838))"></rect>
      <line x1="0" y1="0" x2="320" y2="120" stroke="var(--rh-color-border-subtle)"></line>
      <line x1="320" y1="0" x2="0" y2="120" stroke="var(--rh-color-border-subtle)"></line>
    </svg>
    <h2>Card with slotted image header. Full width image.</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 variant="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>
</section>
```

#card-pattern-quote {
  display: grid;
  gap: var(--rh-space-md, 16px);
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  & rh-card,
  &::part(container) {
    height: 100%;
    & rh-video {
      width: 100%;
      aspect-ratio: 9/5;
      /* below presumably implemented in rh-video */
      display: block;
      background-color: light-dark(var(--rh-color-surface-light, #e0e0e0), var(--rh-color-surface-dark, #383838));
    }
  }
}
```

import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-blockquote/rh-blockquote.js';
//import '@rhds/elements/rh-video/rh-video.js';
```

<section id="card-pattern-quote">

  <rh-card>
    <rh-video slot="image"></rh-video>
    <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
  </rh-card>

  <rh-card>
    <rh-video slot="image"></rh-video>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Quaerat quae accusantium velit sed amet, praesentium maiores illum ad.
       Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.</p>
    <rh-cta slot="footer"><a href="#">Call to action</a></rh-cta>
  </rh-card>

  <rh-card>
    <rh-video slot="image"></rh-video>
    <rh-blockquote>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Quaerat quae accusantium velit sed amet, praesentium maiores illum ad.
         Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.</p>
      <span slot="author">First name Last name</span>
      <span slot="title">Job title, Company name</span>
    </rh-blockquote>
  </rh-card>

  <rh-card color-palette="lighter">
    <rh-video slot="image"></rh-video>
    <a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a>
  </rh-card>

  <rh-card color-palette="lighter">
    <rh-video slot="image"></rh-video>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Quaerat quae accusantium velit sed amet, praesentium maiores illum ad.
       Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.</p>
    <rh-cta slot="footer"><a href="#">Call to action</a></rh-cta>
  </rh-card>

  <rh-card color-palette="lighter">
    <rh-video slot="image"></rh-video>
    <rh-blockquote>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Quaerat quae accusantium velit sed amet, praesentium maiores illum ad.
         Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.</p>
      <span slot="author">First name Last name</span>
      <span slot="title">Job title, Company name</span>
    </rh-blockquote>
  </rh-card>

</section>
```