Skeleton

import '@rhds/elements/rh-skeleton/rh-skeleton.js';

<rh-skeleton></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">

import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

import '@rhds/elements/rh-skeleton/rh-skeleton.js';

<rh-skeleton type="circle"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">

import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton type="circle" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-skeleton></rh-skeleton>
</rh-context-demo>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">

import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <Skeleton />
  </rh-context-demo>
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

import '@rhds/elements/rh-skeleton/rh-skeleton.js';

<rh-skeleton type="rectangle"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">

import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton type="rectangle" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

import '@rhds/elements/rh-skeleton/rh-skeleton.js';

<rh-skeleton type="square"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">

import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton type="square" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

import '@rhds/elements/rh-skeleton/rh-skeleton.js';

<h2>Body Copy Skeletons</h2>
<rh-skeleton type="body-copy" size="xs"></rh-skeleton>
<rh-skeleton type="body-copy" size="sm"></rh-skeleton>
<rh-skeleton type="body-copy" size="md"></rh-skeleton>
<rh-skeleton type="body-copy" size="lg"></rh-skeleton>
<rh-skeleton type="body-copy" size="xl"></rh-skeleton>
<rh-skeleton type="body-copy" size="2xl"></rh-skeleton>

<h2>Heading Skeletons</h2>
<rh-skeleton type="heading" size="xs"></rh-skeleton>
<rh-skeleton type="heading" size="sm"></rh-skeleton>
<rh-skeleton type="heading" size="md"></rh-skeleton>
<rh-skeleton type="heading" size="lg"></rh-skeleton>
<rh-skeleton type="heading" size="xl"></rh-skeleton>
<rh-skeleton type="heading" size="2xl"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">

import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <h2>Body Copy Skeletons</h2>
  <Skeleton type="body-copy" size="xs" />
  <Skeleton type="body-copy" size="sm" />
  <Skeleton type="body-copy" size="md" />
  <Skeleton type="body-copy" size="lg" />
  <Skeleton type="body-copy" size="xl" />
  <Skeleton type="body-copy" size="2xl" />
  <h2>Heading Skeletons</h2>
  <Skeleton type="heading" size="xs" />
  <Skeleton type="heading" size="sm" />
  <Skeleton type="heading" size="md" />
  <Skeleton type="heading" size="lg" />
  <Skeleton type="heading" size="xl" />
  <Skeleton type="heading" size="2xl" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);