Custom Placeholder Components
Placeholder
<![CDATA[
<div style="display: flex; gap: 20px ">
<div class="example">
<div class="placeholder" style="width: 100%; height: 200px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div style="width: 100%; display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
<div style="display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
<div style="display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
</div>
<div class="example">
<div class="placeholder" style="width: 100%; height: 200px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div style="width: 100%; display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
<div style="display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
<div style="display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
</div>
</div>
]]>
Placeholder Circular
<![CDATA[
<div style="display: flex; gap: 20px ">
<div class="example">
<div class="placeholder placeholder--circular" style="width: 300px; height: 300px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div style="width: 100%; display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
<div style="display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
</div>
</div>
<div class="example">
<div class="placeholder placeholder--circular" style="width: 300px; height: 300px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div style="width: 100%; display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder" style="width: 100%; height: 40px;"></div>
<div class="placeholder" style="width: 100%; height: 40px;"></div>
</div>
<div style="display: flex; gap: 16px; flex-grow: 1;">
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
<div class="placeholder placeholder--circular" style="width: 40px; height: 40px;"></div>
</div>
</div>
</div>
]]>