Blockquote

Block-level quotation from another source.

use radix_yew_themes::Blockquote;
use yew::prelude::*;

#[function_component]
pub fn BlockquoteExample() -> Html {
    html! {
        <Blockquote>
            {"Perfect typography is certainly the most elusive of all arts. Sculpture in
            stone alone comes near it in obstinacy."}
        </Blockquote>
    }
}

API Reference

This component is based on the blockquote element and supports common margin props.

Prop	Type	Default
`as_child`	`Option<Callback<BlockquoteChildProps>>`	-
`size`	`Option<Responsive<1..9>>`	-
`weight`	`Option<Responsive<Weight>>`	-
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-
`truncate`	`Option<bool>`	-
`wrap`	`Option<Responsive<TextWrap>>`	-

Examples

Size

Use the size prop to control the size.

use radix_yew_themes::{Blockquote, Box, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=5>
            <Box max_width="300px">
                <Blockquote size=1>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="350px">
                <Blockquote size=2>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="400px">
                <Blockquote size=3>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="450px">
                <Blockquote size=4>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="500px">
                <Blockquote size=5>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="550px">
                <Blockquote size=6>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="600px">
                <Blockquote size=7>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="650px">
                <Blockquote size=8>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
            <Box max_width="1000px">
                <Blockquote size=9>
                    {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                    stone alone comes near it in obstinacy."}
                </Blockquote>
            </Box>
        </Flex>
    }
}

Weight

Use the weight prop to set the text weight.

use radix_yew_themes::{Blockquote, Flex, FlexDirection, Weight};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteWeightExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="500px">
            <Blockquote weight={Weight::Light}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote weight={Weight::Regular}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote weight={Weight::Medium}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote weight={Weight::Bold}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Blockquote, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="500px">
            <Blockquote color={AccentColor::Indigo}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote color={AccentColor::Cyan}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote color={AccentColor::Orange}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>

            <Blockquote color={AccentColor::Crimson}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{AccentColor, Blockquote, Flex, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteHighContrastExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 max_width="500px">
            <Blockquote color={AccentColor::Gray}>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
            <Blockquote color={AccentColor::Gray} high_contrast=true>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

Truncate

Use the truncate prop to truncate text with an ellipsis when it overflows its container.

use radix_yew_themes::{Blockquote, Flex};
use yew::prelude::*;

#[function_component]
pub fn BlockquoteTruncateExample() -> Html {
    html! {
        <Flex max_width="500px">
            <Blockquote truncate=true>
                {"Perfect typography is certainly the most elusive of all arts. Sculpture in
                stone alone comes near it in obstinacy."}
            </Blockquote>
        </Flex>
    }
}

Rust Radix