Block Quote

A styled quotation element for displaying quotes with optional citations and decorative icons.

Anatomy

<script>
  import { Blockquote } from "@saas-ui/svelte/typography/blockquote";
</script>

<!-- Basic blockquote -->
<Blockquote>
  The only way to do great work is to love what you do.
</Blockquote>

<!-- With citation -->
<Blockquote cite="Steve Jobs" showDash>
  The only way to do great work is to love what you do.
</Blockquote>

<!-- With icon -->
<Blockquote showIcon>
  The only way to do great work is to love what you do.
</Blockquote>

Examples

Basic

Basic blockquote with default styling for displaying quotations.

<Blockquote>
	<Text>
		If anyone thinks he is something when he is nothing, he deceives
		himself. Each one should test his own actions. Then he can take
		pride in himself, without comparing himself to anyone else.
	</Text>
</Blockquote>

Colours

Use the colour prop to change the colour scheme. Supports all standard colour options.

<VStack gap={4} class="w-full">
	{#each colours as colourName}
		<HStack gap={10} class="w-full px-4" align="center">
			<Text class="min-w-[8ch]">{colourName}</Text>
			<Blockquote
				colour={colourName as ColourName}
				cite="Uzumaki Naruto"
				showDash>
				<Text>
					If anyone thinks he is something when he is nothing, he
					deceives himself. Each one should test his own actions.
					Then he can take pride in himself, without comparing
					himself to anyone else.
				</Text>
			</Blockquote>
		</HStack>
	{/each}
</VStack>

Custom Icon

Use the icon prop to provide a custom icon component instead of the default quote icon.

<Box class="relative">
	<Float placement="middle-start" class="z-10">
		<Circle size="sm" class="bg-blue-600 text-white">
			<Icon as={QuotesIcon} />
		</Circle>
	</Float>
	<Blockquote cite="Uzumaki Naruto" colour="blue" class="ps-8">
		<Text>
			If anyone thinks he is something when he is nothing, he deceives
			himself. Each one should test his own actions. Then he can take
			pride in himself, without comparing himself to anyone else.
		</Text>
	</Blockquote>
</Box>

Icon

Use the showIcon prop to display a decorative quote icon.

<Blockquote
	variant="plain"
	colour="teal"
	showDash
	showIcon
	cite="Uzumaki Naruto"
>
	<Text>
		If anyone thinks he is something when he is nothing, he deceives
		himself. Each one should test his own actions. Then he can take
		pride in himself, without comparing himself to anyone else.
	</Text>
</Blockquote>

Variants

Use the variant prop to change the visual style. Available variants: subtle, solid, plain.

<VStack gap={8}>
	<Blockquote variant="subtle">
		<Text>
			If anyone thinks he is something when he is nothing, he deceives
			himself. Each one should test his own actions. Then he can take
			pride in himself, without comparing himself to anyone else.
		</Text>
	</Blockquote>
	<Blockquote variant="solid">
		<Text>
			If anyone thinks he is something when he is nothing, he deceives
			himself. Each one should test his own actions. Then he can take
			pride in himself, without comparing himself to anyone else.
		</Text>
	</Blockquote>
	<Blockquote variant="plain">
		<Text>
			If anyone thinks he is something when he is nothing, he deceives
			himself. Each one should test his own actions. Then he can take
			pride in himself, without comparing himself to anyone else.
		</Text>
	</Blockquote>
</VStack>

With Cite

Use the cite prop to add an attribution and showDash to display a dash before the citation.

<Blockquote cite="Uzumaki Naruto" showDash>
	<Text>
		If anyone thinks he is something when he is nothing, he deceives
		himself. Each one should test his own actions. Then he can take
		pride in himself, without comparing himself to anyone else.
	</Text>
</Blockquote>

Props

Prop	Type	Default	Description
`variant`	`subtle \| solid \| plain`	`subtle`	The visual style of the blockquote.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour of the component.
`justify`	`start \| center \| end`	`start`	The alignment of the content.
`cite`	`text`	-	The source of the quote.
`showDash`	`boolean`	`false`	Whether to show a dash before the citation.
`showIcon`	`boolean`	`false`	Whether to show the default quote icon.
`icon`	`boolean`	-	The icon to display.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.