Slot

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-slot"></div>

Schemes

<div class="tng-slot is-default"></div>
<div class="tng-slot is-checkered"></div>
<div class="tng-slot is-primary"></div>

Custom Text

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

<div class="tng-slot" style="--tng-slot-text: &quot;🚧&quot;"></div>

Custom Content

<div class="tng-slot">
  <i class="tng-icon icon-plus" aria-hidden="true"></i>
  <p class="tng-text-body">Add a component</p>
</div>

Add a component

Inside a frame

Inside a frame, the placeholder will automatically rendered the checkered scheme and use the frame’s aspect ratio as placeholder.

<div class="tng-frame">
  <div class="tng-slot"></div>
</div>