Card multi tasks

Basic examples

  • Kid default
  • Kid waiting
  • Kid absent
  • Kid planned absent
  • Kid follow
  • Job
  • Time
  • Contract
Juliette Kindermans
Juliette Kindermans
Juliette Kindermans
Juliette Kindermans
Juliette Kindermans
60h
Lundi
à
Juliette Kindermans
Show code
<div class="cardMultitasks"> <div class="cardMultitasks__left"> <a href="../../devkit/views/profil-kid.html" class="profil"> <div class="icon"><span class="icon-kid -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></div> <div class="name"> Juliette <br> Kindermans </div> </a> </div> <div class="cardMultitasks__right"> <a href="../../devkit/views/daily-sheet.html"><span class="icon-daily-sheet "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span></span></a> <button><span class="icon-diaper "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span></span></button> <button><span class="icon-exit "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></span></button> </div> </div>
<div class="cardMultitasks"> <div class="cardMultitasks__left"> <a href="../../devkit/views/profil-kid.html" class="profil"> <div class="icon"><span class="icon-kid -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></div> <div class="name"> Juliette <br> Kindermans </div> </a> </div> <div class="cardMultitasks__right"> <button type="button" class="button -green">Arrivé</button> <button><span class="icon-abs -border"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span></button> </div> </div>
<div class="cardMultitasks"> <div class="cardMultitasks__left"> <a href="../../devkit/views/profil-kid.html" class="profil"> <div class="icon"><span class="icon-kid -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></div> <div class="name"> Juliette <br> Kindermans </div> </a> </div> <div class="cardMultitasks__right"> <button><span class="icon-abs-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span></button> </div> </div>
<div class="cardMultitasks has-background-blue-medium-2"> <div class="cardMultitasks__left"> <a href="../../devkit/views/profil-kid.html" class="profil"> <div class="icon"><span class="icon-kid -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></div> <div class="name"> Juliette <br> Kindermans </div> </a> </div> <div class="cardMultitasks__right"> <button><span class="icon-holidays "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span></span></button> </div> </div>
<div class="cardMultitasks"> <div class="cardMultitasks__left"> <button class="profil"> <div class="icon"><img src="../../assets/icons/noborder/sheet.svg" alt="" /></div> <div class="name"> Plein temps </div> </button> </div> <div class="cardMultitasks__right"> <span class="square has-background-blue-medium">60h</span> <button><img src="../../assets/icons/trash.svg" alt="" /></button> </div> </div>
<div class="cardMultitasks"> <div class="cardMultitasks__left"> <button class="profil -notKid"> <div class="icon"><span class="icon-daily-sheet -bgLess"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span></span></div> <div class="name"> Plein temps </div> </button> </div> <div class="cardMultitasks__right"> <span class="square has-background-blue-medium">60h</span> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div>
<div class="cardMultitasks -noBorder"> <div class="cardMultitasks__left"> <div class="label">Mercredi</div> </div> <div class="cardMultitasks__right"> <input type="text" class="timeslot" /> <span class="to">à</span> <input type="text" class="timeslot" /> <button><span class="icon-trash "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span></button> </div> </div>

Colors

  • Blue light
  • Blue medium
  • Blue medium 2
Juliette Kindermans
Juliette Kindermans
Show code
<div class="cardMultitasks has-background-blue-light"> <div class="cardMultitasks__left"> <button> <div class="icon"><img src="../../assets/icons/noborder/sheet.svg" alt="" /></div> <div class="name"> 16/03/1989 </div> </button> </div> <div class="cardMultitasks__right"> <button><img src="../../assets/icons/mail.svg" alt="" /></button> </div> </div>
<div class="cardMultitasks has-background-blue-medium"> <div class="cardMultitasks__left"> <button> <div class="icon"><img src="../../assets/icons/noborder/sheet.svg" alt="" /></div> <div class="name"> 16/03/1989 </div> </button> </div> <div class="cardMultitasks__right"> <button><img src="../../assets/icons/mail.svg" alt="" /></button> </div> </div>
<div class="cardMultitasks has-background-blue-medium-2"> <div class="cardMultitasks__left"> <button> <div class="icon"><img src="../../assets/icons/noborder/sheet.svg" alt="" /></div> <div class="name"> 16/03/1989 </div> </button> </div> <div class="cardMultitasks__right"> <button><img src="../../assets/icons/mail.svg" alt="" /></button> </div> </div>

Blinking

  • Default
Juliette Kindermans
Show code
<div class="cardMultitasks has-background-blue-light"> <div class="cardMultitasks__left"> <button> <div class="icon"><img src="../../assets/icons/noborder/sheet.svg" alt="" /></div> <div class="name"> 16/03/1989 </div> </button> </div> <div class="cardMultitasks__right"> <button><img src="../../assets/icons/mail.svg" alt="" /></button> </div> </div>