<!-- Basic skeleton -->
<div class="mdst-skeleton" style="width: 100%"></div>

<!-- Text lines -->
<div class="mdst-skeleton mdst-skeleton--text" style="width: 80%"></div>
<div class="mdst-skeleton mdst-skeleton--text" style="width: 100%"></div>
<div class="mdst-skeleton mdst-skeleton--text" style="width: 60%"></div>

<!-- Heading -->
<div class="mdst-skeleton mdst-skeleton--heading" style="width: 50%"></div>

<!-- Circle -->
<span class="mdst-skeleton mdst-skeleton--circle"></span>

<!-- Custom size via inline style -->
<div class="mdst-skeleton" style="width: 100%; height: 8rem"></div>

<!-- Card skeleton composition -->
<div style="display: flex; align-items: center; gap: 0.5rem">
  <span class="mdst-skeleton mdst-skeleton--circle" style="width: 2.5rem; height: 2.5rem"></span>
  <div style="flex: 1">
    <div class="mdst-skeleton mdst-skeleton--text" style="width: 60%"></div>
    <div class="mdst-skeleton mdst-skeleton--text" style="width: 40%"></div>
  </div>
</div>