Hero Subheader Group

<pa-hero-subheader-group> | PaHeroSubheaderGroup

A container component for grouping multiple hero subheaders together. Provides consistent spacing and layout for related subheader content.

Usage

First line of descriptionSecond line of description

<template>
  <pa-hero-subheader-group>
    <pa-hero-subheader label="First line of description" />
    <pa-hero-subheader label="Second line of description" />
  </pa-hero-subheader-group>
</template>

Examples

Basic Grouping

Streamline your payment workflowAccept multiple payment methods securelyGet detailed analytics and reporting

<template>
  <pa-hero-subheader-group>
    <pa-hero-subheader label="Streamline your payment workflow" />
    <pa-hero-subheader label="Accept multiple payment methods securely" />
    <pa-hero-subheader label="Get detailed analytics and reporting" />
  </pa-hero-subheader-group>
</template>

Mixed Content with Links

Welcome to the new payment experienceLearn more about our featuresGet started today

<template>
  <pa-hero-subheader-group>
    <pa-hero-subheader label="Welcome to the new payment experience" />
    <pa-hero-subheader label="Learn more about our features" href="/features" />
    <pa-hero-subheader label="Get started today" to="/signup" />
  </pa-hero-subheader-group>
</template>

Complete Hero Layout

Payment Solutions

Accept payments from anywhere in the worldSecure, fast, and reliable processingStart processing payments today

<template>
  <div class="hero-section">
    <pa-hero-icon size="lg" variant="primary">
      <pa-icon icon="credit-card" />
    </pa-hero-icon>
    <pa-hero-header label="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="Start processing payments today" to="/get-started" />
    </pa-hero-subheader-group>
  </div>
</template>

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

Importing

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

Slots

Slot Name	Description
default	Container for pa-hero-subheader components

Properties

This component has no props - it serves as a simple container with consistent styling.

Dependencies

• pa-hero-subheader - Intended to contain multiple hero subheader components
• pa-hero-header - Commonly used together in hero sections
• pa-hero-icon - Typically paired in complete hero layouts