PromoBadge Component

Promotional badge component for highlighting special offers, discounts, or announcements. Perfect for hero sections and marketing campaigns.

Overview

The PromoBadge component creates eye-catching promotional badges that can be used to highlight special offers, limited-time deals, or important announcements. It features customizable styling, icons, and animation options.

Preview

Basic Usage

<template>
  <div class="hero-section">
    <PromoBadge 
      value="50% OFF"
      text="Limited Time Offer"
      icon="heroicons:fire"
    />
  </div>
</template>

<script setup lang="ts">
import PromoBadge from '@/components/PromoBadge.vue'
</script>

Features

• Customizable Content - Value, text, and icon configuration
• Multiple Variants - Different color schemes and styles
• Animation Support - Pulse, bounce, and glow effects
• Responsive Design - Mobile-optimized display
• Internationalization - i18n support for text content

Component API

Props

Prop	Type	Default	Description
value	string	undefined	Promotional value (e.g., "50% OFF")
text	string	undefined	Promotional text
icon	string	undefined	Icon name
variant	'default' | 'success' | 'warning' | 'error'	'default'	Color variant
animated	boolean	true	Enable animations

Documentation

This component documentation is currently being written. It will include:

• Complete styling variants
• Animation options
• Integration examples
• Customization guide

Related Components

• HeroText - Hero section text