I am trying to use checkbox group in a customer facing page using lightning design system styling.

The output should look something like this. I tried using multi select picklist but the rendering was bad.

Any help or pointers regarding the below is much appreciated

[![enter image description here][1]][1]


  [1]: https://i.sstatic.net/PgXPK.jpg


Part of the code I tried is as below

    <fieldset class="slds-form--compound">
       <div class="slds-form-element__group">
          <div class="slds-form-element__row">
             <label class="slds-checkbox">
                <apex:inputCheckbox styleClass="slds-input"
                   value="{!Request.Areas__c}"/>
                <span class="slds-checkbox--faux"></span>             
                <span class="slds-form-element__label">Paint</span> 
             </label>
          </div>
          <div class="slds-form-element__row">
             <label class="slds-checkbox">
                <apex:inputCheckbox styleClass="slds-input"
                   value="{!Request.Areas__c}"/>
                <span class="slds-checkbox--faux"></span>             
                <span class="slds-form-element__label">Carpet</span>    
             </label>
          </div>
          <div class="slds-form-element__row">
             <label class="slds-checkbox">
                <apex:inputCheckbox styleClass="slds-input"
                   value="{!Request.Areas__c}"/>
                <span class="slds-checkbox--faux"></span>             
                <span class="slds-form-element__label">Lightning</span>    
             </label>
          </div>
       </div>
    </fieldset>