ComboStrap UI - Heading

An heading has two different functions:

• the first one is structural and generates the outline (structure of the document. The table of content (TOC) is created from this structure.
• the second one is semantic and defines the title of a block component.

The rule is simple, when a heading is not in a component, it's a structural heading, otherwise, it's a title component.

To define an heading, you can use the following heading syntax.

The wiki heading start with 6 hashtag # characters for the level 1 (h1) and goes down by one.

The higher the level, the higher the visual emphasis.

====== Headline Level 1 <icon name="bs:card-heading"/> ======
===== Headline Level 2 =====
==== Headline Level 3 ====
=== Headline Level 4 ===
== Headline Level 5 ==

To facilitate the writing, you can use the following keyboard shortcuts:

• select the heading text
• and type one of the following keyboard shortcuts:
  • alt+8 for the same level than the previous heading
  • alt+9 for a level lower than the previous heading
  • alt+0 for a level higher than the previous heading

The markdown atx heading start with 1 or more hashtag # characters.

• The level 1 heading (the title) starts with #,
• section headings with ##,
• subheads with ###,
• and so on.

This is:

• the best syntax for writing because you just need to adds up the number of hashtag to get the wanted heading level.
• the worst syntax visually because a lower level will have more emphasis than an higher

# Headline Level 1 <icon name="bs:card-heading"/>
## Headline Level 2 <icon name="bs:card-heading"/>
### Headline Level 3
#### Headline Level 4 
##### Headline Level 5 
###### Headline Level 6

heading is a Super set HTML component and therefore, you can then apply all styling attributes.

<heading type>
Heading
</heading >

where:

• type is:
  • h1 to h6 for HTML heading styling
  • d1 to d4 for bigger heading display (used mostly in landing page)
• level is the heading level (ie 1 to 6, default to the number in the type)

Example:

• HTML Heading

<heading h1>Heading 1</heading>
<heading h2>Heading 2</heading>
<heading h3>Heading 3</heading>
<heading h4>Heading 4</heading>
<heading h5>Heading 5</heading>
<heading h6>Heading 5</heading>

• Display Heading

<heading d1>Heading 1</heading>
<heading d2>Heading 2</heading>
<heading d3>Heading 3</heading>
<heading d4>Heading 4</heading>