Blockquote

This component allows you to showcase a quote in all its glory

Basic Usage


import { 
    Blockquote, 
    BlockquoteBody,
    BlockquoteQuote,
    BlockquoteAuthor
} from '@krakentech/coral';
 
<Blockquote>
    <BlockquoteBody>
        <BlockquoteQuote>
            Octopus is a living example of the kind of company that Generation
            was founded to invest in. A company that is a true enabler of a
            sustainable system led by a mission driven team.
        </BlockquoteQuote>
        <BlockquoteAuthor>
            Al Gore, Co-Chair, Generation Investment Manager
        </BlockquoteAuthor>
    </BlockquoteBody>
</Blockquote>

Octopus is a living example of the kind of company that Generation was founded to invest in. A company that is a true enabler of a sustainable system led by a mission driven team.
Al Gore, Co-Chair, Generation Investment Manager

Properties

gap


<Blockquote gap="md">
    <BlockquoteBody>
        <BlockquoteQuote>
            Octopus is a living example of the kind of company that Generation
            was founded to invest in. A company that is a true enabler of a
            sustainable system led by a mission driven team.
        </BlockquoteQuote>
        <BlockquoteAuthor>
            Al Gore, Co-Chair, Generation Investment Manager
        </BlockquoteAuthor>
    </BlockquoteBody>
</Blockquote>

Octopus is a living example of the kind of company that Generation was founded to invest in. A company that is a true enabler of a sustainable system led by a mission driven team.
Al Gore, Co-Chair, Generation Investment Manager

BlockquoteImage


import { 
    Blockquote, 
    ...,
    BlockquoteImage
} from '@krakentech/coral';
 
<Blockquote>
    <BlockquoteImage src="https://static.octopuscdn.com/constantine/constantine-balloon.png" />
    <BlockquoteBody>
        <BlockquoteQuote>
            Octopus is a living example of the kind of company that Generation
            was founded to invest in. A company that is a true enabler of a
            sustainable system led by a mission driven team.
        </BlockquoteQuote>
        <BlockquoteAuthor>
            Al Gore, Co-Chair, Generation Investment Manager
        </BlockquoteAuthor>
    </BlockquoteBody>
</Blockquote>

Octopus is a living example of the kind of company that Generation was founded to invest in. A company that is a true enabler of a sustainable system led by a mission driven team.
Al Gore, Co-Chair, Generation Investment Manager

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`gap`	`keyof CoralSpacing` The gap between the image and the quote.	`xl`
`children`	`ReactNode`

Design

Good to know

Choose our blockquote when you want a quote to be the focus, we often use these in blog posts. If you want a more subtle quote try using our ‘Review’ component.

How does it work?

Just add your quote, the author and a pretty pic of them (but we don’t all like having our photo taken so we also have a variation that doesn’t include an image, you’re welcome).

Component breakdown

Desktop quote: Heading 3
Author text: Body 1
Mobile quote: Heading 6
Mobile author text: Body 2