PayAdvantage UI Components

Appearance

Hero Components ​

The PayAdvantage UI hero components provide a complete system for building hero sections in your applications. Each component serves a specific purpose and can be used together to create engaging hero layouts.

Components Overview ​

Hero Header ​

<pa-hero-header> | PaHeroHeader

Displays prominent page titles with the last word emphasized in bold.

Hero Icon ​

<pa-hero-icon> | PaHeroIcon

Container for displaying icons in hero sections with variant styling and size options.

Hero Subheader ​

<pa-hero-subheader> | PaHeroSubheader

Provides descriptive text below the main header with support for links and navigation.

Hero Subheader Group ​

<pa-hero-subheader-group> | PaHeroSubheaderGroup

Container for grouping multiple hero subheaders with consistent spacing.

Complete Hero Example ​

Here's how all hero components work together:

vue
<template>
  <div class="hero-section">
    <pa-hero-icon size="lg" variant="primary">
      <pa-icon icon="credit-card" />
    </pa-hero-icon>
    <pa-hero-header label="Complete Payment Solutions" />
    <pa-hero-subheader-group>
      <pa-hero-subheader label="Accept payments from anywhere in the world" />
      <pa-hero-subheader label="Secure, fast, and reliable processing" />
      <pa-hero-subheader label="Get started today" to="/get-started" />
    </pa-hero-subheader-group>
  </div>
</template>

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

Importing All Hero Components ​

js
import { 
  PaHeroHeader,
  PaHeroIcon, 
  PaHeroSubheader,
  PaHeroSubheaderGroup
} from '@payadvantage/ui-components'

Common Usage Patterns ​

Basic Hero Section ​

vue
<template>
  <div class="hero">
    <pa-hero-icon variant="primary">
      <pa-icon icon="star-solid" />
    </pa-hero-icon>
    <pa-hero-header label="Welcome Message" />
    <pa-hero-subheader label="Description text" />
  </div>
</template>

Hero with Multiple Subheaders ​

vue
<template>
  <div class="hero">
    <pa-hero-header label="Feature Overview" />
    <pa-hero-subheader-group>
      <pa-hero-subheader label="Feature one description" />
      <pa-hero-subheader label="Feature two description" />
      <pa-hero-subheader label="Learn more" to="/features" />
    </pa-hero-subheader-group>
  </div>
</template>

Hero with Call-to-Action ​

vue
<template>
  <div class="hero">
    <pa-hero-icon size="lg" variant="success">
      <pa-icon icon="check-circle-solid" />
    </pa-hero-icon>
    <pa-hero-header label="Get Started Today" />
    <pa-hero-subheader label="Join thousands of satisfied customers" />
    <pa-hero-subheader label="Start your free trial" to="/signup" />
  </div>
</template>