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

# Headline

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

The `AwHeadline` component is a semantic heading wrapper with consistent styling.

## Overview

`AwHeadline` provides a styled heading component that can render as different HTML heading tags (h1-h6). It applies consistent typography and spacing.

## Usage

### Basic Example

```markup
<AwHeadline>Main Heading</AwHeadline>
```

### With Custom Tag

```markup
<AwHeadline tag="h1">Page Title</AwHeadline>
```

### Different Heading Levels

```markup
<AwHeadline tag="h1">Level 1</AwHeadline>
<AwHeadline tag="h2">Level 2</AwHeadline>
<AwHeadline tag="h3">Level 3</AwHeadline>
```

## API

### Props

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

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Heading text content | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwSubHeadline` - Sub-heading component
- `AwTitle` - Title component
- `AwPage` - Page component that uses headlines

## Notes

- **Import Method:** Global - Available as atom component
- Default tag is `h3`
- Use appropriate heading levels for semantic HTML structure
- Commonly used for section headings and page titles