Headings

### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Emphasis

This is **bold** text.
This is _italic_ text.
This is ***bold and italic*** text.
This is ~~strikethrough~~ text.
This is <mark>highlighted</mark> text.
This is `marked` text. || This is <code>marked</code> text. || This is {{< highlight md "hl_inline=true" >}}marked{{< /highlight >}} text.

This is bold text.

This is italic text.

This is bold and italic text.

This is strikethrough text.

This is highlighted text.

This is marked text.

Horizontal Lines

___, ---, *** three of them create the <hr> tag




Abbr

{{< abbr "HTML" "HyperText Markup Language" >}}
HTML

Color Text

This is a {{< color color="blue" text="blue text" >}}
This is a <span style="color:blue">blue text</span>

This is a {{< color color="green" text="green text" >}}
This is a <span style="color:green">green text</span>

This is a {{< color color="red" text="red text" >}}
This is a <span style="color:red">red text</span>

This is a {{< color color="orange" text="orange text" >}}
This is a <span style="color:orange">orange text</span>

This is a {{< color color="theme" text="theme text" >}}
This is a <span>theme text</span>

This is a blue text

This is a green text

This is a red text

This is a orange text

This is a theme text

Buttons

{{< button content="Small" size="small" link="#" >}}
{{< button content="Normal" size="normal" link="#" >}}
{{< button content="Large" size="large" link="#" >}}

{{< button color="red" icon="bx bxs-home" content="Red Button" link="#" >}}
{{< button color="green" icon="bx bxs-car" content="Green Button" link="#" >}}
{{< button color="blue" icon="bx bxs-book" content="Blue Button" link="#" >}}
{{< button color="orange" icon="bx bxs-search" content="Orange Button" link="#" >}}

{{< button-outline color="red" icon="bx bxs-home" content="Red Button" link="#" >}}
{{< button-outline color="green" icon="bx bxs-car" content="Green Button" link="#" >}}
{{< button-outline color="blue" icon="bx bxs-book" content="Blue Button" link="#" >}}
{{< button-outline color="orange" icon="bx bxs-search" content="Orange Button" link="#" >}}

Small Normal Large

  Red Button   Green Button   Blue Button   Orange Button

Red Button Green Button Blue Button Orange Button

Notice

{{< notice info >}}
This is a notice info text.
{{< /notice >}}

{{< notice success >}}
This is a notice success text.
{{< /notice >}}

{{< notice warning >}}
This is a notice warning text.
{{< /notice >}}

{{< notice error >}}
This is a notice error text.
{{< /notice >}}
This is a notice info text.
This is a notice success text.
This is a notice warning text.
This is a notice error text.

Text Layout

Text left
Text center
Text right

Lists

Unordered Lists

- Item 1
- Item 2
- Item 3
  • Item 1
  • Item 2
  • Item 3

Ordered Lists

1. First item
2. Second item
3. Third item
  1. First item
  2. Second item
  3. Third item

Nesting Lists

- Main item
    - Sub-item 1
    - Sub-item 2
        - Sub-sub-item 1
        - Sub-sub-item 2
    - Sub-item 3
- Another main item
  • Main item
    • Sub-item 1
    • Sub-item 2
      • Sub-sub-item 1
      • Sub-sub-item 2
    • Sub-item 3
  • Another main item

Task Lists

- [ ] Task 1
  - [x] Task 1.1 (completed)
  - [ ] Task 1.2
- [ ] Task 2
- [x] Task 3
  • Task 1
    • Task 1.1 (completed)
    • Task 1.2
  • Task 2
  • Task 3

Definition Lists

**Term 1:**
: Definition of Term 1

**Term 2:**
: Definition of Term 2
Term 1:
Definition of Term 1
Term 2:
Definition of Term 2

Quote

{{< quote author="Albert Einstein" >}}
There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.
{{< /quote >}}

There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.

~ Albert Einstein
Copied!

Blockquotes

> Blockquotes can also be nested...
> > ...by using additional greater-than signs right next to each other or with spaces between arrows.

<!-- or -->

{{< quote author="Someone" >}}
Blockquotes can also be nested...
> ...by using additional greater-than signs right next to each other or with spaces between arrows.
{{< /quote >}}

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other or with spaces between arrows.

~ Someone
Copied!

Icons & Emojies

<i class='bx bx-rotate-left'></i>
<i class='bx bx-check'></i>
<i class='bx bx-download'></i>
<i class='bx bx-star'></i>
<i class='bx bx-file'></i>
<i class='bx bxs-camera-movie'></i>
<i class='bx bxs-lock-alt'></i>
<i class='bx bxl-windows'></i>
<i class='bx bxl-firefox'></i>
<i class='bx bxl-docker'></i>
<i class='bx bx-code'></i>
<i class='bx bx-code-curly'></i>
😀 😃 😄 😁 😆 😅 😂 🤣 🙂 🙃 😌 😍 🥰 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 

😀 😃 😄 😁 😆 😅 😂 🤣 🙂 🙃 😌 😍 🥰 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎

Table

Syntax     | Description | Test Text   
-----------|-------------|-------------------------------
Header     | Title       | Here's this
Paragraph  | Text        | And more
SyntaxDescriptionTest Text
HeaderTitleHere's this
ParagraphTextAnd more
[Link Text](https://gitlab.com/c4pt-mqs/c4pt-mqs.gitlab.io "Title of text")
Autoconverted link: https://gitlab.com/c4pt-mqs/c4pt-mqs.gitlab.io
<a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ">
{{< img src="http://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg" alt="Description of image 3" loading="lazy" width="100%" height="auto" >}}
</a>

Link Text

Autoconverted link: https://gitlab.com/c4pt-mqs/c4pt-mqs.gitlab.io

Image Link:

Description of image 3
[Shortcodes]({{< ref "shortcodes.md" >}})
[Shortcodes - Carousel]({{< relref "shortcodes/#carousel" >}})

Shortcodes

Shortcodes - Carousel

Footnotes

This is a sentence with a footnote[^1]. Here is some more text.
[^1]: This is the footnote text. It provides additional information or clarification related to the preceding sentence.

This is a sentence with a footnote1. Here is some more text.

Image

{{< img src="/img/content/examples/image_1.jpeg" alt="Description of image 1" loading="lazy" width="45%" height="auto" >}}
{{< img src="/img/content/examples/image_2.jpeg" alt="Description of image 2" loading="lazy" width="54%" height="auto" >}}
{{< img src="/img/content/examples/image_3.jpg" alt="Description of image 2" loading="lazy" width="100%" height="auto" >}}

Description of image 1 Description of image 2 Description of image 2

Audio

{{< audio name="sample_song" type="mp3" >}}
0:00
0:00

Video

{{< video "/video/sample_video.mp4" "100%" "auto" >}}

PDF

{{< pdf "/pdf/sample.pdf" >}}

Download File

[Open PDF](/pdf/sample.pdf)
[Open Video](/video/sample_video.mp4)

Open PDF

Open Video


  1. This is the footnote text. It provides additional information or clarification related to the preceding sentence. ↩︎