---
metaTitle: Sub Headline component | AwesCode UI
meta:
  - name: description
    content: The <AwSubHeadline /> component is used to render Sub Headline - UI Vue component for AwesCode UI.
title: Sub Headline
---

# Sub Headline

**Category:** Atom | **Import:** Global

The `AwSubHeadline` component is a semantic sub-heading wrapper with consistent styling.

## Overview

`AwSubHeadline` provides a styled sub-heading component that can render as different HTML heading tags (h4-h6). It applies consistent typography and spacing for secondary headings.

## Usage

### Basic Example

```markup
<AwSubHeadline>Sub Heading</AwSubHeadline>
```

### With Custom Tag

```markup
<AwSubHeadline tag="h5">Section Subtitle</AwSubHeadline>
```

### In Cards

```markup
<AwCard>
    <AwHeadline>Main Title</AwHeadline>
    <AwSubHeadline>Subtitle</AwSubHeadline>
    <p>Content</p>
</AwCard>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| tag | HTML heading tag (h4-h6) | `String` | `false` | `'h4'` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Sub-heading text content | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwHeadline` - Main heading component
- `AwTitle` - Title component
- `AwCard` - Card component that uses sub-headlines

## Notes

- **Import Method:** Global - Available as atom component
- Default tag is `h4`
- Use for secondary headings and section subtitles
- Maintains semantic HTML structure with appropriate heading levels