Different type of content

[SamKr]

Is it possible to use different types of content in the paragraphs?

All of them are constructed as follows:

 p2:
    heading: "Just in time for Hacktoberfest with JIT Tailwind."
    image: "images/pages/hacktoberfest.jpg"
    content:
      - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique. Nunc sodales nisl nec laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed lacinia hendrerit interdum. Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo diam, porttitor nec bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus, mattis risus vel, imperdiet enim. Donec fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci, porta ornare massa. Phasellus eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra lorem sit amet magna aliquet, et dignissim arcu eleifend."

Can we use anything other than text? For instance a multi-columned table to show different bulletpoints besides each other, instead of just vertically aligned text.

Thanks for sharing this theme, it's amazing!

[nusserstudios]

Yeah, you can easily do something like that:

p2:
heading: "Just in time for Hacktoberfest with JIT Tailwind."
image: "images/pages/hacktoberfest.jpg"
content:
- type: "text"
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique. Nunc sodales nisl nec laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed lacinia hendrerit interdum. Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo diam, porttitor nec bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus, mattis risus vel, imperdiet enim. Donec fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci, porta ornare massa. Phasellus eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra lorem sit amet magna aliquet, et dignissim arcu eleifend."
- type: "table"
columns:
- heading: "Column 1"
items:
- "Bullet point 1"
- "Bullet point 2"
- "Bullet point 3"
- heading: "Column 2"
items:
- "Bullet point 4"
- "Bullet point 5"
- "Bullet point 6"

[SamKr]

That is perfect, thanks for the detailed answer :)

[SamKr]

Hi @nusserstudios,

Because of personal reasons I've only just been able to pick this up. I tried implementing your sample code, and while it runs, the site's rendered layout doesn't change. I've searched for 'bullet point' in the source, but it's nowhere to be found.

This was the first version I tried:

  p2:
    heading: "Just in time for Hacktoberfest with JIT Tailwind."
    image: "images/pages/hacktoberfest.jpg"
    content:
    - type: "text"
      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at purus non enim commodo tincidunt vel in nulla. Aenean pretium dolor non ultricies bibendum. Etiam quis blandit enim. Nunc condimentum ut lorem in faucibus. Phasellus varius ligula et commodo tristique. Nunc sodales nisl nec laoreet vehicula. Donec velit nibh, sollicitudin at nulla a, egestas dignissim eros. Sed lacinia hendrerit interdum. Vestibulum pellentesque sem venenatis nisl tempor accumsan sit amet tempus felis. Mauris leo diam, porttitor nec bibendum id, tempus ac nulla. Etiam congue ornare erat at convallis. Donec in nisi dapibus, mattis risus vel, imperdiet enim. Donec fermentum sit amet tortor nec tincidunt. Nam nec lectus tortor. Nunc sit amet laoreet orci, porta ornare massa. Phasellus eget lorem mi. Nam eleifend ultricies sapien, quis mollis leo bibendum at. Quisque viverra lorem sit amet magna aliquet, et dignissim arcu eleifend."
    - type: "table"
      columns:
      - heading: "Column 1"
        items:
        - "Bullet point 1"
        - "Bullet point 2"
        - "Bullet point 3"
      - heading: "Column 2"
        items:
        - "Bullet point 4"
        - "Bullet point 5"
        - "Bullet point 6"

This doesn't change the layout at all.

Afterwards I tried it like this, just a table:

  p2:
    heading: "Just in time for Hacktoberfest with JIT Tailwind."
    image: "images/pages/hacktoberfest.jpg"
    content:
    - type: "table"
      columns:
      - heading: "Column 1"
        items:
        - "Bullet point 1"
        - "Bullet point 2"
        - "Bullet point 3"
      - heading: "Column 2"
        items:
        - "Bullet point 4"
        - "Bullet point 5"
        - "Bullet point 6"

This changed the layout into:

Anything I'm missing? Markup -> goldmark -> extensions -> table is set to true.