Introduction | TrueUI

Molecules | Widgets

Feedback Widget

Example

How did we do?

Tell us in your own words

HTML

<div class="shadow-1 pa4">
 <h3 class="mv0 f3 normal tc">How did we do?</h3>
 <div class="tc mv2"><span class="orange f2 cursor-pointer">★</span><span class="orange f2 cursor-pointer">★</span><span class="yellow f2 cursor-pointer">★</span><span class="yellow f2 cursor-pointer">★</span><span class="yellow f2 cursor-pointer">★</span></div>
 <form>
   <fieldset class="bn">
     <textarea name="Comments" cols="20" rows="5" class="pa2 br2 ba b--charcoal-medium w-100 charcoal-medium"></textarea>
     <div class="dt w-100 pt3">
       <div class="dtc w-50">
         <p class="f7">Tell us in your own words</p>
       </div>
       <div class="dtc w-50 tr">
         <input type="submit" value="Send your feedback" class="btn btn--orange">
       </div>
     </div>
   </fieldset>
 </form>
</div>