Callout

A note written into the content.

The reader supports two-page spreads

In landscape it switches to a two-page layout on its own, and reading settings can pin it to a single page.

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

<template>
  <Callout tone="accent" title="The reader supports two-page spreads" class="max-w-md">
    In landscape it switches to a two-page layout on its own, and reading settings can pin it to a
    single page.
  </Callout>
</template>

vue

Usage

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

A callout is a passage written into the content — an aside, a shortcut worth knowing, or something to watch out for. It lives with the content and never appears or disappears on its own.

Cover art comes from the publisher's site; replacing it needs editor rights.

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

<template>
  <Callout class="max-w-md">
    Cover art comes from the publisher's site; replacing it needs editor rights.
  </Callout>
</template>

vue

Which one to reach for: Callout for a note written into a document or a help page, Alert for a message that appears after an action, and Toast for brief feedback that clears itself after a few seconds.

Examples

Tones

Six tones, neutral by default. The icon follows the tone.

accent offers a suggestion or a shortcut; the rest carry the same meaning they do elsewhere on the site: info adds background, success marks the recommended way, warning asks for care, and danger flags something that cannot be undone.

A plain aside, carrying no mood

A shortcut worth trying

Background that relates to the current content

The recommended way to do it

Something to weigh before going ahead

This cannot be undone

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

  const tones = [
    { tone: 'neutral', text: 'A plain aside, carrying no mood' },
    { tone: 'accent', text: 'A shortcut worth trying' },
    { tone: 'info', text: 'Background that relates to the current content' },
    { tone: 'success', text: 'The recommended way to do it' },
    { tone: 'warning', text: 'Something to weigh before going ahead' },
    { tone: 'danger', text: 'This cannot be undone' },
  ] as const
</script>

<template>
  <Stack class="w-full max-w-md">
    <Callout v-for="item in tones" :key="item.tone" :tone="item.tone">{{ item.text }}</Callout>
  </Stack>
</template>

vue

Title

title sits above the body and sums the passage up in a phrase. Add one when the body runs long, so a reader can tell at a glance whether it concerns them.

Chapters follow the print order

Some works were serialised in a different order from their collected volumes; the site follows the volumes.

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

<template>
  <Callout tone="warning" title="Chapters follow the print order" class="max-w-md">
    Some works were serialised in a different order from their collected volumes; the site follows
    the volumes.
  </Callout>
</template>

vue

Icon

Set icon to false to drop the icon. To swap in a different one use the icon slot, keeping size-5 and mt-0.5 so it stays aligned with the first line of the body.

Without an icon the text fills the whole width of the note.

Swap in an icon that suits the content.

<script setup lang="ts">
  import { BookOpen } from '@lucide/vue'
  import { Callout, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Callout :icon="false">Without an icon the text fills the whole width of the note.</Callout>
    <Callout tone="info">
      <template #icon>
        <BookOpen class="text-info-text mt-0.5 size-5 shrink-0" />
      </template>
      Swap in an icon that suits the content.
    </Callout>
  </Stack>
</template>

vue

API

Props

Prop	Type	Default	Description
`tone`	`'neutral' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Tone
`title`	`string`	—	Title
`icon`	`boolean`	`true`	Whether the icon is shown
`class`	`string`	—	Classes appended to the root

Slots

Slot	Description
`default`	The body
`icon`	Replaces the icon