Reaching the World for Christ
A level one heading is your page header, end of question. It associates itself with the entire page and can sometimes be co-opted to include a tagline. Nunc accumsan at diam eget euismod. Mauris at porta orci, quis lacinia elit. Integer pretium erat erat, lobortis feugiat magna consequat ac. Sed vel enim ipsum. Pellentesque consequat, lorem nec porta lobortis, ex lectus bibendum turpis, ut lobortis enim odio sed risus. Morbi tincidunt porta velit ac viverra. Vivamus laoreet, diam consequat aliquet dignissim, libero orci vulputate dolor, eget dignissim ante tortor dignissim urna. Etiam suscipit mi nisi, eget pellentesque sapien eleifend et. Nam et tincidunt ante. Nunc semper odio at metus pellentesque, aliquam euismod lorem molestie. Donec accumsan dolor vel fermentum finibus.
Gibson can be used as accent text: set it to the same line height so that it can occupy similar spaces to Freight Text, but use it for reduced emphasis areas where you need a clean sans-serif (atom-level, primarily)
Level 2 Heading
A level 2 heading will often introduce a section or anchor a large group of components, so it should have generous spacing on all sides and no close association with any particular element. It is the most common molecular heading, because it will almost always be over a group of smaller atoms. It should be centered.
Hi, I’m a Level Three Heading
A level 3 heading should be the most immediate and approachable heading on the page, closely related to the content below. It is the largest atomic heading available. It should be typeset centered by default, but can be left-aligned if necessary — use sparingly.
This is a Heading 4
Level Four is your workhorse. It’s the perfect size for most atoms and will functionally be the smallest heading that you commonly use. It can be typeset left-aligned or centered.
Small Level Five Heading For Emphasis
Level 5 is the fancy level. You can sneak this style into a higher-hierarchy (h4.delta, for example) but shouldn’t go higher than H4 (we don’t want to visually de-emphasize an H3 or an H2 this much. Because H5 grabs about as much attention as H4, be careful using them in-hierarchy.
This is a Heading 6
Use caution with level six — if your page has six true levels of hierarchy, it may be time to consider breaking it up into separate pages. This is a very light style for text-heavy pages with a complex outline. Avoid using it in components if possible (shouldn’t go lower than H4 as a rule of thumb).
H6 is the last block-level element — for smaller emphases, use strong elements.
You do not have to sit outside in the dark. If, however, you want to look at the stars, you will find that darkness is necessary. But the stars neither require nor demand it.Test Attribution
Here is a paragraph element after the block quote, just to display how much spacing you get between elements. The block quote should be generously padded so that it really stands out. This is your highest-emphasis text-level element.
This is a multi-line level two heading that’s really quite long and should be shorter.
This is an accordion Item
This is accordion content.
Another Accordion Item
Second accordion content.