# auro-header
The `auro-header` element is a custom element to make using headers with the Auro Design System seamless and easy.
### Properties & Attributes
| Properties | Attributes | Modifiers | Type | Default | Description |
| ----------- | ----------- | --------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| level | level | | number | | Determines the semantic heading level of the HTML element. Options are `1` - `6`. |
| typography | typography | | string | | Determines the font of heading, Options are `heading` or `display`. |
| visualLevel | visualLevel | | number | `1` | Determines the visual appearance of the header. Options are `1` - `6`. |
| color | color | | string | | (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header. |
| display | display | | string | | (Deprecated) Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. |
| margin | margin | | string | | (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. |
| size | size | | string | | (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. |
### Methods
| Name | Parameters | Return | Description |
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
## Basic
See code
```html
Hello World!
```
## Property & Attribute Examples
### Changing Header Styles and Sizes
The `auro-header` component allows for flexible customization of both HTML semantics and visual appearance styles.
#### Header Level (HTML Semantics)
Use the `level` attribute to control the semantic heading level (`` through ``).
If `visualLevel` is not specified, `visualLevel` will default to the same value as `level`.
See code
```html
Hello World!
```
#### Header Style (Visual Appearance)
Use the `visualLevel` attribute to control the visual style of the header.
| visualLevel |
typography="heading" |
typography="display" |
|
1
|
Extra large heading
|
2 Extra large display
|
|
2
|
Large heading
|
Extra large display
|
|
3
|
Medium heading
|
Large display
|
|
4
|
Small heading
|
Medium display
|
|
5
|
Extra small heading
|
Small display
|
|
6
|
2 Extra small heading
|
Extra small display
|
See code
```html
| visualLevel |
typography="heading" |
typography="display" |
|
1
|
Extra large heading
|
2 Extra large display
|
|
2
|
Large heading
|
Extra large display
|
|
3
|
Medium heading
|
Large display
|
|
4
|
Small heading
|
Medium display
|
|
5
|
Extra small heading
|
Small display
|
|
6
|
2 Extra small heading
|
Extra small display
|
```
#### Typography to Heading CSS Class Mapping
The `visualLevel` attribute controls the visual style of the header by mapping to specific typography classes.
Below is how each `visualLevel` value corresponds to a typography class:
| visualLevel | `typography="heading"` | `typography="display"` |
|-----------------|---------------|---------------|
| `1` | `heading-xl` | `display-2xl` |
| `2` | `heading-lg` | `display-xl` |
| `3` | `heading-md` | `display-lg` |
| `4` | `heading-sm` | `display-md` |
| `5` | `heading-xs` | `display-sm` |
| `6` | `heading-2xs` | `display-xs` |
These classes apply consistent typography styles, including font size, line height, font weight, and more, ensuring uniform header presentation across components.
## Common Usage Patterns & Functional Examples
### Additional Header Examples
Additional examples with various header `level` and `visualLevel` options.
Hello World!
Hello World!
Hello World!
Hello World!
See code
```html
Hello World!
Hello World!
Hello World!
Hello World!
```
### Adjust Margins
In some cases the margin between elements may need to be adjusted. To do this, add margin using css style.
Hello World!
- ... thing
- thing ...
See code
```html
Hello World!
- ... thing
- thing ...
```
### Color Inheritance
If there is a CSS selector that has the color definition you want to use with the header, simply wrap the header in a `div` or `span` and the auro-header component will inherit the color.
See code
```html
```