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:

This content will be centered.

`<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. Supports images and 3D model-viewer elements.

Markdown:

<carousel>
<model-viewer alt="JBL Holder Band" src="./models/band.gltf" ar shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
<model-viewer alt="JBL Holder Frame" src="./models/jbl_holder.gltf" ar shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
![Image 1](image1.jpg)
![Image 2](image2.jpg)
</carousel>

Result:

`<model-viewer>`

Display interactive 3D models using Google's model-viewer component. Supports GLTF/GLB formats with camera controls, AR capabilities, and auto-rotation.

Any resource links referenced in model-viewer attributes are preserved in the rendered output.

Markdown:

<centered>
  <model-viewer 
    style="height:400px"
    alt="JBL Speaker Holder" 
    src="./models/jbl_holder.gltf" 
    ar 
    shadow-intensity="1" 
    camera-controls 
    touch-action="pan-y">
  </model-viewer>
</centered>

Result:

Common Attributes: