Placeholder

This element creates a gray box with a centered placeholder. It can be used to visualize where content will be placed in a layout. The element will automatically adjust its size to fill its wrapper element.

<div class="tng-placeholder"></div>

With Text

<div class="tng-placeholder">[TBD]</div>

[TBD]

Custom Property

You can also set the custom property --tng-placeholder-text to change the placeholder text.

<div
  class="tng-placeholder"
  style="--tng-placeholder-text: &quot;[TBD]&quot;"
></div>

Inside a frame

Inside a frame, the placeholder will automatically use the frame’s aspect ratio as placeholder.

<div class="tng-frame is-1-1">
  <div class="tng-placeholder"></div>
</div>