Custom HTML Elements

LSSG provides custom HTML elements that you can use directly in your markdown files to create rich layouts and components.

<centered>

Center content horizontally.

Markdown:

<centered>
This content will be centered.
</centered>

Result:

<links>

Create styled link collections in different layouts.

Links Boxes

Display links as styled boxes in a navigation layout.

Markdown:

<links boxes>
[Project 1](./project1.md "First project")
[Project 2](./project2.md)
[Project 3](./project3.md "Third project")
</links>

Result:

Links Grid

Display links as a grid of cards with optional cover images.

Markdown:

<links grid>
[![Bear Image](./custom_elements/bear.jpg) LMarkdown](./lmarkdown.md)
[![Bear Image](./custom_elements/bear.jpg) Architecture](./architecture.md)
[Tutorials](./tutorials.md)
</links>

Result:

LMarkdown

Architecture

Tutorials

Notes:

• If link content starts with an image, it becomes the cover
• Cover images are automatically scaled (width: 100%, height: auto)
• SVG covers get viewBox attributes for proper scaling

<carousel>

Create an image carousel with a main display and thumbnails.

Markdown:

<carousel>
![Image 1](image1.jpg)
![Image 2](image2.jpg)
![Image 3](image3.jpg)
![Image 4](image4.jpg)
</carousel>

Result:

Notes:

• First image appears in main display
• Remaining images appear as thumbnails
• Items are clickable with modal functionality

<sitetree>

Generate a hierarchical site navigation tree.

Markdown:

<sitetree>

With ignore list:

<sitetree ignore="404,blog">

Result:

Attributes: Notes:

• Folders are sorted before files
• Within each group, items are sorted alphabetically
• Folders display with trailing /