This is going to be a test page to showcase all of the potential content options. It will be a lot of dummy text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi nullam vehicula ipsum a. Mattis vulputate enim nulla aliquet porttitor lacus.
This is Heading 2
You want to use Heading 2 for major section breaks. This would be for longer content pages. Most of the time you probably want Heading 3, which is shown below. Ridiculus mus mauris vitae ultricies leo integer malesuada. Vitae congue eu consequat ac felis donec et. Sed blandit libero volutpat sed cras ornare arcu dui. Blandit aliquam etiam erat velit scelerisque in. Leo in vitae turpis massa sed elementum tempus egestas sed.
Ut ornare lectus sit amet est placerat in egestas erat. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Lectus sit amet est placerat in egestas. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sit amet venenatis urna cursus eget nunc scelerisque.
Heading 3 is here
Diam vel quam elementum pulvinar. Vitae et leo duis ut diam quam nulla porttitor massa. Mi proin sed libero enim sed faucibus turpis in. Viverra mauris in aliquam sem. Sed sed risus pretium quam vulputate. Aliquet nec ullamcorper sit amet.
Convallis tellus id interdum velit laoreet id donec ultrices. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Lacus vestibulum sed arcu non. Donec pretium vulputate sapien nec.
Ut ornare lectus sit amet est placerat in egestas erat. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Lectus sit amet est placerat in egestas. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sit amet venenatis urna cursus eget nunc scelerisque.
This is Heading 4
Heading 4 is good for minor or subheaders within a page section. The main thing is to be consistent — I would use Heading 3 for most scenarios. And then deviate from there as necessary. There are also Heading 5 and Heading 6, shown below, but these are rarely needed.
Heading 5
Duis convallis convallis tellus id. Habitant morbi tristique senectus et netus et malesuada. Imperdiet sed euismod nisi porta. Massa ultricies mi quis hendrerit dolor magna eget. Elit at imperdiet dui accumsan sit amet nulla facilisi. Gravida neque convallis a cras semper auctor neque. Cras semper auctor neque vitae tempus quam pellentesque nec.
Heading 6
Nibh praesent tristique magna sit amet purus gravida quis blandit. Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Scelerisque varius morbi enim nunc faucibus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper.
You can combine headings as well, as below shows. Note: I would always use two steps of separation if you ever combine headers. For example Heading 2 & 4, or 3 & 5, not 2 & 3 or 3 & 4.
Heading 2 Above
Heading 4 Below
Another one:
Heading 3 Above
Heading 5 Below
Opposites work too (and you may have noticed the above horizontal line — it’s there if you need it).
Heading 4 Above
Heading 2 Below
You can also use the blockquote element if you ever need to quote people or reference sources, etc. Here’s an excerpt from Wikipedia on coffee below.
Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species. The genus Coffea is native to tropical Africa (specifically having its origin in Ethiopia and Sudan) and Madagascar, the Comoros, Mauritius, and Réunion in the Indian Ocean.
Now, the one tricky thing this does is require you to do a tiny, tiny, tiny bit of HTML to activate the display pull quotes from the mockups. You could set up the regular blockquote to display this way, and I’ve seen sites do this, but there nearly always comes a time when you need to use a more traditional blockquote and to not have it makes everyone sad. So I’ll teach you how to do the pull quotes like the one below. It’s very easy once you do it once or twice to get the hang of it.
This is a pullquote, all you do is add the text, the share icons and functionality are added automatically.
Now back to paragraphs and photos of coffee. An image can have a caption as well as you can see from the image below. After some more Latin text to serve as a better example of text weight vs. special features. Nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio.
Lectus sit amet est placerat in egestas. Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sit amet venenatis urna cursus eget nunc scelerisque.
And of course you can insert videos. Here’s an example YouTube video below. After the Latin… Nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Lectus sit amet est placerat in egestas.
Eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sit amet venenatis urna cursus eget nunc scelerisque.
Diam vel quam elementum pulvinar. Vitae et leo duis ut diam quam nulla porttitor massa. Mi proin sed libero enim sed faucibus turpis in. Viverra mauris in aliquam sem. Sed sed risus pretium quam vulputate. Aliquet nec ullamcorper sit amet.
