Blockquote

Quotes a whole passage from elsewhere and credits its source.

I have no idea where I was born.
—— Natsume Sōseki

<script setup lang="ts">
  import { Blockquote } from '@hina-ui/vue'
</script>

<template>
  <Blockquote cite="Natsume Sōseki" class="max-w-lg">I have no idea where I was born.</Blockquote>
</template>

vue

Usage

import { Blockquote } from '@hina-ui/vue'

The component renders a native blockquote with a rule along its starting edge and secondary text colour, setting it apart from body text.

The first job of design is not to be noticed, but to let people finish what they came to do.

<script setup lang="ts">
  import { Blockquote } from '@hina-ui/vue'
</script>

<template>
  <Blockquote class="max-w-lg">
    The first job of design is not to be noticed, but to let people finish what they came to do.
  </Blockquote>
</template>

vue

Examples

Crediting the source

cite adds an attribution line below the quotation, in a lighter colour than the quotation itself. It can be a person, a title or a note about where the text came from.

I am a cat. As yet I have no name.
—— Chronicles of Hikarinagi, Volume One

<script setup lang="ts">
  import { Blockquote } from '@hina-ui/vue'
</script>

<template>
  <Blockquote cite="Chronicles of Hikarinagi, Volume One" class="max-w-lg">
    I am a cat. As yet I have no name.
  </Blockquote>
</template>

vue

Several paragraphs

The default slot accepts multiple paragraphs. Spacing between them is up to the caller.

The first version had a single input box, and it took us three months to admit that was not enough.
Every feature added since then had to answer one question first: whose time does it save.
—— Interview notes

<script setup lang="ts">
  import { Blockquote, Text } from '@hina-ui/vue'
</script>

<template>
  <Blockquote cite="Interview notes" class="flex max-w-lg flex-col gap-3">
    <Text>
      The first version had a single input box, and it took us three months to admit that was not
      enough.
    </Text>
    <Text>
      Every feature added since then had to answer one question first: whose time does it save.
    </Text>
  </Blockquote>
</template>

vue

Quotations in body content

Prose applies the same styling to native blockquote elements inside it, so rendered Markdown and rich text need no tag replacement.

Quotations in body content need no separate component.

A blockquote written in an article picks up the same styling.

It matches the component exactly.

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>Quotations in body content need no separate component.</p>
    <blockquote>A blockquote written in an article picks up the same styling.</blockquote>
    <p>It matches the component exactly.</p>
  </Prose>
</template>

vue

API

Props

Prop	Type	Default	Description
`cite`	`string`	—	Source, shown as an attribution
`class`	`string`	—	Classes appended to the root

Slots

Slot	Description
`default`	The quoted content