FAZUA Living Styleguide

FAZUA Living Styleguide

Example

<section class="page-section page-section--grey">
   <div class="grid justify-content-center">
       <div class="col-desk-5 col-tab-6 col-mob-6">
           <form>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="form-group has-float-label">
                           <input type="text" class="form-control" id="kundennummer-grey" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="kundennummer-grey">Kundennummer</label>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-6 col-mob-6">
                       <div class="form-group has-float-label">
                           <input type="text" class="form-control" id="vorname-grey" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="vorname-grey">Vorname</label>
                       </div>
                   </div>
                   <div class="col-desk-6 col-mob-6">
                       <div class="form-group has-float-label">
                           <input type="text" class="form-control" id="nachname-grey" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="nachname-grey">Nachname</label>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="form-group has-float-label">
                           <input type="email" class="form-control" id="email-grey" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="email-grey">Email Adresse</label>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="form-group has-float-label">
                           <textarea class="form-control" id="anliegen-grey" placeholder="&nbsp;" rows="4"></textarea>
                           <label class="form-control-placeholder" for="anliegen-grey">Dein Anliegen</label>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="ln-select ln-select--radio form-group has-float-label js--custom-select">
                         <label class="ln-select__label" for="example-select-form-grey">Option auswählen</label>
                         <select name="cm-select" id="test-form2">
                           <option value="s-160-170-cm">S&nbsp;&nbsp;160 - 170 cm</option>
                           <option value="m-170-180-cm">M&nbsp;&nbsp;170 - 180 cm</option>
                           <option value="l-180-190-cm">L&nbsp;&nbsp;180 - 190 cm</option>
                         </select>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="form-group">
                           <div class="form-checkbox">
                               <input class="form-checkbox__input" type="checkbox" id="gridCheck-grey">
                               <label class="form-checkbox__label f1" for="gridCheck-grey">
                                   Ich möchte einen FAZUA Newletter abonnieren
                               </label>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="form-group">
                           <button class="btn btn-dark btn-lg btn-block disabled" type="button"><span>Disabled</span></button>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <div class="form-group">
                         <button class="btn btn-dark btn-lg btn-block" type="submit"><span>Submit</span></button>
                       </div>
                   </div>
               </div>
           </form>
       </div>
   </div>
</section>