Blockquote

Displays content quoted from elsewhere.

It implements the <blockquote> element.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Blockquote.css';

Props

Use any valid <blockquote> props.

Examples

Deep import.
import Blockquote from 'device-agnostic-ui/public/components/Blockquote.js';
Deep require.
const Blockquote = require('device-agnostic-ui/public/components/Blockquote.js');
Index import. Convenient, but technically inferior to a deep import.
import { Blockquote } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Blockquote } = require('device-agnostic-ui');
Containing simple text.
import { Blockquote } from 'device-agnostic-ui';

const result = (
  <Blockquote>
    Great minds discuss ideas, average minds discuss events, small minds discuss
    people.
  </Blockquote>
);
Great minds discuss ideas, average minds discuss events, small minds discuss people.
Containing basic HTML, achievable via GitHub Flavored Markdown (GFM).
import { Blockquote, LinkText, Para } from 'device-agnostic-ui';

const result = (
  <Blockquote>
    <Para>
      Great minds discuss ideas, average minds discuss events, small minds
      discuss people.
    </Para>
    <Para>
      —{' '}
      <LinkText href="https://en.wikipedia.org/wiki/Henry_Thomas_Buckle">
        Henry Thomas Buckle
      </LinkText>
    </Para>
  </Blockquote>
);

Great minds discuss ideas, average minds discuss events, small minds discuss people.

— Henry Thomas Buckle

Tags