You are here

form-element-icon.twig in Open Social 8.3

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label" for="exampleIcon">
      <span class="control-label__icon--bg icon-phone">
      </span>
      Example with background image
    </label>
    <div class="select-wrapper">
      <select name="iconexample" id="exampleIcon" class="form-control">
        <option value="">Selected option</option>
        <option value="0">Option one</option>
        <option value="1">Option two</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label class="switch">
      <div class="switch__label" for="exampleIcon2">
        <svg class="control-label__icon--svg">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-forum"></use>
        </svg>
        Example with inline SVG
      </div>
      <div class="switch__options">
        Off
        <input type="checkbox" checked>
        <span class="lever"></span>
        On
      </div>
    </label>
  </div>
</div>

File

themes/socialbase/components/03-molecules/form-elements/form-element-icon.twig
View source
  1. <div class="form-horizontal">
  2. <div class="form-group">
  3. <label class="control-label" for="exampleIcon">
  4. <span class="control-label__icon--bg icon-phone">
  5. </span>
  6. Example with background image
  7. </label>
  8. <div class="select-wrapper">
  9. <select name="iconexample" id="exampleIcon" class="form-control">
  10. <option value="">Selected option</option>
  11. <option value="0">Option one</option>
  12. <option value="1">Option two</option>
  13. </select>
  14. </div>
  15. </div>
  16. <div class="form-group">
  17. <label class="switch">
  18. <div class="switch__label" for="exampleIcon2">
  19. <svg class="control-label__icon--svg">
  20. <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-forum"></use>
  21. </svg>
  22. Example with inline SVG
  23. </div>
  24. <div class="switch__options">
  25. Off
  26. <input type="checkbox" checked>
  27. <span class="lever"></span>
  28. On
  29. </div>
  30. </label>
  31. </div>
  32. </div>