Headers & Paragraphs

An h1 can contain a span with a class of .ca-gov-icon-[anyicon] which will automatically position the icon outside of the column, ensuring your header aligns with paragraphs. (See the Icon Font Library for a list of all the icons.)

NOTE: Because the icon-fonts are subject to normal character spacing rules. It is important to have a space between the icon's </span> and the header text

Example:

Heading H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu odio sem, non faucibus lectus. Maecenas et lacus et nisl volutpat semper a a magna. Curabitur aliquam risus sit amet mauris sagittis fermentum. Praesent ut pellentesque mauris. Mauris semper varius fringilla. Nam eget sagittis elit. Ut eleifend, ipsum non sagittis tempor, tellus dui fermentum risus, eu tempus lacus nisl vel augue. Proin lacus massa, varius a dictum ac, bibendum at ligula. Phasellus porttitor sollicitudin semper. In malesuada, magna ac consequat consectetur, nisi elit molestie magna, sed hendrerit turpis mi mattis massa. Proin in ante nec enim rutrum mattis. Curabitur tempus, nunc in posuere blandit, libero odio consectetur quam, eget sollicitudin tortor ante eget urna. Etiam in massa quis elit aliquet lacinia. Quisque semper rutrum leo, nec condimentum odio suscipit eget. Etiam blandit sapien vel mi bibendum auctor.

Nam ultrices vulputate orci id faucibus. Sed eget massa ut nulla sodales ullamcorper nec vel nisi. Aenean ultricies diam sit amet ligula ullamcorper lobortis. Sed in risus at dolor commodo gravida. Aenean dolor neque, porta non ultricies ac, vestibulum ut mauris. Curabitur lorem nisi, mattis vel posuere quis, sodales at est. Mauris sagittis tristique blandit. Integer purus sapien, pulvinar ac tempor eu, consectetur lacinia orci. Ut vehicula condimentum ipsum, ac sollicitudin nibh vehicula eget. In egestas dolor vel leo cursus tincidunt. Aenean eget dolor nunc, eget tincidunt erat. Aenean sed nunc metus. Morbi quam sem, vehicula at fermentum ac, commodo in nisl.

Heading H2

Nam ultrices vulputate orci id faucibus. Sed eget massa ut nulla sodales ullamcorper nec vel nisi. Aenean ultricies diam sit amet ligula ullamcorper lobortis. Sed in risus at dolor commodo gravida. Aenean dolor neque, porta non ultricies ac, vestibulum ut mauris. Curabitur lorem nisi, mattis vel posuere quis, sodales at est. Mauris sagittis tristique blandit. Integer purus sapien, pulvinar ac tempor eu, consectetur lacinia orci. Ut vehicula condimentum ipsum, ac sollicitudin nibh vehicula eget. In egestas dolor vel leo cursus tincidunt. Aenean eget dolor nunc, eget tincidunt erat. Aenean sed nunc metus. Morbi quam sem, vehicula at fermentum ac, commodo in nisl.

Heading H3

Sed a elit enim, ac condimentum enim. Nulla ornare interdum pellentesque. Quisque id accumsan diam. Nam euismod ultrices augue, tristique posuere dui commodo sit amet. Nulla ornare lobortis tincidunt. Sed vitae arcu urna. Integer ante nulla, gravida elementum condimentum ornare, varius eget dolor.

Heading H4

In hac habitasse platea dictumst. Vestibulum purus neque, suscipit eget porta ut, tincidunt ac magna. Donec sed enim id neque ullamcorper vulputate. Sed a elit enim, ac condimentum enim. Nulla ornare interdum pellentesque. Quisque id accumsan diam.

Source Code:

Heading H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu odio sem, non faucibus lectus. Maecenas et lacus et nisl volutpat semper a a magna. Curabitur aliquam risus sit amet mauris sagittis fermentum. Praesent ut pellentesque mauris. Mauris semper varius fringilla. Nam eget sagittis elit. Ut eleifend, ipsum non sagittis tempor, tellus dui fermentum risus, eu tempus lacus nisl vel augue. Proin lacus massa, varius a dictum ac, bibendum at ligula. Phasellus porttitor sollicitudin semper. In malesuada, magna ac consequat consectetur, nisi elit molestie magna, sed hendrerit turpis mi mattis massa. Proin in ante nec enim rutrum mattis. Curabitur tempus, nunc in posuere blandit, libero odio consectetur quam, eget sollicitudin tortor ante eget urna. Etiam in massa quis elit aliquet lacinia. Quisque semper rutrum leo, nec condimentum odio suscipit eget. Etiam blandit sapien vel mi bibendum auctor.

Nam ultrices vulputate orci id faucibus. Sed eget massa ut nulla sodales ullamcorper nec vel nisi. Aenean ultricies diam sit amet ligula ullamcorper lobortis. Sed in risus at dolor commodo gravida. Aenean dolor neque, porta non ultricies ac, vestibulum ut mauris. Curabitur lorem nisi, mattis vel posuere quis, sodales at est. Mauris sagittis tristique blandit. Integer purus sapien, pulvinar ac tempor eu, consectetur lacinia orci. Ut vehicula condimentum ipsum, ac sollicitudin nibh vehicula eget. In egestas dolor vel leo cursus tincidunt. Aenean eget dolor nunc, eget tincidunt erat. Aenean sed nunc metus. Morbi quam sem, vehicula at fermentum ac, commodo in nisl.

Heading H2

Nam ultrices vulputate orci id faucibus. Sed eget massa ut nulla sodales ullamcorper nec vel nisi. Aenean ultricies diam sit amet ligula ullamcorper lobortis. Sed in risus at dolor commodo gravida. Aenean dolor neque, porta non ultricies ac, vestibulum ut mauris. Curabitur lorem nisi, mattis vel posuere quis, sodales at est. Mauris sagittis tristique blandit. Integer purus sapien, pulvinar ac tempor eu, consectetur lacinia orci. Ut vehicula condimentum ipsum, ac sollicitudin nibh vehicula eget. In egestas dolor vel leo cursus tincidunt. Aenean eget dolor nunc, eget tincidunt erat. Aenean sed nunc metus. Morbi quam sem, vehicula at fermentum ac, commodo in nisl.

Heading H3

Sed a elit enim, ac condimentum enim. Nulla ornare interdum pellentesque. Quisque id accumsan diam. Nam euismod ultrices augue, tristique posuere dui commodo sit amet. Nulla ornare lobortis tincidunt. Sed vitae arcu urna. Integer ante nulla, gravida elementum condimentum ornare, varius eget dolor.

Heading H4

In hac habitasse platea dictumst. Vestibulum purus neque, suscipit eget porta ut, tincidunt ac magna. Donec sed enim id neque ullamcorper vulputate. Sed a elit enim, ac condimentum enim. Nulla ornare interdum pellentesque. Quisque id accumsan diam.


For more information about California State Web Template typography refer to typography page.