block-widget.html 700 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <style>
  2. .simple-box {
  3. padding: 10px;
  4. margin: 1em 0;
  5. background: rgba( 0, 0, 0, 0.1 );
  6. border: solid 1px hsl(0, 0%, 77%);
  7. border-radius: 2px;
  8. }
  9. .simple-box-title, .simple-box-description {
  10. padding: 10px;
  11. margin: 0;
  12. background: #FFF;
  13. border: solid 1px hsl(0, 0%, 77%);
  14. }
  15. .simple-box-title {
  16. margin-bottom: 10px;
  17. }
  18. </style>
  19. <div id="snippet-block-widget">
  20. <p>This is a simple box:</p>
  21. <section class="simple-box">
  22. <h1 class="simple-box-title">Box title</h1>
  23. <div class="simple-box-description">
  24. <p>The description goes here.</p>
  25. <ul>
  26. <li>It can contain lists,</li>
  27. <li>and other block elements like headings.</li>
  28. </ul>
  29. </div>
  30. </section>
  31. </div>