Headings

# This is h1 title
## This is h2 title
### This is h3 title
#### This is h4 title
##### This is h5 title

This is h1 title

This is h2 title

This is h3 title

This is h4 title

This is h5 title

---

Bold, italic

Notice: breakline tag must be used sometimes for a new line.

**This text is bold**
_This text is italic_
_**This is bold and italic**_

This text is bold
This text is italic
This is bold and italic

---

Link

[Post Office website](https://postofficesocial.com)

Post Office website

Add attributes using currly brackets:

[Post Office website](https://postofficesocial.com){target="_blank"}

Opens in new tab: Post Office website

---

Image

![](/images/holding-phone.webp)

---

Horizontal line

---

---

Regular list

Unordered list

- one
- two
- three

• one
• two
• three

Ordered list

1. one
2. two
3. three

1. one
2. two
3. three

---

Custom Components

All components located in folder ./components/content can be used in content .md files.

Card

::Card
  My card content
::

---

Custom bullets list

List - add icon from ./assets/icons folder as prop:

::List{icon="check"}
  - one
  - two
  - three
::

• one
• two
• three

If no icon added it will be numbered list:

::List
  - one
  - two
  - three
::

• 1
  one
• 2
  two
• 3
  three

---

Table

::DataTable
| Key | Type | Description |
|-----|------|-------------|
| 1 | Wonderful | Table |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |
::

---

Custom paragraph

Full width paragraph

::Paragraph{title="This is dummy paragraph title"}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.
::

Centered paragraph

Use prop "center" at the end.

::Paragraph{title="This is dummy paragraph title" center}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.
::

2 columns paragraph

Type two paragraphs and layout with 2 columns will be shown. Remove "center" prop.

::Paragraph{title="This is 2 columns dummy paragraph title"}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.
::

Horizontal paragraph

Use prop "horizontal" at the end.

::Paragraph{title="This is horizontal paragraph" horizontal}
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.
::

Centered list with icons

Notice: prop "titleCenter" should be added and the Paragraph component will be with centered title.

::Paragraph{title="Smarte funktioner smart gør det<br> nemt at afholde Live Salg" titleCenter}
  ::List{iconsBullets}
    - :ListIconsItem{icon="/images/duotone/chat.svg" title="Planlægning" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/chat.svg" title="Automatisk svar" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/warehouse.svg" title="Lagerstatus" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/chat.svg" title="Indkobskurv" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/inventory-flow.svg" title="Ordreoverblik" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/chat.svg" title="Afhentningsstatus" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/increase.svg" title="Print af produktliste" text="Det er en social oplevelse Det er en social opleverse"}
    - :ListIconsItem{icon="/images/duotone/chat.svg" title="Påmindelse om afhentning" text="Det er en social oplevelse Det er en social opleverse"}
  ::
::

ArticleWrap: add media to article header

ArticleWrap component has props: heroImage, heroVideo and hideBackButton

Four cases:

1. heroImage is set, image will be shown in article heading
2. heroVideo is set, video will be shown in article heading
3. both are set, video will be shown and heroImage will be poster for the video
4. none has been set, article will not have media in header

1st case
::ArticleWrap{heroImage="/images/blog/brand-marketing.jpeg"}
   ...content
::

2nd case
::ArticleWrap{heroVideo="/videos/hero-video.mp4"}
   ...content
::

3rd case
::ArticleWrap{heroImage="/images/blog/brand-marketing.jpeg" heroVideo="/videos/hero-video.mp4"}
   ...content
::

4th case
::ArticleWrap
   ...content
::