Skip Navigation
React Magma

Block Quote

BlockQuote is an element which enables the styling of a quotation.

Basic Usage

An optional prop of hasAttribution may be added for attribution purposes. Both lines can be uniquely customized with font family and color options.

import React from 'react';


import { BlockQuote, BlockQuoteItem } from 'react-magma-dom';


export function Example() {
  return (
    <BlockQuote>
      <BlockQuoteItem>I like biscuits!</BlockQuoteItem>
    </BlockQuote>
  );
}

With Attribution

hasAttribution is an optional boolean which adds a second line providing a source for the quotation.

import React from 'react';


import { BlockQuote, BlockQuoteItem } from 'react-magma-dom';


export function Example() {
  return (
    <BlockQuote>
      <BlockQuoteItem>I like biscuits!</BlockQuoteItem>
      <BlockQuoteItem hasAttribution>Sir Nottingshire</BlockQuoteItem>
    </BlockQuote>
  );
}

Visual Styles

Block Quote has four visual styles which are: bodyLarge, bodyMedium, bodySmall, and bodyXSmall, which determine the paragraph's relative size (including font-size, line-height, margins, font-weight, etc). The default visualStyle for the main quotation is bodyMedium.

In addition to the blockquote visual styles, the visualStyle prop can also accept the values for the different heading visual styles: headingXLarge, headingLarge, headingMedium, headingSmall, headingXSmall and heading2XSmall. These visual styles are also used with the Paragraph and Heading components. The underlying HTML will still render as a p element.

import React from 'react';


import {
  BlockQuote,
  BlockQuoteItem,
  TypographyVisualStyle,
} from 'react-magma-dom';


export function Example() {
  return (
    <BlockQuote>
      <BlockQuoteItem visualStyle={TypographyVisualStyle.headingLarge}>
        I like biscuits!
      </BlockQuoteItem>
      <BlockQuoteItem
        visualStyle={TypographyVisualStyle.headingMedium}
        hasAttribution
      >
        Sir Nottingshire
      </BlockQuoteItem>
    </BlockQuote>
  );
}

Color

The color prop allows three additional custom font colors aside from the defaults: success, danger and subdued.

import React from 'react';


import { BlockQuote, BlockQuoteItem, TypographyColor } from 'react-magma-dom';


export function Example() {
  return (
    <BlockQuote>
      <BlockQuoteItem color={TypographyColor.success}>
        I like biscuits!
      </BlockQuoteItem>
      <BlockQuoteItem color={TypographyColor.danger} hasAttribution>
        Sir Nottingshire
      </BlockQuoteItem>
    </BlockQuote>
  );
}

Border Style

The borderStyle prop allows the use of any Magma color or a custom CSS hex value. The available Magma colors are found here.

import React from 'react';


import { BlockQuote, BlockQuoteItem } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <BlockQuote borderStyle="primary">
        <BlockQuoteItem>I like biscuits!</BlockQuoteItem>
        <BlockQuoteItem hasAttribution>Sir Nottingshire</BlockQuoteItem>
      </BlockQuote>
    </>
  );
}

Context Variant

The contextVariant prop can be used to set additional styles on BlockQuote. The default contextVariant is default.

This prop may be customized between hasAttribution and the main quote element with narrative and expressive font families.

import React from 'react';


import { BlockQuote, BlockQuoteItem } from 'react-magma-dom';


export function Example() {
  return (
    <BlockQuote>
      <BlockQuoteItem contextVariant="narrative">
        I like biscuits!
      </BlockQuoteItem>
      <BlockQuoteItem contextVariant="expressive" hasAttribution>
        Sir Nottingshire
      </BlockQuoteItem>
    </BlockQuote>
  );
}

Inverse

The isInverse prop renders white text for the quotation and nearly white text for the attribution line if enabled.

import React from 'react';


import { BlockQuote, BlockQuoteItem, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <BlockQuote isInverse>
          <BlockQuoteItem>I like biscuits!</BlockQuoteItem>
          <BlockQuoteItem hasAttribution>Sir Nottingshire</BlockQuoteItem>
        </BlockQuote>
      </CardBody>
    </Card>
  );
}

Block Quote Props

Any other props supplied will be provided to the wrapping div element.

borderStyle

Description

Style properties for the left border color which accept custom CSS hex values.

Type

| string

Default

-

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

theme

Type

ThemeInterface

Default

-

Block Quote Item Props

Any other props supplied will be provided to the wrapping div element.

borderStyle

Description

Style properties for the left border color which accept custom CSS hex values.

Type

| string

Default

-

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

color

Description

The color of the component, helping to convey meaning or relative emphasis

Type

enum, one of:
TypographyColor.danger
TypographyColor.default
TypographyColor.subdued
TypographyColor.success

Default

TypographyColor.default

contextVariant

Description

Additional styles for typography based on the context of the content

Type

enum, one of:
TypographyContextVariant.default
TypographyContextVariant.expressive
TypographyContextVariant.narrative

Default

TypographyContextVariant.default

hasAttribution

Description

If true, adds in an attribution line for the quote

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

theme

Type

ThemeInterface

Default

-

visualStyle

Description

Applies visual styles including font-size, font-weight, line-height and margins

Type

enum, one of:
TypographyVisualStyle.bodyLarge
TypographyVisualStyle.bodyMedium
TypographyVisualStyle.bodySmall
TypographyVisualStyle.bodyXSmall
TypographyVisualStyle.heading2XLarge
TypographyVisualStyle.heading2XSmall
TypographyVisualStyle.headingLarge
TypographyVisualStyle.headingMedium
TypographyVisualStyle.headingSmall
TypographyVisualStyle.headingXLarge
TypographyVisualStyle.headingXSmall

Default

TypographyVisualStyle.bodyMedium

On this page

Deploys by Netlify