<ul class="u-flex-vertical u-gap-24">
<li>
<section class="progress-bar">
<div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
<h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
<span class="icon-chart-bar" aria-hidden="true"></span>
<span class="text">Bandwidth</span>
</h3>
<p class="u-medium u-bold">50%</p>
</div>
<div class="progress-bar-container" style="--graph-size:50%"></div>
<div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
<span class="progress-bar-text-used">50.01GB</span>
<span class="progress-bar-text-max">100GB</span>
</div>
</section>
</li>
<li>
<section class="progress-bar">
<div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
<h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
<span class="icon-folder" aria-hidden="true"></span>
<span class="text">Storage</span>
</h3>
<p class="u-medium u-bold u-color-text-warning">85%</p>
</div>
<div class="progress-bar-container is-warning" style="--graph-size:85%"></div>
<div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
<span class="progress-bar-text-used">50.01GB</span>
<span class="progress-bar-text-max">100GB</span>
</div>
</section>
</li>
<li>
<section class="progress-bar">
<div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
<h3 class="body-text-1 u-flex u-cross-baseline u-gap-4">
<span class="icon-lightning-bolt" aria-hidden="true"></span>
<span class="text">Compute</span>
</h3>
<p class="u-medium u-bold u-color-text-danger">105%</p>
</div>
<div class="progress-bar-container is-danger" style="--graph-size:105%"></div>
<div class="u-flex u-gap-8 u-main-space-between u-cross-baseline">
<span class="progress-bar-text-used">3.50hrs</span>
<span class="progress-bar-text-max">100hrs</span>
</div>
</section>
</li>
</ul>