Blockquote

import

{

Blockquote

}

from

'@platform-blocks/react-ui-library'

;

const

AUTHOR

=

{

  name

:

'Jamie Ortega'

,

  title

:

'Principal Product Designer'

,

}

;

export

function

Demo

(

)

{

return

(

<Blockquote

author

=

{

AUTHOR

}

>

The

Blockquote

component keeps editorial typography consistent so our brand voice always feels elevated

.

</Blockquote

>

)

;

}

import

{

Blockquote

}

from

'@platform-blocks/react-ui-library'

;

export

function

Demo

(

)

{

return

(

<Blockquote

variant

=

"testimonial"

author

=

{

{

        name

:

'Priya Shah'

,

        title

:

'CTO'

,

        organization

:

'Northwind Labs'

,

        avatar

:

require

(

'../../../../assets/avatars/avatar-2.png'

)

,

}

}

rating

=

{

{

value

:

5

,

max

:

5

,

showValue

:

true

}

}

source

=

{

{

        name

:

'Google Business'

,

        brand

:

'google'

,

}

}

date

=

"2024-06-12"

      verified

>

React

UI

Library

helped us ship an entirely

new

settings experience in a single sprint

.

The

components feel native on every platform

.

</Blockquote

>

)

;

}

import

{

Block

,

Blockquote

}

from

'@platform-blocks/react-ui-library'

;

export

function

Demo

(

)

{

return

(

<Block

>

<Blockquote

variant

=

"minimal"

author

=

{

{

          name

:

'@futureshaper'

,

          avatar

:

require

(

'../../../../assets/avatars/avatar-3.png'

)

,

}

}

source

=

{

{

          name

:

'X (Twitter)'

,

          brand

:

'x'

,

          url

:

'https:

//x.com/platform-blocks',

}

}

date

=

"3h"

        verified

>

The

future is going to be wild 🚀

</Blockquote

>

<Blockquote

variant

=

"testimonial"

author

=

{

{

          name

:

'Jordan Reeves'

,

          title

:

'Developer Advocate'

,

          avatar

:

require

(

'../../../../assets/avatars/avatar-1.png'

)

,

}

}

source

=

{

{

          name

:

'LinkedIn'

,

          brand

:

'linkedin'

,

}

}

date

=

"1 day ago"

>

Just

finished testing the

new

React

UI

Library

UI

library

.

The

component quality and developer experience is outstanding

!

</Blockquote

>

<Blockquote

variant

=

"testimonial"

author

=

{

{

          name

:

'Sasha Lin'

,

          title

:

'Staff Engineer'

,

}

}

source

=

{

{

          name

:

'GitHub'

,

          brand

:

'github'

,

}

}

rating

=

{

{

value

:

5

,

max

:

5

,

showValue

:

true

}

}

        verified

>

This

library has saved us countless hours of development time

.

Clean

API

,

great documentation

,

and excellent

TypeScript

support

.

</Blockquote

>

</Block

>

)

;

}

import

{

Block

,

Blockquote

,

Text

}

from

'@platform-blocks/react-ui-library'

;

import

{

AUTHOR

,

QUOTE

,

SOURCE

}

from

'./data'

;

export

function

Demo

(

)

{

return

(

<Block

>

<Block

>

<Text

variant

=

"h5"

weight

=

"semibold"

>

Right

(

default

)

</Text

>

<Blockquote

variant

=

"testimonial"

          shadow

author

=

{

AUTHOR

}

source

=

{

SOURCE

}

>

{

QUOTE

}

</Blockquote

>

</Block

>

<Block

>

<Text

variant

=

"h5"

weight

=

"semibold"

>

Left

</Text

>

<Blockquote

variant

=

"testimonial"

          shadow

attributionAlignment

=

"left"

author

=

{

AUTHOR

}

source

=

{

SOURCE

}

>

{

QUOTE

}

</Blockquote

>

</Block

>

</Block

>

)

;

}

import

{

Block

,

Blockquote

,

Text

}

from

'@platform-blocks/react-ui-library'

;

export

function

Demo

(

)

{

return

(

<Block

>

<Block

>

<Text

variant

=

"h5"

weight

=

"semibold"

>

Default

</Text

>

<Blockquote

author

=

{

{

name

:

'Anonymous'

}

}

>

The

best way to predict the future is to create it

.

</Blockquote

>

</Block

>

<Block

>

<Text

variant

=

"h5"

weight

=

"semibold"

>

Testimonial

</Text

>

<Blockquote

variant

=

"testimonial"

author

=

{

{

            name

:

'Sarah Johnson'

,

            title

:

'Marketing Director'

,

            avatar

:

require

(

'../../../../assets/avatars/avatar-4.png'

)

,

}

}

rating

=

{

{

value

:

4

,

max

:

5

}

}

          shadow

>

Great

experience with

this

service

.

The

team was professional and delivered quality results

.

</Blockquote

>

</Block

>

<Block

>

<Text

variant

=

"h5"

weight

=

"semibold"

>

Featured

</Text

>

<Blockquote

variant

=

"featured"

alignment

=

"center"

author

=

{

{

            name

:

'Albert Einstein'

,

            title

:

'Theoretical Physicist'

,

}

}

>

Imagination

is more important than knowledge

.

</Blockquote

>

</Block

>

<Block

>

<Text

variant

=

"h5"

weight

=

"semibold"

>

Minimal

</Text

>

<Blockquote

variant

=

"minimal"

quoteIconPosition

=

"none"

author

=

{

{

name

:

'@username'

}

}

source

=

{

{

name

:

'X (Twitter)'

,

brand

:

'x'

}

}

date

=

"2 hours ago"

>

Just

discovered

this

amazing

new

feature

!

🚀

</Blockquote

>

</Block

>

</Block

>

)

;

}