Mockline v0.19.0

Callout

A versatile component for highlighting important information with various styles and customization options.

Overview

The Callout component is designed to draw attention to important information, warnings, tips, or notes. It supports different styles, custom icons, and can be used with both internal and external links.

Usage

Basic Usage

This is a simple callout component that draws attention to important information.
<template>
  <Callout>
    This is a simple callout component that draws attention to important information.
  </Callout>
</template>

With Rich Content

This is a callout with rich content including code:
<template>
  <div>
    <h1>My Component</h1>
    <p>This is a paragraph.</p>
  </div>
</template>

<template>
  <Callout>
    <template #title>
      Important Note
    </template>
    <template #content>
      This is a callout with rich content including code...
    </template>
  </Callout>
</template>

With Custom Icon and Internal Link

Learn more about Vue installation and setup.
<template>
  <Callout
    to="/getting-started/installation/vue"
    icon="i-logos-vue"
  >
    Learn more about Vue installation and setup.
  </Callout>
</template>

External Link

Visit the Nuxt documentation for more information.
<template>
  <Callout
    to="https://nuxtjs.org"
    target="_blank"
  >
    Visit the Nuxt documentation for more information.
  </Callout>
</template>

Variants

This is a warning callout for cautionary information.
This is a tip callout for helpful suggestions.
This is a note callout for additional information.
This is a danger callout for critical warnings.
<template>
  <Warning>
    This is a warning callout for cautionary information.
  </Warning>
  
  <Tip>
    This is a tip callout for helpful suggestions.
  </Tip>
  
  <Note>
    This is a note callout for additional information.
  </Note>
  
  <Danger>
    This is a danger callout for critical warnings.
  </Danger>
</template>

Props

to
string

URL or route path for navigation. Can be internal or external.

target
string

Target attribute for the link when using the to prop.

icon
string

Custom icon to display in the callout.

class
string

Additional classes to apply to the callout.

Slots

default
any

The main content of the callout.

title
any

Optional title content.

icon
any

Custom icon content, overrides the icon prop.

Variants

warning
component

Yellow-themed callout for warning messages.

tip
component

Green-themed callout for helpful tips.

note
component

Blue-themed callout for informational notes.

danger
component

Red-themed callout for critical messages.

Best Practices

  1. Content Usage:
    • Use appropriate variants for different message types
    • Keep content concise and focused
    • Include actionable information when possible
  2. Accessibility:
    • Provide meaningful content that makes sense when read by screen readers
    • Use appropriate color contrast for different variants
    • Include descriptive text for icons
  3. Navigation:
    • Use internal links for routing within your application
    • Add target="_blank" for external links
    • Consider adding visual indicators for external links
  4. Layout:
    • Place callouts where they naturally fit the content flow
    • Avoid overusing callouts to maintain their impact
    • Group related callouts together when appropriate
Avatar
A versatile avatar component that displays user images with fallback options for initials or icons.
Avatar Group
A component for displaying a collection of avatars with automatic overflow handling and customizable appearance.