<div class="ab-layout"> <nav class="ab-sidebar">...</nav> <main class="ab-main">...</main> </div>

<nav class="ab-sidebar"> <div class="ab-sidebar-logo">Nome App</div> <div class="ab-sidebar-section">Sezione</div> <a class="ab-sidebar-link active">Attivo</a> <a class="ab-sidebar-link">Link</a> </nav>

<div class="ab-page-header"> <h1>Titolo</h1> <div class="ab-page-actions"> <button class="ab-btn ab-btn-primary">+ Nuovo</button> </div> </div>

<button class="ab-btn ab-btn-primary">Primary</button> <button class="ab-btn ab-btn-danger">Elimina</button> <button class="ab-btn ab-btn-sm">Small</button>

<div class="ab-cards"> <div class="ab-card"> <div class="ab-card-img" style="background-image:url(...)"></div> <div class="ab-card-body"> <h3 class="ab-card-title">Titolo</h3> <div class="ab-card-meta"><span class="ab-badge">tag</span></div> <div class="ab-card-details"><span>info</span></div> <p class="ab-card-text">Anteprima...</p> <div class="ab-card-footer"><button class="ab-btn">Azione</button></div> </div> </div> </div>

<div class="ab-table-wrap"> <table class="ab-table"> <thead><tr><th>Colonna</th></tr></thead> <tbody><tr><td>Dato</td></tr></tbody> </table> </div> Varianti: ab-table-striped, ab-table-compact

<form class="ab-form"> <div class="ab-form-grid"> <div class="ab-field"> <label class="ab-label">Nome</label> <input class="ab-input"> </div> <div class="ab-field ab-form-grid-full"> <label class="ab-label">Note <span class="ab-label-hint">opzionale</span></label> <textarea class="ab-textarea"></textarea> </div> </div> <div class="ab-form-actions">...</div> </form>

<label class="ab-toggle"> <input type="checkbox"> <span class="ab-toggle-slider"></span> <span>Attivo</span> </label>

<span class="ab-badge ab-badge-success">Attivo</span> Varianti: success, danger, warning, info, neutral, facile, media, difficile

<dl class="ab-kv"> <dt>Chiave</dt><dd>Valore</dd> <dt>Stato</dt><dd><span class="ab-badge">tag</span></dd> </dl>