Hero Icon

<pa-hero-icon> | PaHeroIcon

A container component for displaying icons in hero sections with variant styling and size options. Provides consistent icon presentation for hero layouts.

Usage

<template>
  <pa-hero-icon>
    <pa-icon icon="credit-card" />
  </pa-hero-icon>
</template>

Examples

Basic Usage

<template>
  <pa-hero-icon>
    <pa-icon icon="plus-solid" />
  </pa-hero-icon>
</template>

With Variants

<template>
  <div class="icon-variants">
    <pa-hero-icon variant="primary">
      <pa-icon icon="star-solid" />
    </pa-hero-icon>
    <pa-hero-icon variant="success">
      <pa-icon icon="check-solid" />
    </pa-hero-icon>
    <pa-hero-icon variant="warning">
      <pa-icon icon="arrow-left-solid" />
    </pa-hero-icon>
    <pa-hero-icon variant="danger">
      <pa-icon icon="info-circle-solid" />
    </pa-hero-icon>
  </div>
</template>

<style scoped>
.icon-variants {
  display: flex;
  gap: 1rem;
  align-items: center;
}
</style>

Size Options

<template>
  <div class="icon-sizes">
    <pa-hero-icon size="sm" variant="primary">
      <pa-icon icon="circle-solid" />
    </pa-hero-icon>
    <pa-hero-icon size="md" variant="primary">
      <pa-icon icon="circle-solid" />
    </pa-hero-icon>
    <pa-hero-icon size="lg" variant="primary">
      <pa-icon icon="circle-solid" />
    </pa-hero-icon>
  </div>
</template>

<style scoped>
.icon-sizes {
  display: flex;
  gap: 1rem;
  align-items: center;
}
</style>

In Complete Hero Section

Secure Transactions

Your payments are protected with industry-leading security

<template>
  <div class="hero-section">
    <pa-hero-icon size="lg" variant="success">
      <pa-icon icon="check-circle-solid" />
    </pa-hero-icon>
    <pa-hero-header label="Secure Transactions" />
    <pa-hero-subheader label="Your payments are protected with industry-leading security" />
  </div>
</template>

<style scoped>
.hero-section {
  text-align: center;
  padding: 2rem;
  background: var(--vp-c-bg-soft);
  border-radius: 8px;
}
</style>

Importing

import { PaHeroIcon } from '@payadvantage/ui-components'

Slots

Slot Name	Description
default	Icon content, typically a pa-icon component

Properties

Property	Type	Default	Description
variant	String	null	Visual variant: primary, success, warning, danger
size	String	null	Icon size: sm, md, lg (defaults to md)

Dependencies

• Icon - Required for icon content
• Hero Header - Commonly used together in hero sections
• Hero Subheader - Typically paired in hero layouts