First H1 of the page
This page demonstrates how different combinations of H1 and H2 will have different spacing depending on the combination used.
This first H1 should be comfortably flush against the top of the content panel, which itself should have a gutter of about 20px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet magna ac enim mollis eleifend. Vivamus sapien mi, laoreet a placerat sit amet, cursus sed tortor. Maecenas sem enim, pretium sodales tempor sed, fringilla vel ligula. Donec pulvinar hendrerit sapien, id sollicitudin enim varius sed. Vestibulum pulvinar, purus ut eleifend sodales, velit libero molestie mi, eu blandit quam nulla et purus.
Additional H1s not at the top of the page
Additional H1s should be comfortably spaced (about 30px) after the previous section.
Ut eget dignissim mi. Curabitur nec est ut augue rhoncus viverra. Aliquam erat volutpat. Sed eget tellus libero, in condimentum arcu. Quisque tincidunt risus vel enim eleifend euismod. Fusce faucibus turpis egestas sem accumsan vel luctus lacus aliquam. Aliquam lectus risus, euismod vel hendrerit pharetra, congue quis enim. Sed commodo elit eu urna imperdiet porttitor. In hac habitasse platea dictumst. Quisque eu arcu id mi convallis luctus sit amet vel odio.
Phasellus et risus neque. Donec fermentum luctus arcu nec sollicitudin. Nullam a tortor eu dui dignissim sagittis nec id arcu. Aliquam imperdiet justo sit amet lectus volutpat vel convallis sem fringilla. Suspendisse eleifend molestie erat sit amet accumsan.
H1 with immediate H2
Child H2 following H1
Any H2s following immediately after H1s should be butted up against the H1, but the H1 should have its usual 30px margin above it.
Vivamus convallis dui ut magna molestie molestie. Mauris leo nunc, commodo in blandit in, pharetra id leo. Praesent odio leo, elementum in lacinia nec, vehicula in eros. Donec molestie porta justo, sit amet condimentum ipsum consectetur sed. Morbi porttitor tristique facilisis.
Additional H2s without preceding H1
Any H2s that don't have an H1 immediately before them should have a comfortable gap above it.
In laoreet placerat condimentum. Cras tincidunt, ligula in convallis hendrerit, dui nulla vehicula ante, nec fringilla nibh tellus pharetra turpis. Fusce faucibus turpis egestas sem accumsan vel luctus lacus aliquam. Aliquam lectus risus, euismod vel hendrerit pharetra, congue quis enim.
Sed commodo elit eu urna imperdiet porttitor. In hac habitasse platea dictumst. Quisque eu arcu id mi convallis luctus sit amet vel odio. Pellentesque augue tortor, feugiat quis placerat vel, viverra ac lectus. Etiam a tempor nisi. Donec mattis ante nec ligula placerat tempor.