diff --git a/examples/gno.land/r/demo/markdown_test/markdown.gno b/examples/gno.land/r/demo/markdown_test/markdown.gno
index 140005f643d..c6628f09d0c 100644
--- a/examples/gno.land/r/demo/markdown_test/markdown.gno
+++ b/examples/gno.land/r/demo/markdown_test/markdown.gno
@@ -178,15 +178,32 @@ It is a pity, but markdown does **not** work in here for most markdown parsers.
Components
==========
+Components are customized extended markdown markups that help you to enrich your content with more containers and styles. Components must be started with three colons ` + "`:::`" + `. As you'll see, some may be inline and other need a colon closing tag. Markdown components are rendered in plain HTML/CSS, meaning you can use only HTML with CSS classes to emulate these components, without using the extended markdown syntax.
+
Jumbotron component
-------------------
A Jumbotron is a layout component used to showcase key messages.
+_Using makdown:_
+
+
+
+_Render:_
:::jumbotron
-## Jumbotron title
+### Jumbotron title
This is a Jumbotron component you can fill with regular markdown.
@@ -197,6 +214,21 @@ Stack component
Stack is a layout component used to group elements together and apply a space between them. For example, it is usefull with grouped links.
+_Using makdown:_
+
+
+
+_Render:_
+
:::stack
[Stack link 1](/)
[Stack link 2](/)
@@ -207,6 +239,22 @@ Box component
Box is the most abstract component that renders a div element. It is used as a group component.
+_Using makdown:_
+
+
+
+_Render:_
+
:::box
**This content is in a box**
:::/box
@@ -219,6 +267,31 @@ Columns is a layout for managing columns layouts. It takes the numb of cols you
*Nested columns are not currently allowed*
+_Using makdown:_
+
+
+
+_Render:_
+
:::columns(2)
:::box
@@ -382,6 +455,22 @@ Button is single line component that takes few arguments: the content value as f
_Note that arguments are separated by comas and you can use quotes to include comas within argument._
+_Using makdown:_
+
+
` + ":::button(about, https://gno.land)/" + `
+
+or
+
+
` + ":::button(Plain button)/" + `
+
+
+
+_Using HTML:_
+
+
+
+_Render:_
+
:::button("Link button with comma, needs quotes", https://gno.land)/
:::button(Plain button)/
@@ -393,6 +482,22 @@ Accordions display a list of high-level options that can expand/collapse to reve
*Todo: add argument to set the state at first (open or closed)*
+_Using makdown:_
+
+
+
+_Render:_
+
:::tabs(1st tab button text, 2nd tab button text)
:::box
@@ -424,6 +568,21 @@ Alert component
Alerts are used to communicate a state that affects a system, feature or page. The component take the alert style as argument: "warning", "info", "danger", "success".
+_Using makdown:_
+
+
+
+_Render:_
+
:::alert(warning)
Warning content
:::/alert
@@ -445,6 +604,25 @@ Breadcrumb component
Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website. It requires to be filled by an ordered list.
+_Using makdown:_
+
+
+
+
+_Render:_
+
:::breadcrumb
1. [Home](https://gno.land)
@@ -458,6 +636,29 @@ Dropdown component
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. It requires to be filled by a list and takes the dropdown text button as argument.
+_Using makdown:_
+
+
+
+_Render:_
+
:::dropdown(Dropdown - click here)
- [Home](https://gno.land)
@@ -471,6 +672,27 @@ Pagination component
Breadcrumbs is a navigation component that helps users navigate between website pages. It requires to be filled by an ordered list and can take the description of the navigation (for a11y purpose) as argument.
+_Using makdown:_
+
+
+
+_Using HTML:_
+
+
+
+_Render:_
+
:::pagination(Article pages)
- [1](/)
@@ -487,6 +709,20 @@ This form component help you create forms. It has to be filled with dedicated co
- First argument is the Action (eg. link: "https://gno.land")
- Second argument is the Method (eg. "post", "get", ...)
+_Using makdown:_
+
+
+
+_Using HTML:_
+
+
+
+_Render (check bellow):_
+
:::form(/, get)
### Form inputs components
@@ -500,6 +736,20 @@ Input component is a component that is used to get user input in a text field. I
You can insert text inside the component and it will be used as placeholder content. If not, you can use the shorthand component declaration by adding a "/" direclty after the arguments (see date input component declaration bellow).
+_Using makdown:_
+
+
` + ":::input(text, Label, Text)/" + `
+
` + ":::input(number, Label, 10, 3)/" + `
+
+_Using HTML:_
+
+
+
+
+
+
+_Render:_
+
:::input(text, Label, Text)/
:::input(number, Label, 10, 3)/
@@ -513,6 +763,19 @@ You can insert text inside the component and it will be used as placeholder cont
The Textarea component allows you to easily create multi-line text inputs. The arguments are the optional label text content and placeholder.
+_Using makdown:_
+
+
` + ":::textarea(Label, Placeholder)/" + `
+
+_Using HTML:_
+
+
+
+
+
+
+_Render:_
+
:::textarea(Label, Placeholder)/
### Form check components
@@ -521,6 +784,37 @@ Checkbox component is used in forms when a user needs to select multiple values
*Todo: add a way to preselect options*
+_Using makdown:_
+
+
+
+_Render:_
+
:::check(radio, Radio Label)
- Radio 1
@@ -541,6 +835,28 @@ Checkbox component is used in forms when a user needs to select multiple values
Similar to the previous one, select component is a component that allows users pick a value from predefined options. The argument (optional) is the label text content.
+_Using makdown:_
+
+
+
+_Render:_
+
:::select(Select Label)
- Select 1
@@ -553,6 +869,16 @@ Similar to the previous one, select component is a component that allows users p
This component is a button component dedicated to form control. Depending on the argument, it can be used to submit, reset... a form. The component takes the button type as firt argument and the button value as second argument.
+_Using makdown:_
+
+