BlockQuote

Status: Stable

Latest released: 2019

Current version: v1.3.1

Storybook
GitHub

Component used to distinguish quoted text in a document by increasing the size of the quote, giving it an attribution, and adding a border around it. For those interested, there's a slight difference between block and pull quotes:

A block quotation (also known as a long quotation or extract) is a quotation in a written document that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size font.

Variants

Default

Net worth is the combined value of your assets minus the value of your liabilities.
Carl Jensen founder of 1500 Days to Freedom

No Attribution

Documentation is a love letter that you write to your future self.

Within Text

Lorem ipsum dolor amet brunch organic church-key iPhone small batch marfa cronut raw denim kitsch la croix lyft live-edge master cleanse beard. Gochujang adaptogen vaporware, wolf copper mug cred heirloom letterpress authentic green juice narwhal la croix thundercats fashion axe. Activated charcoal farm-to-table polaroid ugh, iceland seitan viral hashtag vexillologist offal snackwave. Seitan portland pop-up, tattooed trust fund deep v squid banh mi hot chicken ethical literally yr. Wayfarers four dollar toast activated charcoal iPhone. Hot chicken next level meggings, pok pok lumbersexual tacos PBR&B pork belly. IPhone portland irony venmo, readymade leggings hexagon fingerstache pour-over pok pok craft beer skateboard viral cred. Everyday carry fixie yr, asymmetrical austin waistcoat adaptogen. Green juice pork belly blue bottle coloring book. Intelligentsia tattooed crucifix salvia meh copper mug kombucha. Air plant ethical everyday carry raclette. Chartreuse asymmetrical tumblr craft beer biodiesel snackwave glossier.

Net worth is the combined value of your assets minus the value of your liabilities.
Carl Jensen founder of 1500 Days to Freedom

Trust fund gochujang pickled, bitters intelligentsia pork belly ramps shoreditch irony yuccie XOXO squid blue bottle. Swag crucifix bespoke small batch, ethical leggings ramps. Put a bird on it stumptown leggings, photo booth truffaut glossier swag vape gluten-free helvetica yuccie actually tofu hashtag pug. Messenger bag portland aesthetic church-key pitchfork tacos. VHS iceland church-key, ennui cliche fanny pack kogi echo park viral freegan letterpress YOLO sartorial. Cardigan hammock four loko subway tile. Messenger bag tilde yr letterpress portland, actually bespoke synth coloring book leggings hashtag mumblecore pinterest offal cornhole. Vexillologist meggings bitters offal blog, freegan keffiyeh artisan pour-over migas palo santo. Williamsburg lumbersexual blue bottle pabst raw denim man braid dreamcatcher adaptogen chartreuse franzen. 8-bit cliche paleo chicharrones blog, tofu activated charcoal. Tumeric aesthetic four dollar toast humblebrag copper mug, you probably have not heard of them drinking vinegar. Tote bag lyft crucifix, chillwave hella marfa irony kitsch kale chips meditation taxidermy listicle. Keytar pitchfork semiotics chia sriracha forage lomo sustainable chambray lo-fi air plant. Bitters bicycle rights fanny pack, synth neutra helvetica hell of adaptogen coloring book authentic letterpress. Oh. You need a little dummy text for your mockup? How quaint. I bet you’re still using Bootstrap too… Paragraphs: 5 Type: Hipster, neat. Hipster with a shot of Latin.

Development

import BlockQuote from '@nerdwallet/react-block-quote';
<BlockQuote />

Props

<BlockQuote>

attribution

string

Subtext under the quote. Generally the name of the person who said the quote.

Default

null

quote

string

Required

Quoted text.