Skip to main content

Element Components

Element components are used to render text, links, and other simple elements.

Heading​

component: element
props:
  options:
    className: "text-primary"
    element: "h1" # h1, h2, h3, h4, h5, h6
  value: "Hello World"

Paragraph​

component: element
props:
  type: "paragraph" # paragraph, span, div
  options:
    className: "text-primary"
  value: "Hello World"

Label​

component: element
props:
  type: "label" # paragraph, span, div
  options:
    className: "text-primary"
  value: "Hello World"

Quote​

component: element
props:
  type: "blockquote"
  options:
    className: "text-primary"
  value: "Hello World"

Rich Text​

component: element
props:
  type: "div"
  options:
    className: "text-primary"
  value: >
    Hello World <br>
    This is a <b>new line</b> <br>
    This is another new line <br>
component: element
props:
  type: "link"
  options:
    className: "text-primary"
    href: "https://www.example.com"
  value: "Hello World"

List​

component: element
props:
  type: "ul" # ul, ol
  options:
    className: "text-primary"
  value:
    - "Item 1"
    - "Item 2"
    - "Item 3"
children:
  - component: element
    props:
      type: "li"
      value: "Item 1"
  - component: element
    props:
      type: "li"
      value: "Item 2"
  - component: element
    props:
      type: "li"
      value: "Item 3"