# auro-header auro-header is a custom element to make using headers with the Auro Design System seamless and easy. ## Attributes | Attribute | Type | Description | |-----------|-----------|--------------------------------------------------| | [fixed](#fixed) | `Boolean` | Uses px values instead of rem | | [type](#type) | `String` | **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. | ## Properties | Property | Attribute | Type | Default | Description | |-----------|-----------|----------|-----------|--------------------------------------------------| | [color](#color) | `color` | `String` | | Allows user to pass in CSS custom property or direct hex value to change the color of the header | | [display](#display) | `display` | `String` | "display" | Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. | | [level](#level) | `level` | `String` | | Determines heading level for HTML element. Options are `1` - `6` | | [margin](#margin) | `margin` | `String` | | Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. | | [size](#size) | `size` | `String` | | Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. **DEPRECATED** the `xxxs` - `xxxl` options. | ## API Examples ### Basic The auro-header will default to the h1 element with the `header--display` style.
Hello World!
See code ```html Hello World! ``` ### Changing Header Styles #### Changing Header Size Use the `level` attribute to change the size of the `auro-header`. **Note**: Changing the header level does not change the header style. This example will output an h3 header element with the default header--display style.
Hello World!
See code ```html Hello World! ``` #### Changing Header Font Weight Use the `display` attribute to change the font weight of the `auro-header`. **Note**: Changing the header style does not change the size of the header. This example will output an h1 header element with the `header--display` style.
Hello World!
See code ```html Hello World! ``` ### Additional Header Examples Additional examples with various header `level` and `display` 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, the `auro-header` component supports adjusting either the `top`, `bottom` or `both` margins. This coupled with the `size` prop, developers have a [full range of options](https://auro.alaskaair.com/components/auro/header/api). The following example shows how you can update the `bottom` margin to use the `50` size setting. Also note the use of the util_stackMarginNone--top utility selector on the ol from [Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-layout-mixin-auro_spacing).
Hello World!
  1. ... thing
  2. thing ...
See code ```html Hello World!
  1. ... thing
  2. thing ...
``` The following example shows how you can update both margins to use the 400 size setting.
Hello World!
  1. ... thing
  2. thing ...
See code ```html Hello World!
  1. ... thing
  2. 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.
There has been an error
See code ```html
There has been an error
``` ### Direct Color Use If it's preferred not to wrap the header component in another element, use the `color` property to set the color value directly on the header element.
On the journey together
See code ```html On the journey together ``` ### Classic Environment Support One of the challenges of using a design system is coping with legacy CSS that surrounds the new component. While web components are encapsulated, things like `font-size` will pierce the shadow DOM. To help combat this, the `auro-header` component supports a fixed attribute. Setting `fixed` will over-ride the component's dependency on REM values and use pixel values instead. This feature should only to be used within environments where the REM values cannot be used.
On the journey together
See code ```html On the journey together ```