Heading 1

Heading 2: Examples of base styling on typographic elements

Maecenas tristique mi non massa pulvinar tincidunt. Sed mi eros, gravida at semper et, dignissim non neque. Pellentesque condimentum tristique eros, quis scelerisque tortor pellentesque nec. Vestibulum nulla arcu, finibus at posuere vehicula, tempus sed ex. Ut fringilla ultrices neque non luctus. Quisque efficitur erat blandit, dapibus purus et, semper sapien. Suspendisse non placerat leo. Donec et scelerisque nunc. In quis purus eu diam feugiat varius. Ut fermentum imperdiet nunc, et porta ipsum sodales in.

Aliquam urna leo, dictum eget aliquet non, ornare et dui. Morbi quis ipsum in enim ornare pretium. Vivamus finibus felis id molestie vulputate. Cras nibh risus, facilisis a tellus tempus, consectetur egestas quam. Nunc gravida orci libero, nec viverra quam efficitur vel. Quisque at mattis orci. Praesent lobortis libero felis, in tristique mi auctor pulvinar.

Custom Component Typography

To provide our actual styled suite of headings, we need to move away from the semantic h1–h6 model, and toward a more purpose-driven model. Instead of making the decision early on that any h1 will look like this, and any h3 will look like this, we need to be thinking more along the lines of the biggest style of heading will have a class of x; all section titles will have a class of y.

Heading 3

Sed non nunc et sapien hendrerit semper. Duis hendrerit tincidunt eros ullamcorper rhoncus. Morbi eu pretium neque, a bibendum lacus. Donec purus quam, volutpat in nulla vitae, efficitur aliquam lorem. Suspendisse sagittis sed nisi a accumsan. Duis scelerisque tortor felis, sed viverra eros suscipit maximus. Praesent tempor, magna ut molestie semper, sapien urna pellentesque augue, at pellentesque massa augue sit amet mauris. Integer interdum malesuada ipsum, sit amet vulputate felis sollicitudin eu. Donec ullamcorper laoreet mauris at fermentum.

Heading 4

Nunc et dignissim augue. In viverra, lacus id tempor viverra, tortor arcu iaculis dui, ac ultrices quam neque ut mi. Proin a quam finibus, aliquet magna in, condimentum elit. Mauris sed nulla non purus cursus ullamcorper sit amet eget orci. Etiam sodales aliquam arcu, sit amet sodales neque tempus vitae. Pellentesque condimentum consectetur libero in finibus. Aenean vitae consectetur sapien. Phasellus tincidunt pretium rhoncus. Maecenas ullamcorper tempor nibh vitae vulputate.

Heading 5

Pellentesque luctus velit nec felis viverra, vel vulputate arcu cursus. Vivamus maximus, nulla nec dictum ultricies, lectus nulla placerat ipsum, a facilisis ante ex eget est. Aliquam sit amet dictum dui. Mauris blandit metus felis, id facilisis enim volutpat vitae. In eu maximus justo, sed feugiat odio.

Heading 6

Nulla interdum libero magna, id dignissim urna dignissim a. Cras erat erat, viverra eget est in, suscipit iaculis enim. Sed faucibus lorem id tellus pharetra, faucibus semper metus rhoncus. Vestibulum nec malesuada felis. Vivamus pellentesque placerat sem nec posuere. Donec elementum, ex quis sagittis tempor, erat ante consequat felis, nec vestibulum massa erat id libero. Pellentesque sollicitudin erat ut cursus dictum.