Hero Subheader

<pa-hero-subheader> | PaHeroSubheader

A subheader component for hero sections that provides descriptive text below the main header. Supports links and router navigation.

Usage

Streamline your payment processing workflow

<template>
  <pa-hero-subheader label="Streamline your payment processing workflow" />
</template>

Examples

Basic Usage

Simple, secure, and reliable payment solutions

<template>
  <pa-hero-subheader label="Simple, secure, and reliable payment solutions" />
</template>

With External Link

Learn more about our services

<template>
  <pa-hero-subheader 
    label="Learn more about our services" 
    href="https://example.com/services"
  />
</template>

With Router Link

Go to Dashboard

<template>
  <pa-hero-subheader 
    label="Go to Dashboard" 
    to="/dashboard"
  />
</template>

Complete Hero Section

Payment Complete

Your transaction has been processed successfullyView Transaction Details

<template>
  <div class="hero-section">
    <pa-hero-icon size="lg" variant="success">
      <pa-icon name="check-circle" />
    </pa-hero-icon>
    <pa-hero-header label="Payment Complete" />
    <pa-hero-subheader label="Your transaction has been processed successfully" />
    <pa-hero-subheader label="View Transaction Details" to="/transactions" />
  </div>
</template>

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

Importing

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

Properties

Property	Type	Default	Description
label	String	''	The subheader text content (required)
to	String	undefined	Vue Router path for internal navigation
href	String	undefined	External URL for links

Dependencies

• pa-hero-header - Typically used together in hero sections
• pa-hero-icon - Commonly paired in hero layouts
• Vue Router - Required when using the to prop