extending-content-custom-element-converter.html 859 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <style>
  2. .info-box {
  3. border: 1px solid hsl(0, 0%, 80%);
  4. padding: 1em;
  5. background: hsl(0, 0%, 45%);
  6. }
  7. .info-box-warning {
  8. background: hsl(64, 74%, 85%);
  9. }
  10. .info-box-info {
  11. background: hsl(205, 100%, 90%);
  12. }
  13. .info-box-title {
  14. margin-bottom: 1em;
  15. font-weight: bold;
  16. color: inherit;
  17. }
  18. .info-box-content {
  19. padding: 0 1em;
  20. background: hsl(0, 0%, 100%);
  21. }
  22. </style>
  23. <div id="editor-custom-element-converter">
  24. <p>Info:</p>
  25. <div class="info-box info-box-info">
  26. <div class="info-box-title">Info</div>
  27. <div class="info-box-content">
  28. <p>Editable content of the <strong>info box</strong>.</p>
  29. </div>
  30. </div>
  31. <p>Warning:</p>
  32. <div class="info-box info-box-warning">
  33. <div class="info-box-title">Warning</div>
  34. <div class="info-box-content">
  35. <p>Editable content of the <strong>info box</strong>.</p>
  36. </div>
  37. </div>
  38. </div>