Blockquote | Mantine

Usage

Life is like an npm install – you never know what you are going to get.– Forrest Gump

Color

Radius

Icon size

import { Blockquote } from '@mantine/core';
import { InfoIcon } from '@phosphor-icons/react';

function Demo() {
  const icon = <InfoIcon />;
  return (
    <Blockquote color="blue" iconSize={38} cite="– Forrest Gump" icon={icon} mt="xl">
      Life is like an npm install – you never know what you are going to get.
    </Blockquote>
  );
}

Text wrap

Use the textWrap prop to control the text-wrap CSS property:

Life is like a box of chocolates. You never know what you are gonna get. But whatever you get, you should make the most of it and enjoy every moment.– Forrest Gump

Text wrap

Wrap

Balance

import { Blockquote } from '@mantine/core';
import { InfoIcon } from '@phosphor-icons/react';

function Demo() {
  const icon = <InfoIcon />;
  return (
    <Blockquote icon={icon} cite="– Forrest Gump" textWrap="wrap">
      Life is like a box of chocolates. You never know what you are gonna get. But whatever you
      get, you should make the most of it and enjoy every moment.
    </Blockquote>
  );
}

Timeline

Code