ux-header

Make headers

<ux-header> is an internal helper component created for ractive-foundation.


Use Cases Manifest Header - Level 1Header - Level 2Header - Level 3Header - Level 4Header - Level 5Header - Level 6
    {{#events.uxHeader_37}}
  • {{this}}
  • {{/}}

	{
    "level": "1",
    "id": "h1Id",
    "class": "h1Class",
    "ariaLabel": "Header Level 1",
    "content": "Header Level 1"
}
    {{#events.uxHeader_38}}
  • {{this}}
  • {{/}}

	{
    "level": "2",
    "id": "h2Id",
    "class": "h2Class",
    "ariaLabel": "Header Level 2",
    "content": "Header Level 2"
}
    {{#events.uxHeader_39}}
  • {{this}}
  • {{/}}

	{
    "level": "3",
    "id": "h3Id",
    "class": "h3Class",
    "ariaLabel": "Header Level 3",
    "content": "Header Level 3"
}
    {{#events.uxHeader_40}}
  • {{this}}
  • {{/}}

	{
    "level": "4",
    "id": "h4Id",
    "class": "h4Class",
    "ariaLabel": "Header Level 4",
    "content": "Header Level 4"
}
    {{#events.uxHeader_41}}
  • {{this}}
  • {{/}}

	{
    "level": "5",
    "id": "h5Id",
    "class": "h5Class",
    "ariaLabel": "Header Level 5",
    "content": "Header Level 5"
}
    {{#events.uxHeader_42}}
  • {{this}}
  • {{/}}

	{
    "level": "6",
    "id": "h6Id",
    "class": "h6Class",
    "ariaLabel": "Header Level 6",
    "content": "Header Level 6"
}

Semantic Data Model
class - Extra classes to apply to header
id - The id for the header
content - The content of the link if isDataModel is used
level - The heading level for the header