Blockquote

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

<rh-blockquote>
  <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
  <span slot="author">Linus Torvalds</span>
  <span slot="title">Software Engineer</span>
</rh-blockquote>

import { Blockquote } from "@rhds/elements/react/rh-blockquote/rh-blockquote.js";

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

export const Demo = () => (
  <Blockquote>
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </Blockquote>
);

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

<rh-blockquote align="center">
  <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
  <span slot="author">Linus Torvalds</span>
  <span slot="title">Software Engineer</span>
</rh-blockquote>

import { Blockquote } from "@rhds/elements/react/rh-blockquote/rh-blockquote.js";

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

export const Demo = () => (
  <Blockquote align="center">
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </Blockquote>
);

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

<rh-context-demo>
  <rh-blockquote>
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </rh-blockquote>

  <rh-blockquote align="center">
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </rh-blockquote>

  <rh-blockquote highlight="inline-start">
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </rh-blockquote>

  <rh-blockquote size="large">
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </rh-blockquote>
</rh-context-demo>

import { Blockquote } from "@rhds/elements/react/rh-blockquote/rh-blockquote.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>
    <Blockquote>
      <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
      <span slot="author">Linus Torvalds</span>
      <span slot="title">Software Engineer</span>
    </Blockquote>
    <Blockquote align="center">
      <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
      <span slot="author">Linus Torvalds</span>
      <span slot="title">Software Engineer</span>
    </Blockquote>
    <Blockquote highlight="inline-start">
      <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
      <span slot="author">Linus Torvalds</span>
      <span slot="title">Software Engineer</span>
    </Blockquote>
    <Blockquote size="large">
      <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
      <span slot="author">Linus Torvalds</span>
      <span slot="title">Software Engineer</span>
    </Blockquote>
  </rh-context-demo>
);

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

<rh-blockquote highlight="inline-start">
  <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
  <span slot="author">Linus Torvalds</span>
  <span slot="title">Software Engineer</span>
</rh-blockquote>

import { Blockquote } from "@rhds/elements/react/rh-blockquote/rh-blockquote.js";

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

export const Demo = () => (
  <Blockquote highlight="inline-start">
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </Blockquote>
);

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

<rh-blockquote size="large">
  <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
  <span slot="author">Linus Torvalds</span>
  <span slot="title">Software Engineer</span>
</rh-blockquote>

import { Blockquote } from "@rhds/elements/react/rh-blockquote/rh-blockquote.js";

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

export const Demo = () => (
  <Blockquote size="large">
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </Blockquote>
);