Introduction | TrueUI

Molecules | Components

Accumulator

Example

Select All
Olga Parsons
Lula McKinney
Christy Hampton
John Obrien
Edit Lopez
Winnie Bass
Debby Ross
Christina Larson
Arrow
Arrow
Select All
Billy Warren
Ronald Andrews
Lee Warner
Melvin Daniels
Adam Pittman
David Chavez
Ryan King
Floyd Osbourne
Richard Dean
Bradley Long
Fred Webb
James Hudson
Hunter Andrews
Jacob Alvarado

HTML

<div class="cf dt">
 <div class="dtc">
   <div class="bg-blue white pa2">
     <input type="checkbox" class="mr2"><span>Select All</span>
   </div>
   <div class="bg-blue-light pa2">
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Olga Parsons</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Lula McKinney</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Christy Hampton</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>John Obrien</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Edit Lopez</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Winnie Bass</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Debby Ross</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Christina Larson</span>
     </div>
   </div>
 </div>
 <div class="dtc pa3 v-mid">
   <div class="bg-blue-light br-100 mb4"><a href="#"><img src="../../img/arrow-01.svg" |alt="Arrow"></a></div>
   <div class="bg-blue-light br-100 mb4"><a href="#"><img src="../../img/arrow-01.svg" alt="Arrow" class="rotate-180"></a></div>
 </div>
 <div class="dtc">
   <div class="bg-blue white pa2">
     <input type="checkbox" class="mr2"><span>Select All</span>
   </div>
   <div class="bg-blue-light pa2">
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Billy Warren</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Ronald Andrews</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Lee Warner</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Melvin Daniels</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Adam Pittman</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>David Chavez</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Ryan King</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Floyd Osbourne</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Richard Dean</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Bradley Long</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Fred Webb</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>James Hudson</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Hunter Andrews</span>
     </div>
     <div class="pv1">
       <input type="checkbox" class="mr2"><span>Jacob Alvarado          </span>
     </div>
   </div>
 </div>
</div>