@ulu/frontend
Version:
A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op
35 lines (33 loc) • 1.41 kB
HTML
<!-- @ulu-demo
title: Standard Card Grid
description: A responsive grid that automatically fills rows with cards.
-->
<div class="card-grid">
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Card 1</h3><p>Content for the first card.</p></div></div>
</article>
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Card 2</h3><p>Content for the second card.</p></div></div>
</article>
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Card 3</h3><p>Content for the third card.</p></div></div>
</article>
</div>
<!-- @ulu-demo
title: Compact Card Grid
description: A grid with smaller minimum column widths and tighter gaps.
-->
<div class="card-grid card-grid--compact">
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Compact 1</h3></div></div>
</article>
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Compact 2</h3></div></div>
</article>
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Compact 3</h3></div></div>
</article>
<article class="card">
<div class="card__body"><div class="card__main"><h3 class="card__title">Compact 4</h3></div></div>
</article>
</div>