ComboStrap UI - Heading

About

An heading has two different functions:

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

If you search the title of a page, see the page ComboStrap Page Metadata - Title

Syntax

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

Wiki

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

Markdown

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

Marki

heading is a marki syntax. You can therefore apply all styling attributes (such as adding an id if you want to specify your fragment)

<heading type level=1-6>
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>
Powered by ComboStrap