ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Typography

Blockquote

rx.blockquote

Official docs

Workshop order

On the shop's home page, show one line of a customer review as a large quote, with a button to flip to the next review.

rx.blockquote is a quoted paragraph that sets someone else's words apart. It renders an HTML <blockquote> with a vertical bar on the left that separates it from the body text. Use it to quote a whole chunk: reviews, famous sayings, excerpts from documents.

Perfect typography is certainly the most elusive of all arts.

rx.blockquote("Perfect typography is certainly the most elusive of all arts.")

Try the props

You can change the size, weight and color. The color applies to both the text and the bar on the left.

Try the props

Perfect typography is certainly the most elusive of all arts.

label

size

weight

color

high_contrast

rx.blockquote("Perfect typography is certainly the most elusive of all arts.", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

A larger size also tunes line height and letter spacing. high_contrast makes the text darker.

Prop	Values	Default	Use
`size`	`"1"` ~ `"9"`	inherited	Font size, line height and letter spacing
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	inherited	Font weight
`color_scheme`	Radix color name	theme color	Color of the text and the bar
`high_contrast`	`True` / `False`	`False`	Darker text
`cite`	address string	none	Address of the quoted source (not shown on screen)

The only events are the standard ones.

Size and weight

size runs from "1" to "9". The larger it is, the tighter the relative line height and letter spacing, so even large quotes look solid.

Perfect typography is an elusive art.

rx.flex(
    rx.blockquote("Perfect typography is an elusive art.", size="1"),
    rx.blockquote("Perfect typography is an elusive art.", size="3"),
    rx.blockquote("Perfect typography is an elusive art.", size="5"),
    rx.blockquote("Perfect typography is an elusive art.", size="7"),
    rx.separator(),
    rx.blockquote("Perfect typography is an elusive art.", weight="light"),
    rx.blockquote("Perfect typography is an elusive art.", weight="regular"),
    rx.blockquote("Perfect typography is an elusive art.", weight="medium"),
    rx.blockquote("Perfect typography is an elusive art.", weight="bold"),
    direction="column",
    spacing="3",
)

Color and contrast

Use color_scheme for a color other than the theme's and high_contrast=True for darker text. The left column is the default, the right column is high contrast.

Good design is honest.

rx.grid(
    rx.blockquote("Good design is honest.", color_scheme="indigo"),
    rx.blockquote("Good design is honest.", color_scheme="indigo", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="cyan"),
    rx.blockquote("Good design is honest.", color_scheme="cyan", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="crimson"),
    rx.blockquote("Good design is honest.", color_scheme="crimson", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="orange"),
    rx.blockquote("Good design is honest.", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="3",
)

Recording the source: cite

Put the address of the quoted text in cite. It does not appear on screen; it stays only as an HTML attribute, so search engines and assistive technology can find the source. To show the source to people, add a separate rx.text as below.

Less, but better.

Dieter Rams

rx.box(
    rx.blockquote(
        "Less, but better.",
        cite="https://en.wikipedia.org/wiki/Dieter_Rams",
        size="5",
    ),
    rx.text("Dieter Rams", size="2", color_scheme="gray", margin_top="6px", margin_left="16px"),
)

Blockquote and Quote

rx.blockquote is a paragraph of its own; rx.text.quote is a short quote inside a sentence. Use Blockquote when you break off from the sentence to show the quote apart, Quote when it sits inside the sentence.

A blockquote is its own block, set apart from the paragraph.

A quote stays inside the sentence: short and inline, then the sentence goes on.

rx.flex(
    rx.blockquote("A blockquote is its own block, set apart from the paragraph."),
    rx.text(
        "A quote stays inside the sentence: ",
        rx.text.quote("short and inline"),
        ", then the sentence goes on.",
    ),
    direction="column",
    spacing="4",
)

Filling the order

Keep the list of reviews in State and change only the number of the one to show (index). Both the quote and the name are State values, so they change together every time you click the button.

Arrived in two days and fits perfectly.

Mina, Seoul

class BlockquoteReviewState(rx.State):
    reviews: list[dict[str, str]] = [
        {"text": "Arrived in two days and fits perfectly.", "name": "Mina, Seoul"},
        {"text": "The fabric feels even better than the photos.", "name": "Jun, Busan"},
        {"text": "Third order this year. Still happy.", "name": "Sora, Daegu"},
    ]
    index: int = 0

    @rx.event
    def next_review(self):
        self.index = (self.index + 1) % len(self.reviews)


rx.card(
    rx.blockquote(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["text"], size="4", color_scheme="indigo"),
    rx.flex(
        rx.text(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["name"], size="2", color_scheme="gray"),
        rx.spacer(),
        rx.button("Next review", rx.icon("arrow-right"), on_click=BlockquoteReviewState.next_review, size="1", variant="soft"),
        align="center",
        margin_top="12px",
        padding_left="16px",
    ),
    max_width="420px",
)

Workshop notes

rx.blockquote("…") is a quoted paragraph set apart from the text (<blockquote>).
Set the look with size "1" to "9", weight, color_scheme and high_contrast.
cite keeps the source address in the HTML only. Show a visible source with a separate rx.text.
For a short quote inside a sentence, use rx.text.quote.

← Previous

Typography · Markdown

Typography · Quote

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.