2.10.1 #Components.draggable-card.compact Draggable card compact

Toggle example guides Toggle HTML markup

Draggable card compact element is a mini version of the card with draggable states

Browser support: IE11+, Safari6.1+, Firefox30+, Chrome30+

Default styling
.sb-draggable-card--ghost
The ghost state that is behind an active draggable card
.sb-draggable-card--active
The active state for a card being dragged
Markup
<div class="sb-flex sb-draggable-card--container">
  <div class="sb-card sb-card--interactive sb-draggable-card sb-draggable-card-compact [modifier class]">
    <div class="sb-draggable-card__handle"></div>
    <div class="sb-card__body">
     <svg class="sb-icon-group" viewBox-box="0 0 98 23" xmlns="http://www.w3.org/2000/svg">
       <g fill="#fff" fillRule="evenodd">
         <path d="M49.501 0C43.15 0 38 5.15 38 11.499 38 17.849 43.149 23 49.501 23 55.851 23 61 17.85 61 11.499 61 5.15 55.851 0 49.501 0" fill="#FFD442" />
         <path d="M52.671 15.602a.845.845 0 011.145-.085c.34.276.38.76.089 1.081-1.086 1.199-2.576 1.802-4.405 1.802-1.83 0-3.32-.603-4.405-1.802a.738.738 0 01.09-1.08.845.845 0 011.144.084c.766.846 1.801 1.265 3.171 1.265 1.37 0 2.405-.42 3.171-1.265zM44.9 9.2c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453zm9.2 0c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453z" fill="#594504" />
         <path d="M4 11.499C4 17.849 9.149 23 15.501 23 21.851 23 27 17.85 27 11.499 27 5.15 21.851 0 15.501 0 9.15 0 4 5.15 4 11.499z" fill="#FFD442" />
         <path d="M18.056 15.333c.934 0 1.277.344 1.277.767 0 .423-.343.767-1.277.767h-5.112c-.934 0-1.277-.344-1.277-.767 0-.423.343-.767 1.277-.767zM10.9 9.2a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067zm9.2 0a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067z" fill="#594504" fillRule="nonzero" />
         <g>
           <path d="M72 11.499C72 17.849 77.149 23 83.501 23 89.851 23 95 17.85 95 11.499 95 5.15 89.851 0 83.501 0 77.15 0 72 5.15 72 11.499z" fill="#FFD442" />
           <path d="M83.5 19.167c3.304 0 4.6-2.147 4.6-3.549 0-1.402-9.2-1.402-9.2 0s1.296 3.549 4.6 3.549z" fill="#594504" fillRule="nonzero" />
           <path d="M86.832 12.95c1.408-.46 3.951-1.423 4.391-3.056-.024.08.661-1.94-1.47-2.51-.517-.14-.968.033-1.51.3-.335-.502-.638-.876-1.156-1.015-2.13-.57-2.549 1.521-2.529 1.44-.436 1.633 1.287 3.74 2.274 4.842zM79.987 12.95c.988-1.101 2.71-3.208 2.274-4.842.02.082-.397-2.01-2.529-1.439-.517.139-.821.513-1.157 1.016-.541-.268-.99-.44-1.509-.302-2.13.571-1.446 2.592-1.47 2.511.44 1.633 2.984 2.596 4.39 3.057z" fill="#F4606E" />
         </g>
       </g>
     </svg>
    </div>
    <div class="sb-card__footer">
      <p class="sb-text--s">Label</p>
    </div>
  </div>
 <div class="sb-card sb-draggable-card sb-draggable-card-compact sb-draggable-card--ghost sb-draggable-card--background">
   <div class="sb-draggable-card__handle"></div>
   <div class="sb-card__body">
     <svg class="sb-icon-group" viewBox-box="0 0 98 23" xmlns="http://www.w3.org/2000/svg">
       <g fill="#fff" fillRule="evenodd">
         <path d="M49.501 0C43.15 0 38 5.15 38 11.499 38 17.849 43.149 23 49.501 23 55.851 23 61 17.85 61 11.499 61 5.15 55.851 0 49.501 0" fill="#EEF3F7" />
         <path d="M52.671 15.602a.845.845 0 011.145-.085c.34.276.38.76.089 1.081-1.086 1.199-2.576 1.802-4.405 1.802-1.83 0-3.32-.603-4.405-1.802a.738.738 0 01.09-1.08.845.845 0 011.144.084c.766.846 1.801 1.265 3.171 1.265 1.37 0 2.405-.42 3.171-1.265zM44.9 9.2c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453zm9.2 0c1.27 0 2.3 1.255 2.3 2.453 0 1.311-1.15.054-2.3 0-1.15.054-2.3 1.311-2.3 0 0-1.198 1.03-2.453 2.3-2.453z" fill="#9CACBA" />
         <path d="M4 11.499C4 17.849 9.149 23 15.501 23 21.851 23 27 17.85 27 11.499 27 5.15 21.851 0 15.501 0 9.15 0 4 5.15 4 11.499z" fill="#EEF3F7" />
         <path d="M18.056 15.333c.934 0 1.277.344 1.277.767 0 .423-.343.767-1.277.767h-5.112c-.934 0-1.277-.344-1.277-.767 0-.423.343-.767 1.277-.767zM10.9 9.2a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067zm9.2 0a1.533 1.533 0 110 3.067 1.533 1.533 0 010-3.067z" fill="#9CACBA" fillRule="nonzero" />
         <g>
           <path d="M72 11.499C72 17.849 77.149 23 83.501 23 89.851 23 95 17.85 95 11.499 95 5.15 89.851 0 83.501 0 77.15 0 72 5.15 72 11.499z" fill="#EEF3F7" />
           <path d="M83.5 19.167c3.304 0 4.6-2.147 4.6-3.549 0-1.402-9.2-1.402-9.2 0s1.296 3.549 4.6 3.549z" fill="#9CACBA" fillRule="nonzero" />
           <path d="M86.832 12.95c1.408-.46 3.951-1.423 4.391-3.056-.024.08.661-1.94-1.47-2.51-.517-.14-.968.033-1.51.3-.335-.502-.638-.876-1.156-1.015-2.13-.57-2.549 1.521-2.529 1.44-.436 1.633 1.287 3.74 2.274 4.842zM79.987 12.95c.988-1.101 2.71-3.208 2.274-4.842.02.082-.397-2.01-2.529-1.439-.517.139-.821.513-1.157 1.016-.541-.268-.99-.44-1.509-.302-2.13.571-1.446 2.592-1.47 2.511.44 1.633 2.984 2.596 4.39 3.057z" fill="#9CACBA" />
         </g>
       </g>
     </svg>
   </div>
   <div class="sb-card__footer">
     <p class="sb-text--s">Label</p>
   </div>
 </div>
</div>
Source: components/_draggable-card.scss, line 164