FAZUA Living Styleguide

FAZUA Living Styleguide

Example

<section class="page-section">
   <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" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="kundennummer">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" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="vorname">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" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="nachname">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" placeholder="&nbsp;">
                           <label class="form-control-placeholder" for="email">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" placeholder="&nbsp;" rows="4"></textarea>
                           <label class="form-control-placeholder" for="anliegen">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">Option auswählen</label>
                         <select name="cm-select" id="test-form">
                           <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">
                               <label class="form-checkbox__label f1" for="gridCheck">
                                   Ich möchte einen FAZUA Newletter abonnieren
                               </label>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="form-row">
                   <div class="col-desk-12">
                       <button class="btn btn-dark btn-lg btn-block" type="submit"><span>Submit</span></button>
                   </div>
               </div>
           </form>
       </div>
   </div>
</section>