Header

The <auro-header> component is a simple component for rendering page or content headers without having to deal with font styling. Simply choose the level of the header want and the style type.

The auro-header component is able to take any combination of options for heading levels and display options. See Auro's header usage guidelines for additional examples sans web component dependency.

auro-header use cases

The <auro-header> element should be used in situations where users may:

• page header
• content / paragraph header

Example(s)

The auro-header will default to the h1 element with the header--display style.

<auro-header>Hello World!</auro-header>

Recommended Use and Version Control

There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the auro-header custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our AuroHeader.register(name) method and pass in a unique name.

import './src/auro-header';

AuroHeader.register('custom-header');

This will create a new custom element that you can use in your HTML that will function identically to the auro-header element.

<custom-header>Hello World!</custom-header>