<VeltWireframe>
    <VeltCommentPinWireframe>
        {/* Ghost Comment Indicator */}
        <VeltCommentPinWireframe.GhostCommentIndicator>
            <div>
                <img src="icon-image.png"/>
            </div>
        </VeltCommentPinWireframe.GhostCommentIndicator>
        {/* Index */}
        <VeltCommentPinWireframe.Index/>
        {/* Private Comment Indicator */}
        <VeltCommentPinWireframe.PrivateCommentIndicator/>
        {/* Triangle */}
        <VeltCommentPinWireframe.Triangle/>
        {/* Unread Comment Indicator */}
        <VeltCommentPinWireframe.UnreadCommentIndicator/>
    </VeltCommentPinWireframe>
</VeltWireframe>

Adding Custom HTML

You can add additional HTML into the component by inserting HTML into the wireframe.

In this example, we add an image as a child to the Ghost Comment Indicator subcomponent:

<VeltWireframe>
   <VeltCommentPinWireframe>
        {/* Ghost Comment Indicator */}
        <VeltCommentPinWireframe.GhostCommentIndicator>
            <div>
                <img src="icon-image.png"/>
            </div>
        </VeltCommentPinWireframe.GhostCommentIndicator>
    </VeltCommentPinWireframe>
</VeltWireframe>