Hero Header

<pa-hero-header> | PaHeroHeader

A header component for hero sections that emphasizes the last word in bold. Used to create prominent page titles with visual emphasis on the final word.

Usage

Welcome to PayAdvantage

<template>
  <pa-hero-header label="Welcome to PayAdvantage" />
</template>

Examples

Basic Usage

Your Financial Solution

<template>
  <pa-hero-header label="Your Financial Solution" />
</template>

With Array of Words

Advanced Payment Processing

<template>
  <pa-hero-header :label="['Advanced', 'Payment', 'Processing']" />
</template>

<script setup>
import { ref } from 'vue'

const words = ref(['Advanced', 'Payment', 'Processing'])
</script>

In Hero Layout

Secure Payment Processing

Process payments with confidence and security

<template>
  <div class="hero-section">
    <pa-hero-icon size="lg" variant="primary">
      <pa-icon icon="credit-card" />
    </pa-hero-icon>
    <pa-hero-header label="Secure Payment Processing" />
    <pa-hero-subheader label="Process payments with confidence and security" />
  </div>
</template>

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

Importing

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

Properties

Property	Type	Default	Description
label	String | String[]	''	The header text. Can be a string or array of words. The last word will be emphasized in bold.
sfSelector	String	''	Selector for Salesforce integration

Dependencies

• Icon - Used in layout examples with hero icons
• Hero Icon - Commonly used together in hero sections
• Hero Subheader - Typically paired for complete hero sections