Blockquote

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Blockquote displays quoted text with optional citation attribution. Supports default, accent, and filled variants.

Usage

Basic Usage

Life is what happens when you are busy making other plans.

Open Editor

import { Blockquote } from "@paramanu/typography-react"

export default function App() {
return (
  <Blockquote cite="John Lennon">
    Life is what happens when you are busy making other plans.
  </Blockquote>
)
}

<blockquote class="pm-blockquote pm-blockquote--default pm-blockquote--md">
Life is what happens when you are busy making other plans.
</blockquote>

Guidelines

Accessibility

Uses the semantic <blockquote> element. The cite prop renders a <cite> child for attribution. The citeUrl prop sets the HTML cite attribute.

API

React Props

Prop	Type	Default	Description
variant	"default" | "accent" | "filled"	"default"	Visual variant
size	"sm" | "md" | "lg"	"md"	Size
color	"primary" | "neutral" | "danger" | "success" | "warning" | "info"	—	Accent color
cite	ReactNode	—	Attribution text
citeUrl	string	—	Source URL
withIcon	boolean	false	Decorative quote icon

CSS Classes

Class	Purpose
pm-blockquote	Base
pm-blockquote--{variant}	Visual variant
pm-blockquote--{size}	Size
pm-blockquote--color-{c}	Color
pm-blockquote--with-cite	With citation
pm-blockquote--with-icon	With icon