You are here

headings.html.twig in Simple Style Guide 8

<a name="headings"></a>

<h3 class="simple-styleguide--sectionhead">{{ default_pattern }}</h3>

<div class="simple-styleguide">
    <div class="calculate">
        <h1 class="measure">H1 Heading</h1>
        <h1>H1 Heading With<br/>Broken Text</h1>
        <span class="info"></span>
    </div>
    <hr/>
    <div class="calculate">
        <h2 class="measure">H2 Heading</h2>
        <h2>H2 Heading With<br/>Broken Text</h2>
        <span class="info"></span>
    </div>
    <hr/>
    <div class="calculate">
        <h3 class="measure">H3 Heading</h3>
        <h3>H3 Heading With<br/>Broken Text</h3>
        <span class="info"></span>
    </div>
    <hr/>
    <div class="calculate">
        <h4 class="measure">H4 Heading</h4>
        <h4>H4 Heading With<br/>Broken Text</h4>
        <span class="info"></span>
    </div>
    <hr/>
    <div class="calculate">
        <h5 class="measure">H5 Heading</h5>
        <h5>H5 Heading With<br/>Broken Text</h5>
        <span class="info"></span>
    </div>
    <hr/>
    <div class="calculate">
        <h6 class="measure">H6 Heading</h6>
        <h6>H6 Heading With<br/>Broken Text</h6>
        <span class="info"></span>
    </div>
    <hr/>
</div>

<div class="simple-styleguide headers">
    <h1>H1 Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>

    <h2>H2 Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>

    <h3>H3 Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>

    <h4>H4 Heading</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>

    <h5>H5 Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>

    <h6>H6 Heading</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
</div>

File

templates/includes/headings.html.twig
View source
  1. <a name="headings"></a>
  2. <h3 class="simple-styleguide--sectionhead">{{ default_pattern }}</h3>
  3. <div class="simple-styleguide">
  4. <div class="calculate">
  5. <h1 class="measure">H1 Heading</h1>
  6. <h1>H1 Heading With<br/>Broken Text</h1>
  7. <span class="info"></span>
  8. </div>
  9. <hr/>
  10. <div class="calculate">
  11. <h2 class="measure">H2 Heading</h2>
  12. <h2>H2 Heading With<br/>Broken Text</h2>
  13. <span class="info"></span>
  14. </div>
  15. <hr/>
  16. <div class="calculate">
  17. <h3 class="measure">H3 Heading</h3>
  18. <h3>H3 Heading With<br/>Broken Text</h3>
  19. <span class="info"></span>
  20. </div>
  21. <hr/>
  22. <div class="calculate">
  23. <h4 class="measure">H4 Heading</h4>
  24. <h4>H4 Heading With<br/>Broken Text</h4>
  25. <span class="info"></span>
  26. </div>
  27. <hr/>
  28. <div class="calculate">
  29. <h5 class="measure">H5 Heading</h5>
  30. <h5>H5 Heading With<br/>Broken Text</h5>
  31. <span class="info"></span>
  32. </div>
  33. <hr/>
  34. <div class="calculate">
  35. <h6 class="measure">H6 Heading</h6>
  36. <h6>H6 Heading With<br/>Broken Text</h6>
  37. <span class="info"></span>
  38. </div>
  39. <hr/>
  40. </div>
  41. <div class="simple-styleguide headers">
  42. <h1>H1 Heading</h1>
  43. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
  44. <h2>H2 Heading</h2>
  45. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
  46. <h3>H3 Heading</h3>
  47. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
  48. <h4>H4 Heading</h4>
  49. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
  50. <h5>H5 Heading</h5>
  51. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
  52. <h6>H6 Heading</h6>
  53. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
  54. </div>