Custom Placeholder Components

Placeholder

<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

<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>