/

<Quote> Component

Share
Code Editor
<div style={{ padding: 24, background: 'white' }}>

  <Quote

    text="Amet, nisl massa id egestas tincidunt urna tortor id bibendum. Mauris elit nunc fermentum elit mi varius suspendisse ut dictum. Nec a, massa vitae, viverra ultricies."

    avatar="https://www.datocms-assets.com/2885/1560891392-cropped0000armon.jpg"

    name="Name"

    role="Company, Role"

  />

</div>

Examples

Light theme

Amet, nisl massa id egestas tincidunt urna tortor id bibendum. Mauris elit nunc fermentum elit mi varius suspendisse ut dictum. Nec a, massa vitae, viverra ultricies.

Name avatar

Name

Company, Role

Dark theme

Amet, nisl massa id egestas tincidunt urna tortor id bibendum. Mauris elit nunc fermentum elit mi varius suspendisse ut dictum. Nec a, massa vitae, viverra ultricies.

Name avatar

Name

Company, Role

Props

NameDescription
textSize
number
The display size the text should render as.
Options: 4, 5
text*
string
The text displayed as the quote
avatar
string
Source url of the image
name*
string
Renders as the first line of the byline
role*
string
Renders as the second line of the byline
appearance
string
Render on light or dark backgrounds
Options: "light", "dark"