2.10 #Components.draggable-card Draggable card

Toggle example guides Toggle HTML markup

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

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

Default styling

Mood

2. How would you rate our service today?

.sb-draggable-card--active
The active state for a selected card

Mood

2. How would you rate our service today?

.sb-card--inanimate
An inanimate card that can't have neither focus nor hover states animations

Mood

2. How would you rate our service today?

.sb-draggable-card--dragging
The active state for a card being dragged

Mood

2. How would you rate our service today?

Markup
<div class="sb-flex sb-draggable-card--container">
  <div class="sb-card sb-card--interactive sb-draggable-card [modifier class]" tabindex="0">
    <div class="sb-draggable-card__handle"></div>
    <div class="sb-card__header sb-flex sb-justify-content-between">
      <p class="sb-text--s sb-margin-vertical-xs">Mood</p>
    </div>
    <div class="sb-card__body sb-flex sb-flex-column">
     <p class="sb-title--s"><span class="sb-title--l">2.</span> How would you rate our service today?</p>
       <div class="sb-margin-top sb-flex sb-justify-content-around">
         <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
           <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
           <g class="sb-icon--mood__lines" transform="translate(15 8.57)">
           <circle cx="6" cy="5.43" r="2"/>
           <path d="M.49 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 8.92 3l.56-.32c.52-.29.7-.95.42-1.48A1.07 1.07 0 0 0 8.44.76a288.24 288.24 0 0 0-4.68 2.69c-.64.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .5 4.4z"/>
           </g>
           <g class="sb-icon--mood__lines" transform="matrix(-1 0 0 1 15 8.57)">
           <circle cx="6" cy="5.43" r="2"/>
           <path d="M.88 4.4a3.08 3.08 0 0 0 4.4.92A100.05 100.05 0 0 1 9.3 3l.56-.32c.52-.29.7-.95.41-1.48A1.07 1.07 0 0 0 8.83.76a288.24 288.24 0 0 0-4.68 2.69c-.65.4-1.11.3-1.52-.3a1.06 1.06 0 0 0-1.5-.27A1.1 1.1 0 0 0 .88 4.4z"/>
           </g>
           <path class="sb-icon--mood__lines" d="M20.75 21.35A7.41 7.41 0 0 0 15 19c-2.39 0-4.33.79-5.75 2.35a.96.96 0 0 0 .12 1.41 1.1 1.1 0 0 0 1.5-.11c1-1.1 2.34-1.65 4.13-1.65s3.14.55 4.14 1.65a1.1 1.1 0 0 0 1.49.11c.44-.36.5-.99.12-1.41z"/>
         </svg>
         <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
           <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
           <path class="sb-icon--mood__lines" d="M10.15 20.9c1.05-1.65 2.8-2.25 4.89-1.7 1.71.44 3.23 1.12 4.53 2.02.5.34.58.97.18 1.4-.4.44-1.13.5-1.62.16a11.67 11.67 0 0 0-3.76-1.67c-1.06-.27-1.68-.06-2.2.76-.32.48-1.02.66-1.58.39-.55-.27-.75-.88-.44-1.36z"/>
           <circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
           <circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
           <path class="sb-icon--mood__lines" d="M9.53 9.78a2.56 2.56 0 0 0 1.26-3.24c-.55-1.16-1.16.48-2.27 1.06-1.16.48-2.8-.1-2.27 1.06a2.56 2.56 0 0 0 3.28 1.12zm12.88 1.76a2.56 2.56 0 0 0 3.04-1.67c.33-1.24-1.2-.37-2.41-.64-1.2-.38-2.09-1.89-2.42-.65-.3 1.13.46 2.6 1.8 2.96z"/>
         </svg>
           <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
           <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
           <path class="sb-icon--mood__lines" d="M11.67 22h6.66c1.22 0 1.67-.45 1.67-1s-.45-1-1.67-1h-6.66c-1.22 0-1.67.45-1.67 1s.45 1 1.67 1z"/>
           <circle class="sb-icon--mood__lines" cx="9" cy="14" r="2"/>
           <circle class="sb-icon--mood__lines" cx="21" cy="14" r="2" transform="matrix(-1 0 0 1 42 0)"/>
         </svg>
         <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
           <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
           <path class="sb-icon--mood__lines" d="M9 12c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0C6 13.64 7.34 12 9 12zm12 0c1.66 0 3 1.64 3 3.2 0 1.71-1.5.07-3 0-1.5.07-3 1.71-3 0 0-1.56 1.34-3.2 3-3.2z"/>
           <path class="sb-icon--mood__lines" d="M9.25 21.65A7.41 7.41 0 0 0 15 24c2.39 0 4.33-.79 5.75-2.35a.96.96 0 0 0-.12-1.41 1.1 1.1 0 0 0-1.5.11A5.26 5.26 0 0 1 15 22a5.26 5.26 0 0 1-4.14-1.65 1.1 1.1 0 0 0-1.49-.11.96.96 0 0 0-.12 1.41z"/>
         </svg>
         <svg class="sb-icon sb-icon--mood" viewBox="0 0 30 30">
           <path class="sb-icon--mood__background" d="M0 15a15 15 0 1 0 30 0 15 15 0 0 0-30 0z"/>
           <path class="sb-icon--mood__lines" d="M15 25c4.3 0 6-2.8 6-4.6 0-1.9-12-1.9-12 0 0 1.8 1.7 4.6 6 4.6z"/>
           <path class="sb-icon--mood__eyes" d="M19.3 16.9c1.9-.6 5.2-1.9 5.8-4 0 .1.8-2.5-2-3.3-.6-.2-1.2 0-2 .4-.4-.6-.7-1.1-1.4-1.3-2.8-.7-3.3 2-3.3 1.9-.6 2.1 1.7 4.9 3 6.3zm-8.9 0c1.3-1.4 3.6-4.2 3-6.3 0 0-.5-2.6-3.3-1.9-.7.2-1 .7-1.5 1.3-.7-.3-1.3-.6-2-.4-2.8.8-1.9 3.4-2 3.3.7 2.1 4 3.4 5.8 4z"/>
         </svg>
       </div>
    </div>
  </div>
</div>
Source: components/_draggable-card.scss, line 3