Prerendered Prism Highlighting | Red Hat Design System

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Cards Galore!</title>
  </head>
  <body>
    <main>
      <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>
    </main>
  </body>
</html>

rh-card.avatar-card {
  width: 360px;
  &::part(body) {
    margin-block-start: var(--rh-space-lg, 16px);
  }

  & p {
    margin-block-start: 0;
  }

  & h4 {
    font-weight: var(--rh-font-weight-heading-regular, 300);
    font-size: var(--rh-font-size-body-text-md, 1rem);
    font-family: var(--rh-font-family-body-text);
    line-height: var(--rh-line-height-body-text, 1.5);
  }
}

extends:
  - stylelint-config-standard
  - '@stylistic/stylelint-config'

plugins:
  - ./node_modules/@rhds/tokens/plugins/stylelint.js
  - '@stylistic/stylelint-plugin'

rules:
  rhds/token-values: true
  rhds/no-unknown-token-name:
    - true
    - allowed:
      - --rh-icon-size